:root {
    --broken-white:#e9e9e9;
    --white:#fff;
    --gray:#777;
    --dark-gray:#333;
    --black:#000;

    --berrypurple:rgb(97, 25, 91);
    --froggreen:rgb(13, 80, 35);
    --orangejuice:rgb(241, 137, 38);

    --grass:rgb(50, 151, 19);
    --moon:rgb(168, 168, 168);
    --sun:rgb(255, 238, 0);

    --timer-amount:5s;
    --day-time-amount:5s;
}

@keyframes dayandnight-grass {
    0% {
        filter:brightness(1);
    }
    30% {
        filter:brightness(1);
    }
    70% {
        filter:brightness(0.25);
    }
    100% {
        filter:brightness(0.25);
    }
}

@keyframes dayandnight-planetrotation {
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(0deg);
    }
    70% {
        transform:rotate(-180deg);
    }
    100% {
        transform:rotate(-180deg);
    }
}

@keyframes dayandnight-background {
    0% {
        background-position:0% 0%;
    }
    30% {
        background-position:0% 0%;
    }
    70% {
        background-position:0% 100%;
    }
    100% {
        background-position:0% 100%;
    }
}

@keyframes turn {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


@keyframes clock {
    0% {
        border-color:green;
    }
    50% {
        border-color:yellow;  
    }
    80% {
        transform:translateY(0px);
    }
    81% {
        transform:translateY(20px);
        border-color:darkred;
    }
    82% {
        transform:translateY(0px);
        border-color:red;
    }
    83% {
        transform:translateY(20px);
        border-color:darkred;
    }
    84% {
        transform:translateY(0px);
        border-color:red;
    }
    85% {
        transform:translateY(20px);
        border-color:darkred;
    }
    86% {
        transform:translateY(0px);
        border-color:red;
    }
    87% {
        transform:translateY(20px);
        border-color:darkred;
    }
    88% {
        transform:translateY(0px);
        border-color:red;
    }
    89% {
        transform:translateY(20px);
        border-color:darkred;
    }
    90% {
        border-color:red;     
        transform:translateY(0px);
    }
    91% {
        transform:translateY(20px);
        border-color:darkred;
    }
    92% {
        transform:translateY(0px);
        border-color:red;
    }
    93% {
        transform:translateY(20px);
        border-color:darkred;
    }
    94% {
        transform:translateY(0px);
        border-color:red;
    }
    95% {
        transform:translateY(20px);
        border-color:darkred;
    }
    96% {
        transform:translateY(0px);
        border-color:red;
    }
    97% {
        transform:translateY(20px);
        border-color:darkred;
    }
    98% {
        transform:translateY(0px);
        border-color:red;
    }
    99% {
        transform:translateY(20px);
        border-color:darkred;
    }
    100% {
        transform:translateY(0px);
        border-color:red;
    }
}

*                                           { margin:0px;padding:0px;user-select:none;outline:none; }

body                                        { display:grid;grid-template-columns:1fr;grid-template-areas:"header" "main";font-family:Arial,Helvetica,sans-serif;font-size:20px;background-color:var(--broken-white);min-height:100vh; }

header                                      { grid-area:header;display:flex;justify-content:center;align-items:center;height:100px;background-color:var(--white); }
h1                                          { color:var(--black);text-align:center;font-size:2em; }


main                                        { grid-area:main;display:grid;grid-template-columns:1fr 1fr; }
section                                     { position:relative;padding-bottom:100%; }
article                                     { position:absolute;left:0;top:0;bottom:0;right:0; }

section#blocks>article                      { display:grid;grid-template-columns:repeat(20,1fr);overflow:hidden; }
section#blocks>article>div                  { position:relative;padding-bottom:100%;overflow:hidden; }
section#blocks>article>div>div              { position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:var(--black);transform:scale(0);transition:transform cubic-bezier(0,0,0,300) 300ms; }
section#blocks>article>div:hover>div        { transform:scale(1); }
section#blocks>article>div:nth-child(3n + 1)>div      { background-color:var(--orangejuice); }
section#blocks>article>div:nth-child(4n + 2)>div      { background-color:var(--froggreen); }
section#blocks>article>div:nth-child(5n + 3)>div      { background-color:var(--berrypurple); }

section#clock>article                       { display:flex;justify-content:center;align-items:center;background-color:var(--dark-gray); }
section#clock .display                      { transform-origin:center center;transform-origin:center bottom;animation-timing-function:linear;animation-duration:var(--timer-amount);position:relative;width:50%;padding-bottom:50%;border:40px solid var(--black);background-color:var(--white);border-radius:50%; }
section#clock .line                         { transform-origin:center bottom;animation-timing-function:linear;animation-duration:var(--timer-amount);position:absolute;left:calc(50% - 5px);width:10px;height:40%;top:10%;background-color:var(--black);z-index:1; }
section#clock .centerdot                    { position:absolute;left:calc(50% - 20px);border-radius:50%;top:calc(50% - 20px);width:40px;height:40px;background-color:var(--black);z-index:2; }
section#clock:hover .line                   { animation-name:turn; }
section#clock:hover .display                { animation-name:clock; }

section#textclipping>article                { display:flex;background-color:var(--white);justify-content:center;align-items:center;background-color:var(--white);text-transform:uppercase; }
section#textclipping>article h2             { color:transparent;background-clip:text;-webkit-background-clip:text;font-family:"Modak";text-transform:uppercase;text-align:center;font-size:10em;font-weight:400;background-image:url("../images/flowers.jpg");filter:grayscale(1);background-position:center center;background-size:1000px 265px;transition:all linear 300ms; }
section#textclipping>article:hover h2       { filter:grayscale(0);background-size:calc(1000px * 1.1) calc(265px * 1.1); }

section#fullday>article                     { animation-name:dayandnight-background;animation-timing-function:linear;animation-play-state:paused;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:var(--day-time-amount);background:linear-gradient(0deg,#000,#1b0c6e,#2500f6,#8f411a,#eaba12 60%,#82c8d3,#c5fffc);background-size:400% 400%;overflow:hidden; }
section#fullday>article .grass              { animation-name:dayandnight-grass;animation-timing-function:linear;animation-play-state:paused;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:var(--day-time-amount);position:absolute;top:80%;border-radius:50%;left:calc(50% - 1000px);width:2000px;height:2000px;background-color:var(--grass);z-index:2; }
section#fullday>article .planets            { animation-name:dayandnight-planetrotation;animation-timing-function:linear;animation-play-state:paused;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:var(--day-time-amount);position:absolute;left:0px;top:0px;height:200%;width:100%;transform-origin:center center;z-index:1; }
section#fullday>article .planets .sun       { position:absolute;right:50px;top:50px;border-radius:50%;width:250px;height:250px;background-color:var(--sun);box-shadow:0px 0px 200px 0px #fffa00,0px 0px 50px 0px #ff9b00; }
section#fullday>article .planets .moon      { position:absolute;left:125px;bottom:125px;border-radius:50%;width:150px;height:150px;background-color:var(--moon);box-shadow:0px 0px 100px 0px #ffffff,0px 0px 15px 0px #868686; } 
section#fullday>article:hover               { animation-play-state:running; }
section#fullday>article:hover .planets      { animation-play-state:running; }
section#fullday>article:hover .grass        { animation-play-state:running; }