/* CHIWA CSS - GLOBAL */

/*
    This is a global style sheet used in ChiwaInori.top.
    The rules in each element below could follow this order: Color, Display, Width, Height, Padding, Border, Margin, Others.
*/

/* MAIN FORMAT FOR EVERY DEVICES */
/* Those rules overridden in mobile sector are only used in desktop. */

:root {
    /* CHIWA BASIC COLORS */
    /* These are basic colors of ChiwaInori.top and used in basic structures. -500 colors are major colors in each section. */

    --backgroundColor-500: #f0f8ff; /* aliceblue */
    --backgroundColor-600: #a0c8df;

    --textColor-300: #bbccdd;
    --textColor-400: #8899aa;
    --textColor-500: #556677;

    --activeColor-400: #99c8ff;
    --activeColor-500: #66a8ff;
    --activeColor-600: #5598ee;
    --activeColor-700: #4478bb;
    --activeColor-800: #8898aa;

    --white-f: #ffffff;
    --white-e: #eeeeee;
    --white-d: #dddddd;
    --white-0: #000000;

    /* CHIWA STANDARD COLORS */
    /* These are used to make website more colorful. They are verified to have great or normal visibility on ChiwaInori.top. */

    --red: #dd0000;
    --orange: #ff8800;
    --yellow: #ffc800;
    --green: #00dd00;
    --cyan: #44ddcc;
    --blue: #00a8ff;
    --purple: #cc44ee;

    --lightRed: #ff5580;
    --lightOrange: #ffa800;
    --lightYellow: #eedd55;
    --lightGreen: #88ee88;
    --lightCyan: #88dddd;
    --lightBlue: var(--activeColor-400);
    --lightPurple: #cc99dd;

    --darkRed: #aa0000;
    --darkOrange: #cc8822;
    --darkYellow: #bbaa11;
    --darkGreen: #11aa00;
    --darkCyan: #0088aa;
    --darkBlue: #0000dd;
    --darkPurple: #661188;

    --pink: #ff86c3;
    --aqua: var(--activeColor-500);

    --gray: var(--textColor-400);

    /* TIER COLORS (RED -> GREEN) */
    /* These colors are used in tables to show different values. */

    --tier-1: #ff1100;
    --tier-2: #ff4400;
    --tier-3: #ff7700;
    --tier-4: #ffaa00;
    --tier-5: #ffdd00;
    --tier-6: #dddd00;
    --tier-7: #aadd00;
    --tier-8: #77dd00;
    --tier-9: #44cc00;
    --tier-10: var(--darkGreen);

    /* MISC */

    --transit: cubic-bezier(0.22, 0.61, 0.36, 1); /* Out Cubic */
}

/* BASIC LAYOUT */

body {
    background-color: var(--backgroundColor-600);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0px;
}

#cw-main {
    background-color: var(--backgroundColor-500);
    /* min-height: 90vh; */
    padding: 30px 25px 30px 25px;
    border-radius: 10px;
    margin: 10px auto 10px auto;
    flex: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* NORMAL ELEMENTS */

/* NORMAL ELEMENTS - TEXT */

* {
    font-family: "Lolita", sans-serif;
    transition: all 0.1s var(--transit);
}

#cw-title h1 {
    margin: auto 0px 0px 0px;
}

#cw-nav h6 {
    margin-top: 0px;
}

p, h1, h2, h3, h4, h5, h6, img, video, audio {
    margin: 10px auto;
}

ruby rt {
    font-size: 10px;
}

table {
    color: var(--textColor-500);
    margin: 0px 0px 10px 0px;
}

th, td {
    text-align: center;
}

hr {
    margin: 32px auto;
}

blockquote p {
    color: var(--textColor-400);
    font-style: italic;
}

/* NORMAL ELEMENTS - MEDIA */

img:not([class*="NBM"]), video:not([class*="NBM"]) {
    border: 3px solid var(--activeColor-500);
    margin: 2px;
}

img[style*="float: left"] {
    margin-right: 8px;
}

