/*   **********    SETUP OF DOCUMENT     **********     */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Copper+Black&display=swap');

html{
    font-size: 16px;
}
body{
    background-color: black;
    overflow: hidden;
    font-family: 'Copper Black', 'Arial Black', sans-serif;
    font-weight: 900;
}

/*   **********    MAIN & SECTION ELEMENTS     **********     */
main{
    position: relative;
    width: 42rem;
    height: 37.5rem;
    overflow: hidden;
}

section{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}


/*   **********    SCREEN ELEMENTS     **********     */

h1{
    position: absolute;
    display: inline-block;
    font-size: 2rem;
    color: white;
    top: 18rem;
    left: 13rem;
    font-family: 'Copper Black', 'Arial Black', sans-serif;
    font-weight: 900;
}
#logo{
    position: absolute;
    display: inline-block;
    top: 10rem;
    left: 13rem;
}
#heading{
    position: absolute;
    display: inline-block;
}
#coneTop{
    position: absolute;
    display: inline-block;
    /* width: 10rem; */
    top: 8rem;
    left: 17rem;
}
#coneMid{
    position: absolute;
    display: inline-block;
    top: 9rem;
    left: 18rem;
}
#coneLow{
    position: absolute;
    display: inline-block;
    top: 9rem;
    left: 18rem;
}
#para{
    position: absolute;
    display: inline-block;
    /* width: 20rem;  */
    bottom: 2rem;
    left: 16rem;
}
#para2{
    position: absolute;
    display: inline-block;
    top: 9rem;
    left: 12rem;
}
#low_mid{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 19.5rem;
    left: 14rem;
    object-fit: contain;
    padding: 1rem;
}
#low_right{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 19.5rem;
    right: 0rem;
    object-fit: contain;
    padding: 1rem;
}
#price{
    position: absolute;
    display: inline-block;
    width: 8rem;
    height: auto;
    top: 15rem;
    right: 1rem;
    z-index: 10;
}
#top_mid{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 0;
    left: 14rem;
    object-fit: contain;
    padding: 1rem;
}
#top_right{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 0;
    right: 0rem;
    object-fit: contain;
    padding: 1rem;
}
#low_left{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 19.5rem;
    left: 0rem;
    object-fit: contain;
    padding: 1rem;
}
#top_left{
    position: absolute;
    display: inline-block;
    width: 14rem;
    height: 18rem;
    top: 0rem;
    left: 0rem;
    object-fit: contain;
    padding: 1rem;
}
#cta_2{
    position: absolute;
    display: inline-block;
    width: 16rem;
    height: auto;
    top: 17.8rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    font-size: 1.2rem;
}
.span1{
    font-size: 1rem;
}
#logo3{
    position: absolute;
    display: inline-block;
    width: 26rem;
    height: auto;
    top: 7rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1rem;
}
#txt_mid{
    position: absolute;
    display: inline-block;
    top: 14rem;
    left: 50%;
    transform: translateX(-50%);
}
#special{
    position: absolute;
    display: inline-block;
    width: 10rem;
    height: auto;
    top: 3rem;
    left: 56%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1rem;
}
#txt_left{
    position: absolute;
    display: inline-block;
    top: 17rem;
    left: 2rem;
}
#txt_right{
    position: absolute;
    display: inline-block;
    top: 17rem;
    right: 2rem;
}
#linel_screen3{
    position: absolute;
    display: inline-block;
    top: 20rem;
    left: 2rem;
}
#liner_screen3{
    position: absolute;
    display: inline-block;
    top: 20rem;
    right: 2rem;
}
#burg_big{
    position: absolute;
    display: inline-block;
    top: 17rem;
    left: 12rem;
}
#burg_left{
    position: absolute;
    display: inline-block;
    top: 22rem;
    left: 4rem;
}
#burg_right{
    position: absolute;
    display: inline-block;
    top: 22rem;
    right: 4rem;
}
#chocolateCake{
    position: absolute;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: #402021;
    top: 16rem;
    left: 1rem;
}
#chocolateCoca{
    position: absolute;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: #402021;
    top: 16rem;
    left: 30rem;
}
#checkout{
    position: absolute;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: #402021;
    top: 33rem;
    left: 15rem;
    /* padding: 1rem;
    padding-right: 14rem;
    background-color: #ffcae5;
     border: 1px solid #402021; */
}
#screen1{
    background-color: white;
}
#screen2{
    background-color: #f7f0dd;
}
#screen3{
    background-color: #e2281f;
}
#screen4{
    background-color: #f7f0dd;
}

/* Screen 4 Elements */
#burg_back{
    position: absolute;
    display: inline-block;
    left: 19rem;
    top: 12rem;
    width: 14rem;
}
#burg_front{
    position: absolute;
    display: inline-block;
    left: 7.5rem;
    top: 16rem;
}
#cta{
    position: absolute;
    display: inline-block;
    top: 29rem;
    left: 19.8rem;
    width: 16rem;
}
#head{
    position: absolute;
    display: inline-block;
    top: 3rem;
    left: 4rem;
    width: 14rem;
}
#logo2{
    position: absolute;
    display: inline-block;
    top: 2.3rem;
    right: 1.5rem;
}
#new_left{
    position: absolute;
    display: inline-block;
    left: 4rem;
    top: 26.5rem;
}
#new_right{
    position: absolute;
    display: inline-block;
    right: 4rem;
    top: 12rem;
}
#rate{
    position: absolute;
    display: inline-block;
    top: 20rem;
    right: 4rem;
    width: 8rem;
}
#size{
    position: absolute;
    display: inline-block;
    top: 25.5rem;
    left: 7rem;
}
#sub_head{
    position: absolute;
    display: inline-block;
    top: 9rem;
    left: 2rem;
}
#txt_bottom{
    position: absolute;
    display: inline-block;
    top: 30rem;
    left: 5.6rem;
}
#txt_cheese{
    position: absolute;
    display: inline-block;
    top: 9rem;
    right: 3rem;
}
#txt_screen4{
    position: absolute;
    display: inline-block;
    top: 12.5rem;
    left: 2rem;
}