:root {
    --darkgrey: rgb(15, 15, 15);
    --mediumgrey: rgb(150, 150, 150);
    --lightgrey: rgb(223, 223, 223);
    --white: rgb(248, 248, 248);
    
    --accentcolor: rgb(89, 111, 150);
}

@media (prefers-color-scheme: dark) {

    :root {
    --darkgrey: rgb(212, 212, 212);
    --mediumgrey: rgb(60, 60, 60);
    --lightgrey: rgb(37, 37, 37);
    --white: rgb(63, 63, 63);
    
    --accentcolor: rgb(89, 111, 150);
}}

    @keyframes goOobie {

    0% {transform: rotateY(360deg);}
    100% {transform: rotateY(0deg);}
        
    }

    @keyframes spinny {
0% {transform: rotate(0deg);}
25% {transform: rotate(15deg) scale(1.2);}
50% {transform: rotate(0deg);}
75% {transform: rotate(-15deg) scale(1.3);}
100% {transform: rotate(0deg);}
}



body {
    background-color: var(--lightgrey);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


nav {
    display: flex;
    width: 98%;
    justify-content: space-evenly;
    padding: 20px;
    margin-top: -10px;
    background-color: var(--mediumgrey);

}

header {
    width: 50vw;
    background-color: var(--white);
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    header > h1 {
        margin-bottom: 1px;
    }

main {
    width: 50vw;
    background-color: var(--white);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: justify;
}

    main p, h1, h2, h3, h4, h5, h6 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .titlePart {
        display: flex;
        justify-content: space-between;
        margin-top: -2em;
        margin-bottom: -1.8em;
    }

    .titlePart > p {
        line-height: 0em;
    }

    a {
        background-color: var(--lightgrey);
        padding: 10px;
        color: var(--darkgrey);
        border-radius: 5px;
        box-shadow: inset 0 0 1px 1px black;
        text-decoration: none;
    }


/* The Settings Sidebar*/

        .sideBar {
            position: fixed;
            right: 0;
            top: 30%;
            height: 130px;
            background-color: var(--white);
            display: flex;
            justify-content: center;
            border-radius: 15px 0 0 15px;
        }

        .containSlider {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .containSlider > span {
            writing-mode: sideways-rl;
        }

                .hidden {
                    display: none;
                }

                .visible {
                    display: block;
                }

/* The Silly Slider (SS)*/

    .catCursor {
    cursor: url("../images/customCursor.png"), auto;
    }

    .cuteBackground {
        background-color: #94BBE9;
        background: radial-gradient(circle, rgba(148, 187, 233, 1) 0%, rgba(238, 174, 202, 1) 100%); 
        
;    }

    .step { 
        visibility: hidden; 
    }

    .step.pop {
        visibility: visible; 
    }

    .superSecretLink {
        background-color: brown;
    }

    /* In this house we love comic sans, or, "change font function"*/
    
        .hiddenSans {
            font-family: 'Times New Roman', Times, serif;
            color: var(--darkgrey);
        }

        .funny-font {
            font-family: 'Comic Sans MS', 'Comic Sans', sans-serif;
        }

        .rainbow-text {
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* Sip-a-Coffee-a-thon */

    .coffeeCup {
        width: 20vw;
    }

/* Input Settings*/

    #settingToggle {
        border: none;
        cursor: help;
        background: var(--mediumgrey);
        border-radius: 15px 0 0 15px;
    }

    #keteranganCuy {
        all: unset;
        background-color: var(--lightgrey);
        padding: 10px;
        color: var(--darkgrey);
        border-radius: 5px;
        box-shadow: inset 0 0 1px 1px black;
        text-decoration: none;
        cursor: pointer;
    }

    input[type="range"] {
        writing-mode: vertical-lr;
        direction: rtl;   
        accent-color: var(--mediumgrey);
    }

    .oobieDance {
        animation: goOobie 1s linear infinite;
    }

    .myApologies {
        animation: spinny 1.5s linear infinite;
    }

    /* petals

    .petal {
    position: relative;
    width: 100%;
    top: -340px;
    text-align: left;
}

.petal span {
    display: inline-block;
    overflow: hidden;
    width: 5px;
    height: 5px;
    border-radius: 200px 10px 200px 200px;
    background: linear-gradient(to bottom, #faaca8, #ddd6f3);
    z-index: 1;
    transform: skewX(30deg);
    backface-visibility: visible;
    -webkit-animation: fallingSakura1 8s ease infinite;
}

.petal span:nth-of-type(3n+2) {
    -webkit-animation: fallingSakura2 8s ease infinite;
}

.petal span:nth-of-type(3n+1) {
    -webkit-animation: fallingSakura3 8s ease infinite;
}


.petal span:nth-of-type(n)   { -webkit-animation-delay: -1.9s;}
.petal span:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
.petal span:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
.petal span:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
.petal span:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
.petal span:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
.petal span:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
.petal span:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
.petal span:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
.petal span:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
.petal span:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
.petal span:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
.petal span:nth-of-type(13n) { -webkit-animation-delay: 5.8s;}
.petal span:nth-of-type(14n) { -webkit-animation-delay: -0.1s;}
.petal span:nth-of-type(15n) { -webkit-animation-delay: 6.3s;}
.petal span:nth-of-type(16n) { -webkit-animation-delay: -1s;}
.petal span:nth-of-type(17n) { -webkit-animation-delay: 7.4s;}
.petal span:nth-of-type(18n) { -webkit-animation-delay: -0.3s;}
.petal span:nth-of-type(19n) { -webkit-animation-delay: 8.3s;}
.petal span:nth-of-type(20n) { -webkit-animation-delay: -0.6s;}
.petal span:nth-of-type(21n) { -webkit-animation-delay: 7.7s;}

.petal span:nth-of-type(2n+2) {
    background: linear-gradient(to right, #fffbd5, #F15F79);
}

.petal span:nth-of-type(3n+1) {
    background: linear-gradient(to right, #DD5E89, #F7BB97);
}

.petal span:nth-of-type(3n+2) {
    border-radius: 20px 1px;
}
.petal span:nth-of-type(3n+3) {
    transform: rotateX(-180deg);
}

.petal span:nth-of-type(3n+2) {
    animation-duration: 12sec;
}

.petal span:nth-of-type(4n+2) {
    animation-duration: 9sec;
}

.petal span:nth-of-type(5n+2) {
    width: 12px;
    height: 12px;
    box-shadow: 1.5px 1.5px 8px #fc7bd1;
}

.petal span:nth-of-type(4n+3) {
    width: 10px;
    height: 10px;
    box-shadow: 1px 1px 6px #fc7bd1;
}
.petal span:nth-of-type(n)    { height:23px; width:30px; }

.petal span:nth-of-type(2n+1)    { height:11px; width:16px; }

.petal span:nth-of-type(3n+2)  { height:17px; width:23px; }

@-webkit-keyframes fallingSakura1 {
    0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotateX(0deg);
        opacity: 1;
    }  
    
    100% {
        -webkit-transform:
            translate3d(400px,1200px,0px)
            rotateX(-290deg);
        opacity: 0.3;
    }
}

@-webkit-keyframes fallingSakura2 {
    0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotateX(-20deg);
    opacity: 1;
    }  
    
    100% {
        -webkit-transform:
            translate3d(200px,1200px,0px)
            rotateX(-70deg);
            opacity: 0.2;
    }
}

@-webkit-keyframes fallingSakura3 {
    0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotateX(90deg);
    opacity: 1;
    }
    
    100% {
        -webkit-transform:
            translate3d(500px,1200px,0px)
            rotateX(290deg);
        opacity: 0;
    }
}

 */