destination.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kay+Pho+Du:wght@500&display=swap');

body{
    background-image: url('./assets/destination/background-destination-mobile.jpg');
    background-size: cover;
      width: 100vw;
      height: 100vh;
  }

  nav{
    background: hsl( 0 0% 100% / 0.05); 
    backdrop-filter: blur(1.5rem);
    font-family: 'Kay Pho Du', serif;
   
}
#nav1 a{
    display: block;
    margin-top: 5px;
    
}

.image-container {

    display: flex;
    justify-content: center;
    margin-top: 10px;
    
  }

img{
    margin-top: 20px;
    width: 200px;  
}
#MOON,#MARS,#EUROPA,#TITAN{
    margin-left: 7px;
    margin-right: 7px;
}
#nameplanet{
    margin-top: 10px;
    margin-bottom: 10px;
}
#textplanet{
    font-size: 10px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    height: max-content;
    margin-bottom: 4rem;
}
#hr{
    width: 80%;
    margin: 0 auto;
    opacity: 0.4;
}
#Avg,#est{
    margin-top: 25px;
    font-size: 10px;
}
#avgnum,#estday{
    margin-bottom: 30px;
    font-size: x-large;
}

#divv{
    margin-top: 10px;
    width: 100%;
    height: 200px;
}
.para{
    text-align: center;
    font-family: 'Barlow', sans-serif;
    
}
#main{
    font-family: 'Roboto Slab', serif;
}


@media (min-width: 380px) {
    body{
        background-image: url('./assets/destination/background-destination-tablet.jpg');
        background-size: cover;
        width: 100vw;
        height: 100vh;
    }
  
}
@media (min-width: 434px) { 
    body{
        background-image: url('./assets/destination/background-destination-tablet.jpg');
        background-size: cover;
        width: 100vw;
        height: 100vh;
    }
    #Open{
        display: none;
    }
    #Close{
        display: none;
    }
    #nav {
        display: inline-block;
        width: max-content;
        height: max-content;
        margin-top: 18px;
        background: hsl( 0 0% 100% / .1);
        border-radius: 3px;
        

    }

    #nav1 {
        margin-top: 0cm;
        width: max-content;
        height: 65px;
        display: grid;
        grid-auto-flow: column; /* Display the paragraphs in a horizontal line */
        align-items: center;
        float: right;
    
    }
    #nav1 a {
    font-size:13px;
    float: right;
    
    margin-right: 4px;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 8px;

    }
    .para{
        margin-top: 60px;
        margin-left: 40px;
        width: 100%;
        text-align: none;
        display: inline;
        font-size: larger;
        
    }
    .image-container{
        margin-top: 40px;
    }
    #first{
        
        width: 49%;
        
    }
    #second{
        
        width: 49%;
        
        
    }
    #divv{
        display: flex;
        
        width: 100%;
    }  
   
}
 /* hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh */
@media (min-width: 751px) {
        body{
            background-image: url('./assets/destination/background-destination-desktop.jpg');
            background-size: cover;
            width: 100vw;
            height: 100vh;
            
            
        }
        #Open{
            display: none;
        }
        #Close{
            display: none;
        }
        #nav {
            display: inline-block;
            width: 670px;
            height: max-content;
            margin-top: 18px;
            background: hsl( 0 0% 100% / .1);
            border-radius: 3px;

        }

        #nav1 {
            margin-top: 0cm;
            width: max-content;
            height: 65px;
            display: grid;
            grid-auto-flow: column; /* Display the paragraphs in a horizontal line */
            align-items: center; 
        
        }
        #nav1 a {
        font-size:13px;
        display: flex;
        align-items: center;
        padding: 8px;
        margin-left: 30px;
        margin-right: 30px;

        }  
        .para{
            font-size: 20px;
            height: max-content;
            margin-left: 100px;
        }
        .image-container{
            width: 62%;
            margin-left: 67px;
            height: max-content;

        }
        .image-container img{
            width: 100%;
            height: max-content;
        }
        #main{
            width: 50%;
            margin-top: 50px;

        }
        #nisf{
            margin-top: 50px;
            width: 50%;

        }
        #kolchi{
            display: flex;
        }
        #textplanet{
            height: 100px;
            width: 450px;
            display: flex;
            
            font-size: 13px;
            padding-left: 6px;
            text-align: start;
        }
        #kra{
            
            display: inline;

        }
        #kra button{
            margin-left: 20px;
            height: 40px;
            
        }
        #nameplanet{
            font-size: 100px;
            text-align: start;
        }

}