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

body{
    font-family:'Poppins',sans-serif;
    background:#F5F5F5;
    overflow:hidden;
}

.hero{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

/* Pencil */

.pencil{
    position:absolute;
    left:-70px;
    top:85%;
    transform:translateY(-50%);
    height:650px;
    animation:float 3s ease-in-out infinite;
}

/* Content */
.content-wrapper{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:900px;
    max-width:90%;
}
.content{
    width:100%;
    text-align:center;
    z-index:2;
}

.logo{
    width:280px;
    margin-bottom:70px;
}

h1{
    font-size:65px;
    font-weight:600;
    line-height:1.1;
    color:#111;
}

h1 span{
    color:#F6C73B;
}

h2{
    font-size:40px;
    font-weight:500;
    line-height:1.15;
    color:#111;
}

p{
    margin-top:50px;
    color:#9B9B9B;
    font-size:24px;
    font-weight:400;
}

.coming-soon{
    position:absolute;
    right:150px;
    bottom:15px;
    font-size:22px;
    font-weight:300;
    color:#F6C73B;
}

/* Floating Animation */

@keyframes float{

    0%{
        transform:translateY(-50%);
    }

    50%{
        transform:translateY(-60%);
    }

    100%{
        transform:translateY(-50%);
    }

}

/* Laptop */

@media(max-width:1200px){

    .pencil{
        height:520px;
        left:-50px;
        top:85%;
    }

    .logo{
        width:240px;
    }

    h1{
        font-size:55px;
    }

    h2{
        font-size:36px;
    }

    p{
        font-size:20px;
    }

    .coming-soon{
        right:80px;
        bottom:20px;
        font-size:18px;
    }

}

.work-strip{
    width:100%;
    overflow:hidden;
    margin:40px 0;
    opacity:0.3;
    transition:opacity .3s ease;
}

.work-strip img{
    display:block;
    width:100%;
    height:auto;
}

.work-strip:hover{
    opacity:0.9;
}

/* Mobile */

/* ===========================
   Layout Switch
=========================== */

.desktop-layout{
    width:100%;
    height:100%;
    position:relative;
}

.desktop-layout .content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.desktop-layout .pencil{
    position:absolute;
    left:-70px;
    top:85%;
    transform:translateY(-50%);
}

.desktop-layout .coming-soon{
    position:absolute;
    right:150px;
    bottom:15px;
}

.mobile-layout{
    display:none;
}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

    .desktop-layout{
        display:none;
    }

    .mobile-layout{

        display:flex;
        flex-direction:column;
        align-items:center;

        width:100%;
        height:100vh;

        position:relative;

        overflow:hidden;

        padding-top:75px;

    }

    .mobile-logo{

        width:170px;

        margin-bottom:35px;

    }

    .mobile-content{

        width:90%;
        max-width:280px;

        text-align:center;

    }

    .mobile-content h1{

        font-size:34px;
        line-height:1.15;

    }

    .mobile-content h2{

        margin-top:8px;

        font-size:24px;

        line-height:1.2;

    }

    .mobile-content p{

        margin-top:24px;

        font-size:15px;

        line-height:1.6;

        color:#9B9B9B;

    }

    .mobile-pencil{

        position:absolute;

        left:50%;

        bottom:-60px;

        height:380px;

        transform:translateX(-50%);

        animation:mobileFloat 3s ease-in-out infinite;

    }

    .mobile-coming{

        position:absolute;

        left:50%;

        top:460px;

        transform:translateX(-50%);

        color:#F6C73B;

        font-size:18px;

    }

}

.work-strip{
    width:100%;
    margin:25px 0;
}

.work-strip img{
    width:100%;
    display:block;
}

@keyframes mobileFloat{

    0%{

        transform:translateX(-50%) translateY(0);

    }

    50%{

        transform:translateX(-50%) translateY(-25px);

    }

    100%{

        transform:translateX(-50%) translateY(0);

    }

}