/* NORMAL ELEMENTS - INTERACTION */

input, button, textarea, select {
    color: var(--activeColor-500);
    background-color: var(--white-f);
    margin: 2px 10px;
    border: 2px solid var(--activeColor-500);
    font-weight: bold;
}

input:not([type="checkbox"]), button, textarea, select {
    border-radius: 6px;
}

input, textarea {
    cursor: text;
}

::placeholder {
    color: var(--activeColor-800);
}

button, select {
    cursor: pointer;
}

select {
    color: var(--activeColor-500);
    background-color: var(--white-f);
    border: 2px solid var(--activeColor-500);
    margin: auto 10px;
}

textarea {
    resize: none;
}

input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin-bottom: 0px;
    appearance: none;
    cursor: pointer;
}

:is(input[type="checkbox"], input[type="radio"], button, select):hover {
    color: var(--activeColor-600);
    border: 2px solid var(--activeColor-600);
    background-color: var(--white-e);
}

:is(input[type="checkbox"], input[type="radio"]):checked:not(:active)::before {
    background-color: var(--activeColor-500);
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

:is(input[type="checkbox"], input[type="radio"]):checked:active::before {
    background-color: var(--activeColor-700);
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

:is(input[type="checkbox"], input[type="radio"]):disabled:checked::before {
    background-color: var(--textColor-400);
}

input[type="checkbox"]:checked::before {
    width: 5px;
    height: 5px;
}

input[type="radio"] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-bottom: -1px;
    appearance: none;
    cursor: pointer;
}

input[type="radio"]:checked::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}


input[type="range"] {
    background: var(--white-f);
    width: 192px;
    height: 8px;
    appearance: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    background: var(--activeColor-400);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    appearance: none;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    background: var(--activeColor-400);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    appearance: none;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

input[type="color"] {
    width: 28px;
    height: 24px;
}

:is(input[type="checkbox"], input[type="radio"], button):active {
    color: var(--activeColor-700);
    border: 2px solid var(--activeColor-700);
    background-color: var(--white-d);
    transition: color 0s;
}

:is(input, button, textarea):disabled:is(:hover, :not(:hover)) { /* Used :is(:hover, :not(:hover)) to raise specificity to (0, 2, 1) */
    color: var(--textColor-400);
    background-color: var(--white-d);
    border: 2px solid var(--textColor-400);
    cursor: not-allowed;
}

/* TEXT COLORS */

p, h1, h2, h3, h4, h5, h6 {
    color: var(--textColor-500);
}

span, a, strong {
    color: inherit;
}

*::selection {
    color: var(--white-f);
    background-color: var(--lightBlue);
}

/* LINK  SPECIALS */

a:not(.HLK), .LNK {
    color: var(--activeColor-500);
}

a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK) {
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK))::after {
    content: "";
    background-color: currentColor;
    width: 100%;
    position: absolute;
    left: 0px;
    height: 1px;
    bottom: 0px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--transit);
    isolation: isolate;  /* Make rt color change when a:hover */
}


:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK)):hover {
    color: var(--activeColor-600);
    font-weight: bold;
}

:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK)):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK)):not(:hover)::after {
    transform-origin: right center;
}

:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK)):active {
    color: var(--activeColor-700);
}

:is(a:not(.HLK), .LNK, [onclick]:not(button):not(.HLK)):hover rt {  /* Make rt color change when a:hover */
    position: relative;
    z-index: -1;
}

/* SPECIAL CLASSES IN ChiwaInori.top */

/*
.LNK {} (Link) is defined above
.NBM {} (No Border Media) is defined above
.IFB {} (Infobox) is defined below
*/

.STX, .ANT { /* Small Texts */ /* Annotate */
    font-size: 10px;
}

.ANT { /* Annotate */
    color: var(--textColor-400);
}

.CDE { /* Code */
    font-family: "Consolas", "Lolita", sans-serif;
}

.BRT, .BRT tr > *:not(input, button) { /* Border Table */
    border: 2px solid var(--textColor-500);
    border-collapse: collapse;
}

