h1{
    color: blue;
    font-family: oi, sans-serif;
}

.oi {
    font-family: Oi, serif;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #d6ffffad;
    color: #333333;
}

.image {
    display: block;
    background-color: #0f3460;
    padding: 5px;
    border-radius: 10px;
    position:relative;
    
    max-width: 80%;
    max-height: 50vw;
   
    
    margin-left: auto;
    margin-right: auto;
    
}

#cards{
display: flex; 
transition: box-shadow 0.3 ease;
}



.card-image{
    height: 300px;
    width: 31vw;
    margin: 1vw;
    transition: box-shadow 0.3 ease;
}
.card-image:hover{
    box-shadow: 0 10px 20px #000000ff;
}

header {
    background-color: #1D1D54;
    padding: 1px 40px;
    border-radius: 20px;
    text-align: center;
    
    h1 {
    color: #c5d2ff;
    font-size: 50px;}
}



nav { 
    ul{list-style-type: none;
    margin: 0;
    padding: 5px 10px;
    overflow:hidden;
    border-radius: 5px;
    background-color: #1d1d54}
   
    li{float:left;}
   
    li a{display: block;
    color: #c5d2ff;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding:4px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;}
   
    li a:hover {color: #0404c2;
    background-color: #ffffff58;
    transition: color 0.4s ease, background-color 0.4s ease;}
}
 


 
#gradient{background: linear-gradient(#d6ffffad 50%, #c5d2ff 90%)}