*{
    margin: 0;
    padding: 0;
}

/* =-=-=-=-=Mobile Display =-=-=-=-=-=-=-*/

@media  screen and (max-width: 479px) {
    figure#mobile {
        width: 375px;
        height: 627px;
    }

    h1{
        color: white;
        padding-top: 20vh;
        font-size: 2em;
        text-align: center;
    }

    h2, h3, h4 ,h5 {
        display: none;
    }
}

/*=-=-=-=-=-=-Phablet=-=-=-=-=-=-=-=-*/

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

    figure#phablet {
        width: 480px;
        height: 768px;
    }

    h2{
        color: pink;
        padding-top: 20vh;
        font-size: 2em;
        text-align: center;
    }

    h1, h3, h4, h5 {
        display: none;
    }
}

/*=-=--=--=-=tablet=-=-=-=-=-=-=-=*/

@media screen and (min-width: 767px) and (max-width: 1365px) {
    figure#tablet{
        width: 768px;
        height: 1024px;
    }

    h3{
        color:coral;
        padding-top: 20vh;
        font-size: 2em;
        text-align: center;
    }

    h1, h2, h4, h5{
        display: none;
    }
}

/*=-==-=-=-=-laptop=-=-=--=-=-*/

@media screen and (min-width: 1366px) and (max-width: 1919px) {
    figure#laptop{
        width: 1366px;
        height: 900px;
    }

    h4{
        color: black;
        padding-top: 20vh;
        font-size: 2em;
        text-align: center;
    }

    h1, h2, h3, h5{
        display: none;
    }
}

/*=-=-=-=-=-=-=-Desktop=-=-=-=-=-=-*/

@media screen and (min-width: 1920px) {
    figure#desktop {
        width: 1920px;
        height: 1080px;
    }

    h5{
        color:midnightblue;
        padding-top: 20vh;
        font-size: 2em;
        text-align: center;
    }

    h1, h2, h3, h4{
        display: none;
    }
}


/*=-=-=-=--=-=Color classes -=-==-=-=-=-=*/

.moss{
    background-color: #3F4B3B;
}

.hunter-green{
    background-color: #44633F;
}


.sea-green{
    background-color: #5A9367;
}

.mint{
    background-color: #5CAB7D;
}

.turquoise{
    background-color: #4ADBC8;
}