@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root{
    --primary-color: #ffffff;
    --secondary-color: rgb(216, 216, 216);
    --text-primary-color: rgb(0, 0, 0);
    --text-secondary-color: rgb(255, 255, 255);
    --accent-color: rgb(0, 255, 221);
    --secondary-accent-color: rgb(0, 108, 106);
    --scroll-timer: 32s;
    --address-form: '1234 N Address Ave City, State 88888';
    --email-form: 'yourcontactaddress@example.com';
}

#address-form::before{
    content: var(--address-form);
}

#email-form::before{
    content: var(--email-form);
}

*{
    margin: 0;
    padding: 0;
}

html{
    font-family:'Poppins', sans-serif;
    font-size: 14pt;
    color: var(--text-primary-color);
    overflow-x: hidden;
}

body{
    min-height: 100vh;
    background-color: var(--primary-color);
    overflow-x: hidden;
}

a{
    color: var(--accent-color);
}

header{
    position: relative;
}

.splash-image{
    width: 100%;
    height: 400px;
    object-fit: cover;
    background-image: url('Babak-Smoke-Shop.jpg');
    animation: put-er-there 1s ease-out;
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center;
    justify-self: center;
    min-width: 600px;
}

.folder-edge{
    width: 100%;
    margin-top: -50px;
    display: flex;
    position: relative;
    z-index: 2;
    gap: 100px;
    justify-content: space-between;
    top: 40px;
}

.folder-left{
    width: 13rem;
    height: 50px;
    background-color: var(--primary-color);
    position: relative;
    z-index: 2;
    border-top-right-radius: 100px;
}
.folder-right{
    width: 13rem;
    height: 50px;
    background-color: var(--primary-color);
    position: relative;
    z-index: 2;
    border-top-left-radius: 100px;
}

.splash{
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    opacity: 0;
    animation: slide-up 1s 1s ease-out forwards;
    text-align: center;
    width: 100%;
    height: 400px;
}

.splash-gradient{
    position: absolute;
    width: 100%;
    height: 400px;
    z-index: 1;
    background-image: radial-gradient(rgb(68, 68, 68), transparent 90%);
    animation: fade-in 3s 0.9s ease-out forwards;
    opacity: 0;
}

.splash h1{
    color: var(--text-secondary-color);
    position: relative;
}

.splash h2{
    color: var(--text-secondary-color);
    font-size: 12pt;
    position: relative;
}

.scroller{
    width: 100%;
    height: 25rem;
    display: flex;
    animation-timeline: view();
    animation: slide-up 320ms 2s ease-out forwards;
    opacity: 0;
    position: relative;
}

.scroller div{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-gap: 20px;
    padding: 10px;
    flex: none;
    animation: scroll-left var(--scroll-timer) linear infinite;
}

.scroller div img{
    width: 300px;
    height: 300px;
    transition: 320ms ease-in-out transform;
    background-size: auto;
}


.scroller:-webkit-scrollbar{
 display: none;
}

#vapes div{
    position: relative;
    animation-timeline: view();
    animation: scroll-right var(--scroll-timer) linear infinite;
}

#vapes{
    left: -1650px;
}

#glass{
    left: 0px;
}

.location-section{
    width: 100%;
    height: 40rem;
    background-color: var(--secondary-color);
    margin-top: 300px;
    animation-timeline: view();
    animation: slide-up 320ms forwards;
}

.location-outside{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#location-edge{
    top: -10px;
}

.location-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
    max-width: 900px;
}

iframe{
    border-radius: 20px;
    min-height: 200px;
    width: 100%
}

.contact{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-primary-color);
}

.contact-wrapper{

}

.contact-wrapper div{
    color: var(--primary-color);
    display: inline-block;
    text-align: center;
}

#at-symbol{
    font-size: 110pt;
    color: var(--primary-color);
}

@keyframes put-er-there{
    0%{
        opacity: 0;
        background-position-y: -200px;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes slide-up{
    0%{
        margin-top: 100px;
    }
    100%{
        margin-top: 0px;
        opacity: 100%;
    }
}

@keyframes scroll-left{
    0%{
        position: relative;
        left: 0px;
    }
    100%{
        position: relative;
        left: -535px;
    }
}

@keyframes scroll-right{
    0%{
        position: relative;
        left: -350px;
    }
    100%{
        position: relative;
        left: 295px;
    }
}