html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

/* BODY CONTAINER */

#bodyContainer {
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    width: 100vw;
    height: 100vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#bodyContainer::-webkit-scrollbar {
    display: none;
}

/* LOGO */

#logo {
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #222;
}

/* MENU */

#menu {
    position: absolute;
    right: -15vw;
    height: 100vh;
    width: 15vw;
    transition-duration: 0.5s;
    background-color: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#menuBTN {
    position: absolute;
    left: -3vw;
    top: 0;
    width: 3vw;
    height: 3vw;
    background-color: #222;
    background-image: url("../images/menu.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

#menuLinks {
    align-self: center;
    width: 12vw;
}

#menuLinks h1 {
    color: white;
    text-transform: uppercase;
    cursor: pointer;
}

/* CONTENT */

#homeContainer {
    width: 100vw;
    height: 100vh;
    background-color: #999;
    background-image: url("../images/landscape2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}

#infoHolder {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#infoHolder h3 {
    margin: 0;
    font-size: 1.5vw;
    margin-left: -100%;
}

#infoHolder #artistName {
    font-size: 10vh;
    text-transform: uppercase;
    margin: 0;
}

#infoHolder #date {
    font-size: 3vh;
    text-transform: uppercase;
    margin-top: 0;
}

#infoHolder #latestViewBTN {
    font-weight: 600;
    font-size: 2vh;
    text-transform: uppercase;
    border: black solid 0.2vw;
    padding: 0.3vw;
    padding-left: 2vw;
    padding-right: 2vw;
    transition-duration: 0.25s;
    cursor: pointer;
}

#infoHolder #latestViewBTN:hover {
    background-color: black;
    color: white;
}

#previousDropsBTN {
    font-size: 2vh;
    text-transform: uppercase;
    margin-top: 35vh;
    margin-bottom: -35vh;
    cursor: pointer;
}

/* PREVIOUS DROPS */

#previousDropsContainer {
    width: 100vw;
    height: 100vh;
    background-color: #222;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

#previousDropsHolder {
    color: white;
}

#dropSlideshow {
    display: flex;
    align-items: center;
    justify-content: center;
}

#dropSlideshow #leftArrow {
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    background-image: url("/site/images/leftArrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#dropSlideshow #rightArrow {
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    background-image: url("/site/images/rightArrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

.drop {
    width: 60vw;
    height: 70vh;
    background-color: white;
    display: none;
    color: #222;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dropTitle {
    font-size: 6vh;
    margin: 0;
}

.dropArtist {
    font-size: 4vh;
    margin: 0;
}

.dropDate {
    font-size: 2.5vh;
    margin: 0;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }


/* ABOUT US */

#aboutUsContainer {
    width: 100vw;
    height: 100vh;
    background-color: rebeccapurple;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

#aboutUsHolder {
    color: white;
}

/* CONTACT */

#contactContainer {
    width: 100vw;
    height: 100vh;
    background-color: hotpink;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contactHolder {
    color: white;
}