html{
  word-wrap: break-word;
}

body{
    background-color: #202B26;
}

.header{
  margin: auto;
  margin-top: 10px;
  padding: 20px;
  text-align: center;
  background-color: #27402D;
  border-radius: 25px;
  width: 35%;
  animation: slide-in 2s ease;
}


img{
  
}


.box{
  margin: auto;
  padding: 20px;
  margin-top: 20px;
  text-align: left;
  background-color: #27402D;
  border-radius: 20px;
  width: 35%;
  animation: slide-in 2s ease;
}



.update_box{
  margin: auto;
  padding: 20px;
  margin-top: 20px;
  text-align: left;
  background-color: #27402D;
  border-radius: 15px;
  width: 30%;
  animation: slide-in 2s ease;
}

.footer{
  margin: auto;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  background-color: #27402D;
  border-radius: 25px;
  width: 35%;
  margin-bottom: 10px;
  animation: slide-in 2s ease;
  transition: transform .2s ease;
}

.footer:hover{
  transform:scale(1.03)
}

@keyframes slide-in {
	0% {
		transform: translateY(-20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}


@media (max-width: 600px) {
    .header, .footer, .box, .update_box {
        width: 90%; /* Makes elements wider on small screens */
        padding: 15px; /* Adjust padding */
    }

    .header img, .box img, .footer img, .update_box img {
        width: 30%; /* Adjust image size */
    }

    h1, h2, p {
        font-size: 1.2em; /* Scale font size for better readability */
    }
}


#loader{
    border: 15px solid#5EFFB4;
    /* box-shadow: 0 0 8px aquamarine, 0 0 8px aquamarine inset; */
    box-shadow:0 0 10px #B0FF66, 0 0 10px #B0FF66 inset;
    border-radius: 0%;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    animation: spinning 2s linear infinite;
}

@keyframes spinning{
    0%{
        transform:rotate(0deg);
    }
    50%{
    }
    100%{
        transform:rotate(360deg);
    }
}

#mainDiv {
  display: none;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  color: white;
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}






/*NAV BAR STUFF BELOW*/
/*NAV BAR STUFF BELOW*/
/*NAV BAR STUFF BELOW*/


ul {
  list-style-type: none;
  margin: auto;
  width: 35%;
  background-color: #315C3E;
  padding: 10px;
  transition: transform .2s ease;

}

ul:hover{
  transform:scale(1.03)
}

li {
  display: inline;
}

a{
  margin: auto;
  color: bisque;
  text-decoration: none;
}

a:hover{
  color: #33BF69;
}
a:active{
  color: black;
}

/*NAV BAR STUFF ABOVE*/
/*NAV BAR STUFF ABOVE*/
/*NAV BAR STUFF ABOVE*/