.SKH { /* Sticky Header */
    background-color: var(--backgroundColor-500);
    position: sticky;
    top: 0px;
}

.HLK, .HLK:is(:link, :hover, :visited) { /* Hidden Link */
    color: var(--textColor-500);
    text-decoration: none;
    cursor: text;
}

.SEIZURE { /* Seizure Warning */
    background-color: var(--backgroundColor-500);
    text-align: center;
    width: 650px;
    padding: 16px 32px 16px 32px;
    border: 2px solid var(--textColor-500);
}

/* Infobox Styles */

[class*="IFB"] { /* Infobox */
    text-align: center;
    padding: 10px 16px 6px 16px;
    border-radius: 10px;
    margin: 16px 0px 0px 0px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.IFB-Red { /* Archived */
    background-color: #ff9999;
    border: 2px solid var(--red);
}
.IFB-Yellow { /* Out of Date */
    background-color: #ffff99;
    border: 2px solid var(--yellow);
}
.IFB-Green { /* Update */
    background-color: #99ff99;
    border: 2px solid var(--green);
}
.IFB-Blue { /* Debug */
    background-color: #99ffff;
    border: 2px solid var(--blue);
}

.IFB-Red * {
    color: var(--red);
}
.IFB-Yellow * {
    color: var(--yellow);
}
.IFB-Green * {
    color: var(--darkGreen);
}
.IFB-Blue * {
    color: var(--blue);
}

[class*="IFB"] * {
    margin-top: 5px;
    margin-bottom: 5px;
}

[class*="IFB"] > p:nth-child(1) {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* MOBILE COMMON */

@media not (hover: hover) {
    #cw-main {
        width: 90%;
        min-height: 90vh;
        border-radius: 20px;
        margin: 20px auto 20px auto;
    }

    h1 {
        font-size: 64px;
    }
    
    h2 {
        font-size: 48px;
    }
    
    h3 {
        font-size: 38px;
    }
    
    p, h4, span, a {
        font-size: 32px;
    }
    
    h5 {
        font-size: 26px;
    }
    
    h6 {
        font-size: 24px;
    }
    
    .ANT, .STX {
        font-size: 20px;
    }
    
    input {
        width: 320px;
        height: 32px;
        border: 4px solid var(--activeColor-500);
        margin: 4px 16px;
        font-size: 24px;
    }

    button {
        height: 52px;
        border: 4px solid var(--activeColor-500);
        font-size: 24px;
    }

    input:not([type="checkbox"]), button, textarea, select {
        border-radius: 12px;
    }

    :is(input[type="checkbox"], input[type="radio"], button) {
        margin-bottom: -3px;
    }

    :is(input[type="checkbox"], input[type="radio"], button, select):hover {
        border: 4px solid var(--activeColor-600);
    }
    
    input[type="checkbox"] {
        width: 30px;
        height: 30px;
    }
    
    input[type="checkbox"]:checked::before {
        top: 39%;
        left: 39%;
        transform: scale(300%, 300%);
    }
    
    input[type="radio"] {
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    
    input[type="radio"]:checked::before {
        top: 37%;
        left: 36%;
        transform: scale(275%, 275%);
    }
    
    input[type="range"] {
        width: 320px;
        height: 16px;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 30px;
        height: 30px;
    }
    
    input[type="color"] {
        width: 36px;
        height: 36px;
        border-radius: 18px;
    }
    
    :is(input, button, textarea):disabled:is(:hover, :not(:hover)) {
        border: 4px solid var(--textColor-400);
    }
    
    select {
        width: 320px;
        height: 48px;
        border: 4px solid var(--activeColor-500);
        font-size: 32px;
    }
    
    ruby rt {
        margin-bottom: -12px;
        font-size: 18px;
    }

    caption, th, td {
        font-size: 32px;
    }
    
    [class*="IFB"] {
        width: 91%;
        border-width: 6px;
        border-radius: 20px;
    }
}