@font-face {
src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
font-family: Montserrat;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
overflow-x: hidden;
overflow-y: hidden;
}



/***  KEYFRAMES  ***/

/* pageAppears */
@keyframes pageAppears {
0% {opacity: 0;}
100% {opacity: 1;}
}

/* general brightness */
@keyframes changingBrightness {
0% { filter: brightness(0.9);}
40% { filter: brightness(1.1);}
80% { filter: brightness(1);}
100% { filter: brightness(0.85);}
}

/* moveSideToSideSmallClouds */
@keyframes moveCloudsSideToSide {
0% {transform: translateX(-20%);}
100% {transform: translateX(0%);}
}

/* cloud opacity */
@keyframes cloudOpacity {
/* day */
0% {opacity: 1;}
20% {opacity: 1;}
/* night */
60% {opacity: 0.6;}
80% {opacity: 0.3;}
100% {opacity: 1;}
}
    
/* changingSkyColor */
@keyframes changingSkyColor {
/* day */
0% { background-color: #F7BBAE;}
10% { background-color: #679aca;}
40% { background-color: #679aca;}
50% { background-color: #253C51;}
/* night */
70% { background-color: #192837;}
95% { background-color: #253C51;}
100% { background-color: #F7BBAE;}
}


@keyframes movingCelestialBody {

/*** sun */
/* sun goes up [0% 25%] */
0% {opacity: 0.3;}
5% {transform:
translateX(10vw)
translateY(-10vh);
background-color: #F7ED77;
filter: drop-shadow(0px 0px 1px #F7ED77);
opacity: 1;
}	
25% {transform:
translateX(45vw)
translateY(-50vh);
filter: drop-shadow(0px 0px 150px #F7ED77);
}
/* sun goes down [26% 50%] */
40% {
background-color: #f7d577;
}	
45% {
opacity: 1;
background-color: #f7b777;
}
50% {transform:
translateX(100vw)
translateY(-0vh);
opacity: 0;
}

/*** moon */
/* moon goes up */
52% {transform:
translateX(0vw)
translateY(-10vh);
opacity: 0;
}
55% {
opacity: 1;
background-color: #FFFFFF;
filter: drop-shadow(0px 0px 1px #FFFFFF);
}	
75% {transform:
translateX(45vw)
translateY(-50vh);
filter: drop-shadow(0px 0px 150px #FFFFFF);
}
/* moon goes down */
98% {
opacity: 1;
background-color: #FFFFFF;
}	
100% {transform:
translateX(100vw)
translateY(-0vh);
opacity: 0;
}
}

/* changing buildings img src */
@keyframes lightingBuilding_1 {
    0% {content: url("ressources/images/buildings/building_1_day.png");}
    100% {content: url("ressources/images/buildings/building_1_night.png");}
}

@keyframes lightingBuilding_2 {
    0% {content: url("ressources/images/buildings/building_2_day.png");}
    100% {content: url("ressources/images/buildings/building_2_night.png");}
}

@keyframes lightingBuilding_3 {
    0% {content: url("ressources/images/buildings/building_3_day.png");}
    100% {content: url("ressources/images/buildings/building_3_night.png");}
}

/* Trees Swinging */
@keyframes treeSwing {
20% {transform: rotate(10deg);}	
40% { transform: rotate(-7deg); }
60% { transform: rotate(5deg); }	
80% { transform: rotate(-5deg); }	
100% { transform: rotate(0deg); }
}

/* trees brightness */
@keyframes treeBrightness {
10% { filter: brightness(1.1);}
20% { filter: brightness(1.3);}
60% { filter: brightness(1.3);}
80% { filter: brightness(0.90);}
100% { filter: brightness(0.85);}
}


/***  CSS  ***/

#main {
    height: 100vh;
    animation: pageAppears 0.5s ease-in, changingBrightness 60s infinite alternate;
}
    
    #game-window {
        height: 100%;
        background-color: #FFFFFF;
    }

        a {
            text-decoration: none;
            color: #000000;
        }
    
        #skip-button {
            background-color: #FFFFFF;
            color: #241919;
            border: 1px solid #241919;
            border-radius: 10px;
            position: absolute;
            right: 1%;
            top: 1%;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            padding: 1%;
            z-index: 6;
        }
        
            #skip-button:hover {
                color: #ffffff;
                background-color: #241919;
            }
/***  sky  ***/

    #sky {
        height: 90%;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        animation: changingSkyColor 120s linear infinite;
    }

        #celestial-body {
            width: 250px;
            height: 250px;
            position:fixed;
            left: 1%;
            bottom: 20%;
            border-radius: 50%;
            animation: linear movingCelestialBody infinite 120s;
            z-index: 1;
        }

        #clouds {
            width: 100%;
            height: 60%;
            z-index: 3;
            display: flex;
        }

        .big-cloud-div-1 {
            height: 100%;
            width: 25%;
            display: flex;
            padding-top: 30px;
        }

        .big-cloud-div-2 {
            height: 100%;
            width: 25%;
            padding-top: 30px;
            display: flex;
        }

            .big-cloud {
                width: 80%;
                height: 20%;
                display: flex;
                filter: drop-shadow(0px 0px 10px #EAEAEA);
                animation: moveCloudsSideToSide 15s linear alternate infinite, cloudOpacity 90s linear infinite;
            }


        #small-cloud-div-1 {
            height: 100%;
            width: 15%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            padding-top: 100px;
        }

        #small-cloud-div-2 {
            height: 100%;
            width: 15%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding-bottom: 100px;
        }

        #small-cloud-div-3 {
            height: 100%;
            width: 15%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 140px;
        }

        #small-cloud-div-4 {
            height: 100%;
            width: 15%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 100px;
        }

            .small-cloud {
                width: 80%;
                display: flex;
                filter: drop-shadow(0px 0px 5px #EAEAEA);
                animation: moveCloudsSideToSide 7s alternate linear infinite, cloudOpacity 90s linear infinite;
            }


/***  ground  ***/

        #mountain {
            width: 100%;
            height: 60%;
            bottom: 10%;
            position: fixed;
            display: flex;
            justify-content: center;
            z-index: 2;
        }
            #mountain-image {
                width: auto;
                filter: blur(0.7px);
            }

        #buildings {
            position: absolute;
            width: 100%;
            height: 80%;
            bottom: 10%;
            z-index: 4;
        }

            .building {
                position:absolute;
                width: 100%;
                height: 100%;
                left: 0px;
            }
            
                #building-3 {
                    animation: lightingBuilding_3 120s linear infinite;
                }
                
                #building-2 {
                    animation: lightingBuilding_2 120s linear infinite;
                }

                #building-1 {
                    animation: lightingBuilding_1 120s linear infinite;
                }

        #trees {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: flex-start;
            padding-left: 10%;
            gap: 34%;
            z-index: 5;
        }

            #two-trees-together-div {
                height: 100%;
                width: 30%;
                display: flex;
                justify-content: space-evenly;
                position: relative;
            }

            #one-tree-alone-div {
                position: relative;
                height: 100%;
            }

                .tree {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                }

                    .leafs {
                        height: 65%;
                        transform-origin: bottom center;
                    }
                    
                    .trunk {
                        width: 35%;
                        height: 50%;
                    }

            #tree-one {
                height: 100%;
            }
                #leafs-one {
                    width: 100%;
                    animation: treeSwing 8s ease-out infinite, treeBrightness 120s infinite;
                }

            #tree-two {
                height: 100%;

            }
                #leafs-two {
                    width: 100%;
                    animation: treeSwing 10s ease-in-out infinite, treeBrightness 120s infinite;
                }

            #tree-three {
                height: 100%;
                width: 100%;
            }
                #leafs-three {
                    width: 100%;
                    animation: treeSwing 9s ease infinite, treeBrightness 120s infinite;
                }
                    

#ground {
    height: 10%;
    width: 100%;
    display: flex;
    z-index: 6;
    justify-content: space-between;
    background: linear-gradient(#e1e1e1, #ffffff);
}



/* ======================= */
/***  MEDIA QUERIES  ***/

@media screen and (max-width: 786px){

#skip-button {
    right: auto;
    left: 1%;
    padding: 4%;
    font-size: 12px;   
}

#two-trees-together-div {
    width: 50%;
}

#one-tree-alone-div {
    width: 20%;
}


}