*{
    box-sizing: border-box;
}

body{
    background-color: #c8edfa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header{
    background-color: #4cc9f0;
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 7px;
}

header img{
    width: 90px;
    height: 85px;
    padding: 5px;
}

main img{
    width: 650px;
display: block;
margin: 0 auto;
border-radius: 7px;
box-shadow: 0 4px 8px rgb(85, 118, 133);
}

main .nav2{
    text-align: center;

}

.nav2 a{
    box-shadow: 0 4px 8px rgb(85, 118, 133);
}

.box1{
    width: 450px;
    height: 250px;
    background-color: #97e5fd;
    padding: 8px;
    border-radius: 7px;
    font-size: 20px;
    box-shadow: 0 4px 8px rgb(85, 118, 133);
}

.box2{
    width: 450px;
    height: 250px;
    background-color: #97e5fd;
    padding: 8px;
    border-radius: 7px;
    font-size: 20px;
    box-shadow: 0 4px 8px rgb(85, 118, 133);
}

.boxovi{
    display: flex;
    gap: 10px;
  justify-content: center;
}

footer{
    background-color: #4cc9f0;
    text-align: center;
    padding: 20px;
}

.nav a{
    background-color: rgb(82, 72, 173);
    padding: 6px;
    border-radius: 7px;
    gap: 6px;
    text-decoration: none;
    color: #b1e9fa;
}

.nav2 a{
    background-color: rgb(82, 72, 173);
    padding: 6px;
    border-radius: 7px;
    gap: 6px;
    text-decoration: none;
    color: #b1e9fa;
}

.nav a:hover{
    background-color: #c8edfa;
    color:rgb(82, 72, 173) ;
}

.nav2 a:hover{
    background-color: #c8edfa;
    color:rgb(82, 72, 173) ;
}

main h1{
text-align: center;
}

html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}