@font-face {
    font-family: lemon-milk;
    src: url(fonts/lemon_milk/LEMONMILK-Regular.otf);
}

@font-face {
    font-family: quicksand;
    src: url(fonts/quicksand/Quicksand_Book.otf);
}

@font-face {
    font-family: quicksliver;
    src: url(fonts/quicksilver_3/Quicksilver.ttf);
}

@font-face{
    font-family: exepixelperfect;
    src: url(fonts/exepixelperfect/EXEPixelPerfect.ttf);
}

body{
    background-color: rgb(255, 255, 255);
    align-items: end;
    overflow-x: hidden;
}

.wrapper{
    width:70vw;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
}
.flex-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.flex-column{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.button-link{
    padding: 0;
    margin: 0;
    text-decoration: 0;
}

.nav-bar{
    background-color: rgb(231, 231, 231);
    color: rgb(29, 28, 31);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
}

.nav-bar a {
    text-decoration: none;
    color:rgb(69, 69, 69) ;
    margin: 0.5vw;
    font-size: smaller;
    font-weight: 100;
    padding-bottom: 0;
}

.landing-banner{
    background-image: url(images/vidshare-banner.jpg);
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    position: absolute;
    top: 2vw;
    left: 0;
    font-family:quicksand;
}

.landing-banner h1{
    font-size: 8vw;
    margin: 0;
    margin-bottom: 2vw;
    padding-top: 0;
    color: white;
    font-family: quicksilver;
}

.landing-banner h2{
     margin-top: 1vw;
     margin-bottom: 0;
    font-size: 6vw;
    color: white;
}

.spec-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    align-items: center;
    justify-items: center;
    text-align: center;
    column-gap: 1.5vw;
    row-gap: 1.5vw;
    margin-top: 25vw;
}

.spec-grid h1{
    font-family: quicksand;
    font-size:6vw;
    color: black;
}

.spec-grid p{
    font-family: sans-serif;
    color: rgb(69, 69, 69);
    font-size: 1vw;
}

.spec-grid img{
    border-radius: 10vw;
}

.vidshare-section{
    position: absolute;
    left: 0;
    width: 100vw;
    background-color: black;
}

.short-form-scroller{
    display: flex;
    height: 35.56vw;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    margin-top: 1vw;
    margin-bottom: 7vw;
    align-items: center;
    scrollbar-width: none;

}

.short-form-scroller video{
    width: 20vw;
    margin-bottom: 2vw;
    border-radius: 1vw;
    scroll-snap-align: start;
}

.short-form-scroller img{
    width: 20vw;
    margin-bottom: 2vw;
    border-radius: 1vw;
    scroll-snap-align: start;
}

.vid-container{
    visibility: hidden;
    font-family: exepixelperfect;
    color: white;
    font-size: 1.5vw;
    text-align: center;
    margin-top: 2vw;
    position: fixed;
    top: 15vw;
    left: 15vw;
    width:20vw;
}

#shop-prompt{
    background-color: rgb(118, 183, 229); 
    visibility: hidden;
    width: 19vw; 
    position: absolute; 
    bottom: 4.3vw; 
    justify-self: center; 
    align-self: center; 
    border-radius: 0.2vw; 
    padding:0.3vw; 
    font-size: smaller; 
    color: rgb(255, 255, 255); 
    font-weight: bolder;
}