body {
  
  background: url("../assets/tile.png"), linear-gradient(rgb(175, 255, 255), rgb(39, 175, 175));
  background-attachment: fixed;
}


.page-wrapper{
    display:flex;
    flex-direction:column;
    align-items: center;

}

.title-frame{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    

    width: 500px;
    max-width: 95%;
    height: 200px;
    margin:5%;
    
    background-color: cadetblue;
    background: url("../assets/boxhor.jpg");
    background-size:100% 100%;
}

#color-content span{
    display:inline-block;
    animation: wave 0.4s  ;
}

@keyframes wave{
    0%{
        transform:translateY(0px);
    } 33% {
        transform: translateY(-10px);
    } 66% {
        transform: translateY(0px);
    } 100% {
        transform: translateY(10px);
    }
}

.main-frame{
    padding: 10px;

    display:flex;
    flex-direction:column;

    max-width: 1200px;
    width:92%;
    align-self: center;


}

.nav-frame{
    display: inline;
    


    max-width:100%;
    height: max-content;

}

.nav-button{
    
    vertical-align: middle;

    text-decoration: none;
    cursor: pointer;
    margin-right:5px;
    margin-bottom: 5px;;

    font-size: 18px;
    font-weight:bolder;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:azure;
    
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

    text-align: center;

    height:75px;
    width:150px;
    max-width:180px;
    max-height: 70px;

    border:#3842ce 10px ridge;
    border-radius: 4px;


    background-color:cornflowerblue ;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.nav-button:hover {
  background-color: rgb(56, 115, 224);
  color: rgb(167, 196, 213);
  rotate: var(--angle);
  animation: spin 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}



@keyframes spin{
    from {
        --angle:0deg;
    } to {
        --angle:360deg;
    }
}

.nav-frame img{
    object-fit: contain;

    height:60px;
    max-width:200px;
    max-height: 70px;
}


.main-content-frame{
    

    display:flex;
    flex-direction:row;

    
}

.left-side-content{
    
    display:flex;
    flex-direction:column;
    align-items: center;

    

    border:#3842ce 10px ridge;
    border-radius: 4px;

    background-color:slategrey;
}

.hor-content{
    display: flex;
    flex-direction: column;
    
    overflow-y:auto;
    align-items: center;
    justify-content: start;

   

    margin: 5px;

    width: 95%;
    height:300px;
    max-height: 300px;

    border: purple 4px groove;
    border-radius: 10px;

    background-color: azure;
}

.left-side-content img{
    overflow-x:hidden;
    overflow-y:visible;
    
    object-fit:fill;
    border: 1px solid #333333;
    
    margin:5px;

    width:90%;
    min-height:200px;
}

.left-side-content p {
    margin: 5px;
    margin-left:10px;
    margin-right:10px;
}


.right-side-content{
    display:flex;
    flex-direction:column;
    align-items: start;
    justify-content: start;
    
}

.right-side-content img{
    overflow: hidden;
    object-fit: contain;

    max-width: 250px;
    padding: 5px;
    margin:10px;

    border:#3842ce 10px ridge;
    border-radius: 4px;

    background-color:slategrey;
}

@media (max-width:801px){


    .main-content-frame{

    display:flex;
    flex-direction:column;

    }



    .right-side-content{
        display:flex;
        flex-direction:row;

        justify-content: space-evenly;
    }

}