*, *::before, *::after{
        margin:0;
        box-sizing: 0;


}

html{
    font-size: 62.5%;

}

body{
    max-width:100vw;
    min-height:100vh;
    margin:0;
}




/* Navigation layout */

@media (min-width:250px) and (max-width:450px) {

    main{
        width:100%;
        height:auto;
        overflow: hidden;

}

    .nav_container {
        width: 200px;
        height: 100vh;
        background-color: green;
        box-sizing:border-box;

}

    .view_page{
        width:100%;
        min-height:100vh;
}


    
}




@media (min-width:450px) and (max-width: 2000px){
    main{
        display:grid;
        width:100%;
        grid-gap:0.2rem;
        grid-template-columns: 1fr 4fr;
        box-sizing: border-box;
        overflow:hidden;

    }

    .nav_container {
        width:100%;
        min-width:200px;
        height:100vh;
        background-color:pink;
        box-sizing:border-box;
        position:relative;
        cursor:pointer; 

}

    .view_page{
        width: 100%;
        height: 100vh;
        background-color:lightblue;
        box-sizing:border-box;
        overflow:auto;
        background-color:rgb(1, 1, 15);

}

}


/* View page layout */