/*  GENERAL   */

a {
    color: #fff;
}

body {
    background-color: #000;
    overflow: hidden;
    min-width: 100vw;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /*scroll-behavior: smooth;
    font-family: 'Playfair Display', serif;*/
}

main {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    display: flex;
}

section {
    scroll-snap-align: start;
}

.slim {
    font-family: Verdana, sans-serif;
    text-align: center;
}

.phat {
    font-family: Verdana, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.white {
    color: #fff;
}

.w-30 {
    width: 80vw;
    max-width: 30vw;
    margin: 1em;
}

.w-10 {
    max-width: 10em;
    margin: 1em;
}

.day-block {
    overflow-y: hidden;
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.uni-img {
    width: 100vw;
    height: 100vh;
}


/*  MENU  */

#day-menu {
    z-index: 999;
    position: fixed;
    left: 30px;
}

#day-menu span {
    color: #fff;
    text-transform: uppercase;
}

#day-menu div {
    height: 0.1em;
    width: 50%;
    margin: 1em 0;
    display: block;
    background-color: #fff;
}

#day-menu a {
    margin: 0.5em 0;
    display: block;
    min-width: 100%;
    text-transform: uppercase;
}

#day-menu a:link,
#day-menu a:visited,
#day-menu a:active {
    text-decoration: line-through;
}

#day-menu a:hover,
#day-menu a:focus {
    color: #000;
    text-decoration: none;
}

.highlight {
    color: #000;
    text-decoration: none;
}


/*  INDEX   */

body#body-index {
    scroll-behavior: smooth;
    overflow-x: scroll;
    width: auto;
}


/*  MONDAY   */

#monday {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ff9090;
    top: 0;
    left: 0;
}

a#dolfy {
    display: block;
    background-image: url(/assets/images/dolphin_o.png);
    background-size: 100%;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 30vw;
    max-width: 500px;
    height: 30vh;
}

a#dolfy:hover,
a#dolfy:focus,
a#dolfy:visited,
a#dolfy:active {
    cursor: url(/assets/images/knife.png), auto;
    background-image: url(/assets/images/dolphin_x.png);
}


/*  TUESDAY   */

#tuesday {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 100vw;
}

#words {
    width: 80%;
    padding: 0;
    margin: 0;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    text-align: left;
    padding: 4em;
}

#words p {
    text-decoration: line-through;
    filter: blur(0.2em);
    margin: 0.1em 0;
    font-family: 'Playfair Display', serif;
    font-size: 0.5em;
    color: #666;
}

#words p.station,
#words p.station:hover,
#words p.station:focus {
    color: #ff9090;
}

#words p:hover,
#words p:focus {
    text-decoration: none;
    filter: blur(0);
    position: absolute;
    left: 40%;
    top: 50%;
    color: #fff;
    font-size: 3em;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}


/*  WEDNESDAY   */

#wednesday {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #098;
    top: 0;
    left: 200vw;
}

body#body-wednesday {
    background-color: #192;
}

a#exibit {
    display: block;
    background-image: url(/assets/images/exhibition.png);
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
    width: 60%;
    max-width: 1000px;
    height: 40%;
    transition: ease-out 0.5s;
}

a#exibit:hover,
a#exibit:focus,
a#exibit:visited,
a#exibit:active {
    background-size: 100%;
    cursor: help;
    transition: ease-out 0.5s;
}


/*  THURSDAY   */

#thursday {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    top: 0;
    left: 300vw;
}

body#body-wednesday {
    background-color: unset;
}

.vessel {
    max-width: 6vw;
    margin: 1.2em;
}

.small-glass {
    background-image: url(/assets/images/juice.svg);
    background-size: 150%;
    background-position-y: 60%;
}

.big-glass {
    background-image: url(/assets/images/water.svg);
    background-size: 300%;
    background-position-y: 60%;
}

.bottle {
    background-image: url(/assets/images/water.svg);
    background-size: 300%;
    background-position-y: 70%;
}

.vessel:hover,
.vessel:focus {
    transform: rotate(10deg);
    background-position-y: 0%;
    transition: ease-out 0.5s;
}

.vessel-row {
    vertical-align: bottom;
}

.drink-event {
    display: inline-block;
}

.drink-data {
    padding-left: 20%;
}


/*  FRIDAY   */

#friday {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #239;
    top: 0;
    left: 400vw;
}

#me {
    height: 60%;
    max-width: 30%;
    background-image: url(/assets/images/thought.svg);
    background-repeat: no-repeat;
    transition: ease-out 0.2s;
    background-position-x: 60%;
    background-position-y: 30%;
    background-size: 0;
}

#me:hover,
#me:focus,
#me:visited,
#me:active {
    transform: rotate(2deg);
    transition: ease-out 0.2s;
    background-position-x: 0;
    background-position-y: 0;
    background-size: 40%;
}


/*  SATURDAY   */

#saturday {
    display: flex;
    justify-content: center;
    background: url(/assets/images/rocky_mount.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    top: 0;
    left: 500vw;
}

#saturday p {
    position: absolute;
    top: 30%;
}

#rocky {
    position: absolute;
    bottom: 0;
    max-width: 8%;
    background-image: url(/assets/images/boost.svg);
    background-repeat: no-repeat;
    background-position-x: 52%;
    background-position-y: 60%;
    background-size: 0;
}

#rocky:hover,
#rocky:focus,
#rocky:visited,
#rocky:active {
    cursor: crosshair;
    transform: translate(0, -100vh);
    transition: ease-in 3s;
    background-position-y: 90%;
    background-size: 55%;
}


/*  SUNDAY   */

#sunday {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #912;
    top: 0;
    left: 600vw;
}

.filet {
    width: 40%;
    max-width: 800px;
    height: 65%;
    background-image: url(/assets/images/filet_closed.png);
    background-position: bottom;
    background-size: 98%;
    background-repeat: no-repeat;
    transition: ease-out 0.1s;
    z-index: 900;
}

.filet:hover,
.filet:focus,
.filet:visited,
.filet:active {
    background-image: url(/assets/images/filet_open.png);
    transition: ease-out 0.1s;
    background-size: 100%;
    cursor: url(/assets/images/mhhh.png), auto;
}

.order {
    position: absolute;
    left: 30%;
    top: 20%;
    transform: rotate(-6deg);
}