@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap');

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

:root{

    /* Primary */
    --StrongCyan: hsl(171, 66%, 44%);
    --LightBlue: hsl(233, 100%, 69%);

    /* Neutral */
    --DarkGrayishBlue: hsl(210, 10%, 33%);
    --GrayishBlue: hsl(201, 11%, 66%);
}

    
body{
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
}

h1, h2{
    color: var(--DarkGrayishBlue);
}

p{
    color: var(--GrayishBlue);
}

    /* 
    FIRST SECTION BEGINS
    NOTE: fs refers to first-section class elements
    */
.first-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fs-ios, .ffs-ios{
    background-color: var(--StrongCyan);
    box-shadow: 0px 2px 0px 0px hsl(171, 66%, 34%), 0px 0px 20px 0px hsla(171, 66%, 54%, 0.5);
}

.fs-mac, .ffs-mac{
    background-color: var(--LightBlue);
    box-shadow: 0px 2px 0px 0px hsl(233, 100%, 59%), 0px 0px 20px 0px hsl(233, 100%, 69%, 0.5);
}

.fs-ios, .fs-mac, .ffs-ios, .ffs-mac{
    font-family: 'Bai Jamjuree', sans-serif;
    border: none;
    color: white;
}

button:hover{
    cursor: pointer;
}
/* FIRST SECTION ENDS */

    /* 
    SECOND SECTION BEGINS
    NOTE: ss refers to first-section class elements
    */
.second-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    

    /* DESKTOP VIEW */
@media (min-width:900px) {
    body{
        background-image: url(./images/bg-header-desktop.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* 
    FIRST SECTION BEGINS
    NOTE: fs refers to first-section class elements
    */
    .first-section{
        margin-top: 8rem;
        width: 800px;
    }

    .fs-logo{
        margin-bottom: 4rem;
    }

    .fs-header{
        font-size: 260%;
        margin-bottom: 1rem;
    }

    .fs-description{
        font-size: 120%;
        text-align: center;
        margin-bottom: 3rem;
    }

    .fs-button{
        width: 65%;
        display: flex;
        justify-content: space-evenly;
    }

    .fs-ios, .fs-mac{
        font-size: 90%;
        padding: 1rem 3.5rem;
        border-radius: 30px;
    }
    /* FIRST SECTION ENDS */
    
    /* 
    SECOND SECTION BEGINS
    NOTE: ss refers to first-section class elements
    */

    .second-section{
        margin-top: 10rem;
        width: 600px;
    }

}

    /* MOBILE VIEW */
@media (max-width:900px) {
    body{
        background-image: url(./images/bg-header-mobile.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* 
    FIRST SECTION BEGINS
    NOTE: fs refers to first-section class elements
    */
    .first-section{
        width: 330px;
        text-align: center;
    }

    .fs-logo{
        margin: 7.5rem 0px 7rem 0px;
    }

    .fs-header{
        font-size: 170%;
        margin-bottom: 1.5rem;
    }

    .fs-description{
        font-size: 95%;
        margin-bottom: 3rem;
        line-height: 150%;
    }

    .fs-button{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .fs-ios, .fs-mac{
        font-size: 20px;
        width: 100%;
        margin-bottom: 2rem;
        padding: 1.3rem 0px;
        border-radius: 50px;
    }

    .fs-ios{
        box-shadow: 0px 5px 0px 0px hsl(171, 66%, 34%), 0px 0px 20px 0px hsla(171, 66%, 54%, 0.5);
    }

    .fs-mac{
        box-shadow: 0px 5px 0px 0px hsl(233, 100%, 59%), 0px 0px 20px 0px hsl(233, 100%, 69%, 0.5);
    }
    /* FIRST SECTION ENDS */

    /* 
    SECOND SECTION BEGINS
    NOTE: ss refers to second-section class elements
    */

    .second-section{
        width: 100%;
        text-align: center;
    }

    .ss-header{
        margin: 10rem 0px 1.5rem 0px;
        width: 300px;
    }

    .ss-description{
        font-size: 95%;
        width: 330px;
        line-height: 150%;
        margin-bottom: 5rem;
    }

    .ss-text{
        font-size: 90%;
        width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .ss-image{
        width: 300px;
        margin-bottom: 5rem;
    }

    .top, .middle, .bottom{
        margin-bottom: 4rem;
    }

    .ss-side-header{
        margin-bottom: 0.5rem;
    }

    .ss-side-description{
        line-height: 150%;
    }
    /* SECOND SECTION ENDS */

    /* 
    THIRD SECTION BEGINS
    NOTE: trd refers to third-section class elements
    */

    .third-section, .trd-s-image{
        width: 330px;
        text-align: center;
    }

    .trd-s-header{
        margin: 10rem 0px 1rem 0px;
    }

    .trd-s-description{
        font-size: 95%;
        margin-bottom: 4rem;
        line-height: 150%;
    }
    /* THIRD SECTION ENDS */

    /* 
    FOURTH SECTION BEGINS
    NOTE: fth-s refers to fourth-section class elements
    */

    .fourth-section{
        width: 330px;
        text-align: center;
    }

    .fth-s-header{
        margin-top: 8rem;
        margin-bottom: 1rem;
    }

    .fth-s-description{
        font-size: 95%;
        margin-bottom: 8rem;
        line-height: 150%;
    }
    .top-image{
        margin-bottom: 2rem;
    }

    .top-header{
        font-size: 135%;
        margin-bottom: 1rem;
    }

    .top-description{
        margin-bottom: 5rem;
        font-size: 95%;
        line-height: 150%;
    }

    .bottom-grid{
        margin-top: 10rem;
    }

    .bottom-1, .bottom-2, .bottom-3, .bottom-4, .bottom-5{
        margin-bottom: 5rem;
    }
    /* FOURTH SECTION ENDS */

    /* 
    FIFTH SECTION BEGINS
    NOTE: ffs refers to fifth-section class elements
    */

    .fifth-section{
        width: 330px;
        text-align: center;
    }

    .ffs-header{
        margin: 10rem 0px 1.5rem 0px;
    }

    .ffs-description{
        font-size: 96%;
        margin-bottom: 3rem;
        line-height: 150%;
    }

    .ffs-button{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .ffs-ios, .ffs-mac{
        font-size: 20px;
        width: 100%;
        margin-bottom: 2rem;
        padding: 1.3rem 0px;
        border-radius: 50px;
    }

    .ffs-ios{
        box-shadow: 0px 5px 0px 0px hsl(171, 66%, 34%), 0px 0px 20px 0px hsla(171, 66%, 54%, 0.5);
    }

    .ffs-mac{
        box-shadow: 0px 5px 0px 0px hsl(233, 100%, 59%), 0px 0px 20px 0px hsl(233, 100%, 69%, 0.5);
    }
    /* FIFTH SECTION ENDS */

    /* 
    LAST SECTION BEGINS
    NOTE: ls refers to fifth-section class elements
    */
    .last-section{
        background-color: #f5f6f8;
        width: 100%;
        margin-top: 10rem;
        padding: 5rem 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--DarkGrayishBlue);
    }

    .ls-image{
        width: 60px;
        margin-bottom: 2rem;
    }

    .ls-center{
        line-height: 250%;
        margin-bottom: 3rem;
    }

    .ls-social{
        width: 250px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    /* LAST SECTION ENDS */
}