body{
    background-color: #7393B3;
    margin: 50px;
}

div{
    transform: scale(0.6);
}

.sun{
    height: 500px;
    width: 500px;
    background-color: #FFEA00;  
    border: 2px solid 	#FDDA0D;    
    border-radius: 100%;
    box-shadow: 0px 0px 150px 10px yellow;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    animation: sunanim ease-in-out 5s infinite;
    
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 50px;
}

.container2{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    gap: 50px;

    background-color: 	#1B1212;
    color: #E1C16E;
    font-size: 30px;
    border: 3px solid #E2CA76;
    border-radius: 50px;
    box-shadow: 0px 0px 30px 0px;

    animation: boxanim ease-in-out 5s infinite;
}

.sections{
    height: 600px;
    width: 400px;
    background-color: 	#1B1212;
    color: #E1C16E;
    font-size: 30px;
    border: 3px solid #E2CA76;
    border-radius: 50px;
    box-shadow: 0px 0px 30px 0px;

    cursor: pointer;
    animation: boxanim2 ease-in-out 5s infinite;
}

.climcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 500px;
}

.day{
    height: 1200px;
    width: 700px;
    background-color: #1B1212;
    border: 3px solid #E2CA76;
    border-radius: 50px;
    box-shadow: 0px 0px 30px 0px;
    font-size: 30px;

    cursor: pointer;

    animation: boxanim ease-in-out 5s infinite;

}

.night{
    height: 1200px;
    width: 700px;
    background-color: #1B1212;
    border: 3px solid #E2CA76;
    border-radius: 50px;
    box-shadow: 0px 0px 30px 0px;
    font-size: 30px;

    cursor: pointer;

    animation: boxanim ease-in-out 5s infinite;

}

.sunmoonclim{
    height: 850px;
    width: 850px;
    background-color: #FFEA00;  
    border: 2px solid 	#FDDA0D;    
    border-radius: 100%;
    box-shadow: 0px 0px 150px 10px yellow;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;


}

.climcontainer:has(.night:hover) .sunmoonclim{
    background-color: #C0C0C0;
    border: white solid 2px;
    box-shadow: 0px 0px 150px 10px #C0C0C0;
}

.daytime{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;
}

.animals{
    height: 400px;
    width: 600px;
    background-color: #6E260E	;
    border: 3px solid 	#CD7F32;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px #6E260E	;
    padding: 30px;
    font-size: 30px;
    cursor: pointer;

    animation: boxanim ease-in-out 5s infinite;
}

a,
a:visited,
a:hover,
a:active{
    color: inherit;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.vegetation{
    height: 400px;
    width: 600px;
    background-color: 	#454B1B;
    border: 3px solid 	#097969;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px 	#454B1B;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    
    background-image: url('/Vegetation.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.location{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    
    background-image: url('/DesertLocation.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.generalfeatures{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    background-image: url('/GeneralFeatures.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.biomechallenges{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    
    background-image: url('/DesertChallenge.png');
    background-repeat: no-repeat;
    background-size: cover;
}


.camels{height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    margin: 50px;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    background-image: url('/Camel.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.fennecfoxes{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    margin: 50px;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    background-image: url('/FennecFox.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.rattlesnakes{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    margin: 50px;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    background-image: url('/Rattlesnake.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.scorpions{
    height: 400px;
    width: 600px;
    background-color: #E2CA76;
    border: 3px solid yellow;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 0px yellow;
    margin: 50px;
    padding: 30px;
    font-size: 30px;

    animation: boxanim ease-in-out 5s infinite;

    background-image: url('/Scorpion.png');
    background-repeat: no-repeat;
    background-size: cover;
}



.sunday{
    height: 500px;
    width: 500px;
    background-color: #FFEA00;  
    border: 2px solid 	#FDDA0D;    
    border-radius: 100%;
    box-shadow: 0px 0px 150px 10px yellow;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    animation: sunanim ease-in-out 5s infinite;
}



@keyframes sunanim {
    0% {box-shadow: 0px 0px 150px 10px yellow;}
    50% {box-shadow: 0px 0px 300px 30px yellow;}
    100% {box-shadow: 0px 0px 150px 10px yellow;}
}

@keyframes boxanim {
    0%{transform: scale();
}
    50%{transform: scale(0.7);}

    100%{transform: scale();}
}

@keyframes boxanim2 {
    0%{transform: scale();
}
    50%{transform: scale(0.9);}

    100%{transform: scale();}
}