@import url(fonts.css);

:root {
    --vh: 100vh;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    background: url("../img/background_mobile.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.background {
    object-fit: cover;
    width: 100vw;
}

.chair {
    height: 150px;
}

#main-screen{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    overflow: hidden;
}

div {
    position: absolute;
}

#droppable {
    display: none;
    z-index: 10;
}

#popup {
    display: none;
    z-index: 5;
    background: #b0b6ae;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
}

.dropped {
    z-index: 6;
}

.boxed h1 {
    font-family: Archivo, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    margin: 0;
    padding: 20px 0 0 20px;
}

.boxed p {
    font-family: Archivo, sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    margin: 0;
}

.boxed p.featured-text{
    margin-bottom: 1rem;
}

.boxed {
    display: none;
    color: #ffffff;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    height: calc(var(--vh, 1vh) * 100);
}

.text-box {
    position: absolute;
    bottom: 20px;
    right: 0;
    padding: 0 20px 20px 0;
}

.button {
    height: 70px;
    position: absolute;
    bottom: 20px;
    z-index: 10;
    padding: 0 0 20px 20px;
}

.tap-info{
    height: 70vh;
    height: calc(var(--vh, 1vh) * 70);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 90%;
}

@media (min-width: 768px) and (min-height: 500px) {
    body {
        background: url("../img/background-large.jpg");
        background-size: cover;
        /*background-position: center bottom;*/
        background-position: center center;
    }

    .background {
        object-fit: cover;
        width: 100vw;
    }

    /*div#main-screen{*/
    /*    height: 60vh;*/
    /*    width: 100%;*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*}*/

    .chair {
        height: 300px;
    }

    .boxed h1 {
        font-size: 5rem;
        line-height: 1;
        padding: 50px 0 0 50px;
    }

    .boxed p {
        font-size: 1.5rem;
    }

    .boxed p.featured-text{
        margin-bottom: 2rem;
    }

    .text-box{
        padding: 0 50px 50px 0;
    }

    .text-box p {
        /*font-size: 2rem;*/
    }

    .button {
        height: 120px;
        padding: 0 0 50px 50px;
    }

    .tap-info{
        display: none;
    }
}

@media (min-width: 1400px) {

    .background {
        object-fit: cover;
        width: 100vw;
    }

    /*div#main-screen{*/
    /*    height: 60vh;*/
    /*    width: 100%;*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*}*/

    .chair {
        height: 500px;
    }

    .boxed h1 {
        font-size: 7.2rem;
        line-height: 1;
        padding: 50px 0 0 50px;
    }

    .boxed p {
        font-size: 2rem;
    }

    .boxed p.featured-text{
        margin-bottom: 2rem;
    }

    .text-box{
        padding: 0 50px 50px 0;
    }

    .button {
        height: 150px;
        padding: 0 0 50px 50px;
    }

    .tap-info{
        display: none;
    }
}