body{
    background-image:url(./assets/background.jpg);
    background-repeat: repeat;
    font-family: "DynaPuff", serif;
    padding: 0;
    margin: 0;
    
}

#backbutton{
    position: fixed;
    top: 80px;
    text-decoration: none;
    padding: 20px 15px;
    background-color: black;
    color: white;
}

#gototop{
    position: fixed;
    right: 50px;
    bottom: 10px;
    cursor: pointer;
    
}

h1{
    display: flex;
   justify-content: center;
   font-size: 9rem;
   color: rgb(255, 255, 255);    
    background-color: rgba(74, 10, 10, 0.692);
   }

   div>img {
    max-width: 100%;
    height: auto;}

h3{
    font-size: 8rem;
}

p {
    font-size: 4rem;
}



/* Navigation Bar */
nav a {
    display: inline-block;
    text-decoration: none;
    font-size: 4rem;
    color: brown;
    transition: transform 0.1s ease-in-out;

}

nav>a:hover { 
    transform: scale(1.4);

}

.navbar{
    display: flex;
   justify-content: center;
   position: sticky;
   top: 0px;
   overflow: hidden;
   background-color: rgb(255, 255, 255);

   
}


/* Alphabet Containers */
.container {
    display: flex;
    flex-direction: column;
    padding: 0% 5%;
    overflow:hidden;
    justify-content: center;
    
    
}

.box1{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);
    

}
.box1:hover {
    background-color: rgb(255, 0, 0);
}

.box2{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);
    

}
.box2:hover {
    background-color: rgb(255, 111, 0);

}




.box3{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);

}
.box3:hover {
    background-color: rgb(255, 208, 0);

}

.box4{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);

}
.box4:hover {
    background-color: rgb(0, 255, 8);

}


.box5{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);

}
.box5:hover {
    background-color: rgb(47, 0, 255);

}


.box6{
    background-color: rgb(44, 44, 44);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 7px 7px 12px rgba(45, 41, 41, 0.5);
    flex-grow: 20;
    flex-wrap: auto;
    gap: 30%;
    padding: 0% 30%;
    margin: 20px 0px;
    transition: background-color 0.6s ease-in-out;
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.992);

}
.box6:hover {
    background-color: rgb(179, 0, 255);

}