@media (max-width: 600px) {
     nav {
         display: none;
     }
 }
 
 body {
    background-image: url(../media/cloud.webp);
    background-size: cover;
    background-repeat: no-repeat;
 }
 
 
 #myVideo {
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 100%;
     min-height: 100%;
     
 }


 h1 {
     text-align: center;
    font-weight: bold;
     font-size: 40px;
 font-family: 'Bodoni Moda', serif;
 margin-top: 20px;
 }

 h2 {
     font-size: 60px;
 }

 h3 {
     font-weight: normal;
     font-size: 20px;
 }

 button {
     display: block;
     margin-top: -30px;
     margin-left: 260px;
     border: transparent;
     padding-bottom: 5px;
     cursor: pointer;
     box-shadow: 2px 2px 5px rgb(181, 136, 192);
    background-color: transparent;
     

 }


 
 button:hover {
     color: lavender;
 }

 #search-input {
    background-color: rgb(239, 230, 243);
   border: transparent;
   
 }

 #search {
background-color: rgb(173, 141, 173);
border:transparent;
 }

 #search:hover {
    color: lavender;
 }

 .currently {
     font-size: 20px;
     font-style: oblique;
 }


     

 .container {
     max-width: 750px;
     margin-top: 80px;

    
 }

 .card-1 {
    border: solid rgb(245, 196, 235);
     border-width: 10px;
     background-color: transparent;
    backdrop-filter: blur(70px); 
    box-shadow: 2px 2px 4px transparent;
   

 }

 .card-2 {
     max-width: 400px;
     
     display: block;
     margin: 0 auto;
     margin-top: 10px;
    background-color: transparent;
    backdrop-filter: blur(70px);
    border: solid rgb(245, 196, 235); 
   
     
 }

 .forecast-icon {
     display: block;
     margin: 0 auto;
     width: 80px;
 }

 hr {
     max-width: 80%;

     border-color: rgb(197, 122, 218);
     border-width: 5px;

 }

 .week {
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
 }

 .weekdays {
     margin-top: 30px;
     margin-bottom: 40px;
     
   
 }

 .emoji {
    font-size: 40px;;
 }

 .description {
    font-weight: 400;
    
    margin-top: 20px;

    
 }

 .humidity {
     margin-bottom: 20px;
 }

 .weather {
     margin-top: 10px;
 }

 .forecast-week {
     border: solid rgb(212, 169, 224);
     padding-bottom: 20px;
     background-color: transparent;
     backdrop-filter: blur(70px);

 }


 .codedBy {
    
    text-align: center;
    color: black;
 
 }

 .card-3 {
    max-width: 400px;
     margin: 0 auto;
     float: none;
     margin-bottom: 10px;
background-color: transparent;
    backdrop-filter: blur(70px);
    border: transparent;
            
 }

 .active {
    color: black;
    cursor: default;
    text-decoration: none;
 }

 .active:hover {
    text-decoration: none;
    color:black;
 }

 a {
   text-decoration: none;
 }