*{
    box-sizing: border-box;
} 

h1{
    text-align: center;
    width: 80%;
    margin-left:max(20px,10%);
    margin-right:max(20px,10%);
    
}
/* Max width 80% and minmax predefine*/
main{
    width: 80%;
    min-width: 500px;
    max-width: 1000px;
    margin-left: max(20px,10%);
    margin-right: max(20px,10%);
}

nav{
    position: relative;
    border-top: solid;
    border-color:darkblue;
}

/* The tabs */
nav ul li{
    position : relative;
    text-decoration: none;
    list-style: none;
    float: right;
    background-color: dodgerblue;
    padding: 10px 10px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: -16px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 15px;
}

/* The tabs on hover */
nav ul li:hover{
    background-color: orange;
}

/* Menu */
nav ul li ul {
    display: none;
    position:relative;
    margin-top: 0.7em;
}

/* Elements of the tabs*/
nav ul li a{
    position:relative;
    text-decoration: none;
}

/* Menu on hover*/
nav ul li:hover ul{
    display: block;
    position: absolute;
    margin-left: -0.6em;
    background-color: dodgerblue;
    border-radius: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 2px;
}

/* The list inside the menu*/
nav ul li ul li{
    position: relative;
    margin-left: -2.5em;
    margin-top: 0.7px;
    width: 120px;
}

/* Hover on the link */
nav ul li ul li:hover a{
    background-color:orange;
}

p{
    padding:2px;
    margin:10px;
}
h2{
    margin-top: 40px;
    margin-bottom: 10px;
}

/* The rules for the gallery of images*/

/* Rule for the div that contains the gallery of images*/
#imgg{
    display: grid;
    overflow: auto;
    grid-template-columns: auto auto auto;
}

/* Specific rule for the img tag*/
img{
    margin:5%;
    width:200px;
    height:100px;
}

/* Rules for special form for the img*/
#mountain1{
    clip-path: circle(50px);
}
#mountain2{
    clip-path: ellipse(130px 140px at 10% 20%);
}
#mountain3{
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#mountain4{
    clip-path: inset(10px);
}
#mountain5{
    clip-path: circle(25% at 25% 25%)
}
#mountain6{
    clip-path: ellipse(130px 14px at 10% 20%);
}

/* Media queries */
@media all and (min-width: 50px) and (max-width: 600px){
    /* Rule for the div that contains the gallery of images*/
    #outer{
        display: grid;
        grid-template-columns: auto auto;
    }
    h1{
        width: 500px;
    }
}