

.page-wrapper{
    display:flex;
    flex-direction:column;
    align-items: center;

    background-color: beige;
}

.title-frame{
    display: inline;
    align-items: center;

    width: 500px;
    max-width: 95%;
    height: 200px;
    margin:5%;
    
    background-color: cadetblue;
}

.title-frame img{
    width: 100%;
    height: 100%;
}

.main-frame{
    padding: 10px;

    display:flex;
    flex-direction:column;

    max-width: 950px;
    width:90%;
    align-self: center;


    background-color:lightpink;
}

.nav-frame{
    display: inline-block;
    align-items: start;

    max-width:100%;
    height: max-content;

    background-color: greenyellow;
}

.nav-frame img{
    object-fit: contain;

    max-width:200px;
    max-height: 70px;
}

.main-content-frame{
    padding: 10px;

    display:flex;
    flex-direction:row;

    border: rgb(77, 191, 206) 4px groove;
    border-radius: 4px;

    background-color: blue;
}

.left-side-content{
    align-items: center;
    display:flex;
    flex-direction:column;

    

    background-color: deepskyblue;
}

.left-side-content img{
    overflow: hidden;
    object-fit: contain;
    padding: 5px;
    width: 95%;
    height: 95%;    

}


.right-side-content{
    display:flex;
    flex-direction:column;
    align-items: start;
    justify-content: start;
    

    background-color: mediumorchid;
}

.right-side-content img{
    overflow: hidden;
    object-fit: contain;

    max-width: 250px;
    padding: 5px;
}

@media (max-width:801px){


    .main-content-frame{

    display:flex;
    flex-direction:column;

    }

    .right-side-content{
        display:flex;
        flex-direction:row;

        justify-content: space-evenly;
    }

}