body{
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: gold;
}
 
h1{
    font-size: 16px;
}
@media screen and (min-width: 768px){
    h1{
        font-size: 16px;
    }
}

h2{
    font-size: 13px;
    cursor: pointer;
}
h2:hover{
    background-color:burlywood;
    color: blueviolet;
}
@media screen and (min-width: 768px){
    h2{
        font-size: 13px;
    }
}
p{
    font-size: 12px;
    line-height: 20px;
}
@media screen and (min-width: 768px){
    p{
        font-size: 14px;
    }
}
.text-style{
    color: grey;
}
.maint-content{
   background-color: white;
 width: 80%;
 height: 100%;
 margin: auto;
 border: solid;
 border-radius: 10px;
 padding: 15px;
 box-shadow: 10px 5px 5px black;

}
@media screen and (min-width: 768px){
   .maint-content{
    margin-top: 55px;
   height: 400px; 
 width: 23%;
   } 
}

.images-box{
    margin: auto;
   width: 100%;
   height: 100%;
    border-radius: 5px;
}
@media screen and (min-width: 768px){
    .images-box{
    margin: auto;
   height: 60%;
    border-radius: 5px;
}
}

.header-box{
    padding: 5px;
    background-color:gold;
    border-radius: 5px;
    width: 120px;
    text-align: center;
}

.avatar-container{
display: flex;
align-items: center;
padding-left: 5px;
gap: 20px;
width: 150px;
height: 30px;

}
.avatar-container:hover{
    background-color: bisque;
cursor: pointer;
}

.avatar-size{
width: 25px;
}

.avatar-size:hover{
background-color:goldenrod;
cursor: pointer;
}