index.css

header{
    background-color: rgb(64, 196, 163);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    height: 30vh;
}
nav{
    background-color: black;
    height: 7vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    
}

nav a{
    padding:10px 10px;
    text-decoration: none;
    color: white;
}
nav a:hover{
    
    background-color: white;
    color: black;
    text-align: center;
       
}
section{
    display: flex;
    flex-direction: row;
    height:fit-content; 
    flex-wrap: wrap;
}
.image{
    width:100%;
    height: 40vh;
    background-color: gray;
}
.small-image{
    width:100%;
    height: 10vh;
    background-color: gray;

}
.about{
    padding: 5px;
    width: 30%;
    background-color: rgb(231, 230, 230);

}
.content{
    padding: 5px;
    width: 67%;
    background-color: white;

}
footer{
    margin-top: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13vh;
    background-color: rgb(187, 184, 184);
}
@media screen and (max-width: 700px){
    section,nav{
        flex-direction: column;
        height: fit-content;
    }
    
    nav a:hover{
        width: 100%;
        background-color: white;
        color: black;
        text-align: center;
        height: fit-content;
    }
    
    .about,.content{
        width: auto;
    }
}