*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}  

body{
    background-color: rgb(34, 28, 102);  
} 


body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-thumb {
    background-color: gray;
}








/*-------------------- HEADING -----------------------*/

.h1{
    /* background-color: rgb(27, 27, 102); */
    background-color: rgba(27, 27, 222, 0.455);
    border: 2px solid black;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 20px;
}

h1{
    color: white;
    text-align: center;
    font-family:'Courier New', Courier, monospace;
}






/* ---------------- NAVIGATION BAR ------------------------------ */

.navcontainer{
    display: flex;
    justify-content: center;
    background-color: hsla(246, 61%, 47%, 0.158);
    border: 2px solid black;
}

.navitem {
    color: white;
    padding: 25px; 
    margin: 20px;
    font-style: oblique;
    font-weight:800;
    font-size: large;
    margin: 2px;
    
}


.navitem:hover{
    transform: scale(1.07);
    background-color: hsl(0, 0%, 10%);
    font-size: 20px;
}

a{
    text-decoration: none;
    color: white;
}

                /* DROPDOWN MENU */


.dropdown{
    display: inline-block;
}
.dropdown button{
    background-color: hsla(246, 59%, 49%, 0);
    color: white;
    border: none;
    cursor: pointer;
    font-style: oblique;
    font-weight:800;
    font-size: large;
    margin: 2px;
}
.dropdown a{
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
}
.dropdown .content{
    display: none;
    position: absolute;
    background-color: hsl(236, 53%, 40%);
    min-width: 100px;
    font-style: oblique;
    box-shadow: 2px 2px 5px hsla(0, 0%, 100%, 0.8);
}
.dropdown:hover .content{
    display: block;
}
.dropdown:hover button{
    background-color: hsl(0, 0%, 10%);
}
.dropdown a:hover{
    background-color: hsl(244, 44%, 49%);
    color: white;
    transition-duration: 0.5s;
}






/* -------------------- BOXES ---------------------- */


.container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.items{
    border: 1px solid black;
    margin-top: 20px;
    box-shadow: 5px 5px 5px white;
    border-radius: 25px;
    transition: all;
}

.items:hover{
    transition: 2s;
    transform: scale(1.03);
}


.item1{
    width: 200px;
    height: 200px;
    margin-left: 50px;
    color: white;
    padding: 10px;
    text-align: center;
}


.item2{
    font-family:Verdana, Geneva, Tahoma, sans-serif; 
    margin: 20px;  
    color: white; 
    padding: 20px; 
    display: flow-root;
    width: 400px;
    height: 370px;
    background-color: hsla(246, 61%, 47%, 0.158);
    display: flow-root;
    margin-right: 40px;
}



.item3{
    display: flow-root;
    border-radius: 20px;
    border: 2px black solid;
}










/* -------------- COPYRIGHT -------------------- */

#copyright{
    font-family:Verdana, Geneva, Tahoma, sans-serif; 
    color: white;
    padding: 10px;
    margin-bottom: 1px;
    text-align: center;
}




/* ------------------- MOBILE VIEWS ------------ */



@media(max-width: 650px){

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .navcontainer{
        display: block;
        text-align: center;
        padding: 10px;
        margin: 2px;
    }

    .para{
        display: flow-root;
    }


    .container{
        display: flex;
        flex-wrap: wrap;
    }

    img{
        width: 300px;
    }


    .item1{
        margin: auto;
    }


    .item2{
        margin: auto;
        margin-top: 50px;
        margin-left: 30px;
        margin-right: 40px; 
        overflow: auto;
        padding: 20px;
    }

    .item3{
        margin:auto;
        margin-top: 25px;
    } 

}





@media(width > 650px) and (width < 1200px){     /* ---------- For IPAD SCREENS ------------------- */

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .navcontainer{
        display: block;
        text-align: center;
        padding: 10px;
        margin: 2px;
    }

    .para{
        display: flow-root;
    }


    .container{
        display: flex;
        flex-wrap: wrap; 
    }

    img{
        width: 300px;
    }


    .item1{
        margin: auto;
    }


    .item2{
        margin: auto;
        margin-top: 50px;
        margin-left: 30px;
        margin-right: 40px; 
        overflow: auto;
        padding: 20px;
    }

    .item3{
        margin:auto;
        margin-top: auto;
    } 

}