/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    /* CSS */

}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

    :root {
        --content-width: 60vw;
    }

}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {

    :root {
        --content-width: 75vw;
    }

}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 320px) and (max-width: 767px) {

    :root {
        --corner-width: 40vw;
        --content-width: 90vw;
        --side-ribon-width: 10vw;
        --h1-font-size: 70px;
    }

}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 560px) {

    :root {
        --corner-width: 50vw;
        --h1-font-size: 55px;
        --h3-font-size: 30px;
        --font-size: 17px;
    }

    nav#nav {
        display: none;
    }

    .title {
        height: 100vh;
    }

}