:root{
    /* Color variables */
    --color1: white;
    --color2: black;
    --color3: rgb(147, 224, 255);
    --color4: aliceblue;
    --switchcolor: #cefaf8;
    --hovercolor: rgba(126, 187, 211, 0.7);
    --cherryblossom: none;
    /* Other variables */
    --font-size-title: clamp(2rem, 5vw, 5rem);
    --font-size-base: 1.5625rem;
    --font-size-sm: 1.25rem;
} 
*{box-sizing: border-box;}
body{
    counter-reset: section;
    text-align: center;
    font-family: 'Cutive Mono', sans-serif;
    font-weight: bolder;
    background-color: var(--color1);
    color: var(--color2);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
}
/*cherry blossom effect*/
body::after {
    background-image: url('https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwBAS62lleijrhGHB-Tx5_KQ');
    filter: hue-rotate(0deg);
    pointer-events: none !important;
    content: "";
    width: 100% !important;
    height: 100% !important;
    display: var(--cherryblossom);
    top: 0 !important;
    left: 0 !important;
    position: fixed;
    z-index: 1;
}
.hoverable{cursor: pointer;}
hr{border: 0.1rem solid var(--color2);}
h1 {
    text-transform: capitalize;
    font-size: var(--font-size-title);
    text-align: center;
    color: var(--color2);
    text-shadow: 0.0625rem 0.0625rem 0.3125rem var(--color2), 0.1875rem 0.1875rem 0.375rem rgba(255, 191, 245, 0.973);
}
h2{
    font-size: 4rem; 
    text-shadow: 0.0625rem 0.0625rem 0.3125rem var(--color2), 0.1875rem 0.1875rem 0.375rem rgba(255, 191, 245, 0.973);
}
h3{font-size: 2.25rem;}
a{
    text-decoration: none;
    position: relative;
    font-size: 2rem;
    width: fit-content;
    color: var(--color2);
    border-bottom: 0.2rem solid var(--color2);
    transition: color 0.5s ease-in, border 0.5s ease-in;
}
a:hover{
    color: var(--hovercolor); 
    border-bottom: 0.2rem solid var(--hovercolor);
}
/*jump to top*/
#jump-to-top{
    display: none;
    position: fixed;
    width: 3.125rem;
    height: 3.125rem;
    top: 80vh;
    right: 3vw;
    z-index: 1;
    background-color: var(--switchcolor);
    box-shadow: 0 0 0.5rem 0.1rem var(--hovercolor);
    border: 0.1rem solid var(--hovercolor);
    transition: background 1s ease;
}
#jump-to-top span{
    width: 0;
    height: 0;
    display: inline-block;
    border-left: 0.4375rem solid transparent;
    border-right: 0.4375rem solid transparent;
    border-bottom: 0.4375rem solid var(--hovercolor);
}
#jump-to-top:hover{background: var(--color3);}

.header{
    font-weight: bolder;
    background-color: var(--color3);
    width: 100%;
    margin-top: -3vw;
    padding: 5vw;
}
.category{
    background-color: rgb(24, 17, 54);
    color: #cefaf8;
    position: relative;
    font-weight: bolder;
    width: 100%;
    height: 40vw;
    margin: 0;
    overflow:hidden;
    border-bottom: 0.2vw solid #cefaf8;
}
.category img{
    position:absolute;
    left: 0;
    width: 100%;
    height: 40vw;
    mix-blend-mode:soft-light;
}
.category a{
    position:absolute;
    color: #cefaf8;
    bottom: 5%;
    right: 5%;
    transition: color 0.5s ease-in, border 0.5s ease-in;
    border-bottom: 0.2rem solid #cefaf8;
}
.category a:hover{color: #62c2bd; border-bottom: 0.2vw solid #62c2bd;}
.credits{margin: 5vw 1vw;}
.credits h3{text-align: left;}
.creditsImg{
    width: 18.75rem;
    height: 18.75rem;
}
.credits a{left: 30%;}
.rotateImg{animation: imgspin 1s ease-out;}
@keyframes imgspin{
    from {opacity:0; transform: rotate(0deg); width: 0; height: 0;}
    to {opacity: 1; transform: rotate(720deg); width: 70%; height: auto;}
}
/*loading screen*/
#loadscreen{
    display: none;
    background-color: rgba(129, 126, 126, 0.849);
    left: 0;
    top: 0;
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}
#wait{
    position: relative; 
    top: 60%; 
    font-size: 2.5rem;
}
#loader{
    border: 16px solid var(--color1);
    border-radius: 50%;
    border-top: 16px solid var(--color2);
    position: fixed;
    left: 45%;
    top: 40%;
    width: 8rem;
    height: 8rem;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
/* =========================
   Theme Option Styles
   ========================= */
.theme-option, h5{
    width: fit-content;
    display: inline-block;
    font-size: var(--font-size-base);
    position: relative;
    left: 30%;
}
.theme-option select{
    color: var(--color2);
    display: block;
    font-size: var(--font-size-base);
    text-align: center;
    font-family: 'Cutive Mono', sans-serif;
    font-weight: bolder;
    padding: 0.725rem;
    border: 0.125rem solid var(--hovercolor);
    border-radius: 0.5rem;
    background-color: var(--color3);
    outline: none;
    appearance: none;
    width: 14.625rem;
}
.arrow {
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    border-left: 0.4375rem solid transparent;
    border-right: 0.4375rem solid transparent;
    border-top: 0.4375rem solid var(--color2);
    right: 0.625rem;
    bottom: 1.25rem;
}
.rotate-arrow-up {animation: rotateUp 0.5s ease forwards;}
.rotate-arrow-down {animation: rotateDown 0.5s ease forwards;}
@keyframes rotateUp {
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@keyframes rotateDown {
    from {transform: rotate(180deg);}
    to {transform: rotate(360deg);}
}
/* =========================
   DROPDOWN OPTION STYLES
   ========================= */
.dropdown-option{
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 0.3125rem;
    background-color: var(--color3);
    z-index: 1;
    width: 100%;
    position: absolute;
}
.dropdown-option li{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.125rem;
    border-radius: 0.3125rem;
    transition: background 0.5s ease;
}
.open-option{animation: open 1s ease forwards;}
@keyframes open {
    from {opacity: 0;}
    to {opacity: 1;}
}
.dropdown-option li:hover{background: var(--hovercolor);}

/* =========================
   Footer
   ========================= */
.footer {
    text-align: center;
    background-color: var(--color3);
    width: 100%;
    margin-top: 4rem;
    padding: 1.5rem 0 0.5rem;
    font-size: 1.5rem;
}
.socialIcon img { 
    width: 1.875rem; 
    height: 1.875rem; 
}
.socialIcon a { border: none;}

/* =========================
   Responsive for mobile screen
   ========================= */
@media only screen and (max-width: 600px){ 
    h1{font-size: 7vw;}
    h2{font-size: 6vw;}
    h3{font-size: 4vw;}
    #wait{left: 0; top: 30%;}
    #loader{left: 35%; top: 20%;}
    a, .category a{font-size: 4vw;}
    .category{height: 70vw;}
    .category img{height: 70vw;}
    .credits a{left: 17%;}
    h5{display: block;}
    .theme-option, p{left: 0;}
}