@font-face {
    font-family: "ProximaNova-Black";
    src: url('../ProximaNova/proximanova-black-webfont.woff') format("opentype");
}

@font-face {
    font-family: "ProximaNova-Light";
    src: url('../ProximaNova/proximanova-light-webfont.woff') format("opentype");
}

@font-face {
    font-family: "ProximaNova-Bold";
    src: url('../ProximaNova/proximanova-bold-webfont.woff') format("opentype");
}

@font-face {
    font-family: "ProximaNova-Semibold";
    src: url('../ProximaNova/proximanova-semibold-webfont.woff') format("opentype");
}

@font-face {
    font-family: "ProximaNova-Medium";
    src: url('../ProximaNova/proximanova-medium-webfont.woff') format("opentype");
}

@font-face {
    font-family: "ProximaNova-Regular";
    src: url('../ProximaNova/proximanova-regular-webfont.woff') format("opentype");
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: "ProximaNova-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4 {
    font-weight: 100;
    font-family: "ProximaNova-Semibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul {
    margin-left: 24px;
    margin-bottom: 0;
}

th, td {
    padding: 2px 6px 2px 0;
}

.loading {
    text-align: center;
    padding: 32px;
}

nav ul a {
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(44, 63, 107);
}

nav ul a:after {
    transform: scaleX(0);
    border-bottom: 2px solid #ffa9a9;
    content: "";
    display: block;
    transition: transform .25s ease-in-out;
}

nav ul a:hover:after {
    transform: scaleX(1);
}

.boid-screen {
    background-color: #bbc9ff;
    width: 100%;
    min-height: 100%;
    background-image: url('/img/netlight_rainbow_background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.background {
    background-color: #bbc9ff;
}

.schedule {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.schedule h1 {
    -webkit-text-stroke: 2px #000;
    color: #FFFFFF;
    text-shadow: 6px 6px #000000;
    font-size: 100px;
    font-family: "ProximaNova-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    text-transform: uppercase;
}

.background h1 {
    -webkit-text-stroke: 2px #000;
    color: #FFFFFF;
    text-shadow: 4px 4px #000000;
    font-size: 64px;
    font-family: "ProximaNova-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    text-transform: uppercase;
}

.schedule .dayGrid {
    display: flex;
    flex-direction: row;
}

.schedule .dayGrid .day {
    width: 300px;
    height: 750px;
    margin: 0 10px;
    border: 4px solid #7D74FE;
    background-color: rgba(255,255,255,0.6);
    padding: 12px;
    overflow: hidden;
}

.schedule .dayGrid .dayColumn .topLabel {
    font-family: "ProximaNova-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    margin: 6px;
    font-size: 32px;
    color: #000;
}

.schedule .dayGrid .day .event {
    width: 100%;
    overflow: hidden;
    box-shadow: 2px 2px rgba(0, 0, 0, 1);
    background-color: #A29AFF;
    margin-bottom: 24px;
    padding: 6px;
    font-size: 26px;
    color: black;
}

.schedule .dayGrid .day .event .startTime {
    font-weight: bold;
    font-size: 32px;
}

.schedule .dayGrid .day .event .title {
    font-weight: bold;
}


.dayList {
    padding-top: 18px;
}

.dayList .day h3 {
    padding-top: 6px;
}

.eventCard {
    box-shadow: 2px 2px rgba(0, 0, 0, 1);
    background-color: #A29AFF;
    padding: 12px;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    margin-bottom: 12px;
}

.eventCard .startTime {
    font-family: "ProximaNova-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

.eventCard .title {
    font-family: "ProximaNova-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 24px;
}

.eventCard .description {
    font-size: 12px;
    padding: 4px;
}

.eventCard .location {
    margin-top: 12px;
}

.sickers {
    width: 100%;
    height: 100%;
    position: absolute;
}

@keyframes rainbow {
    0% {
        right: 30px;
        bottom: 80px;
        rotate: 0deg;
    }
    25% {
        right: 50px;
        bottom: 100px;
        rotate: -20deg;
    }
    50% {
        right: 45px;
        bottom: 60px;
        rotate: -25deg;
    }
    75% {
        right: 10px;
        bottom: 40px;
        rotate: -10deg;
    }
    100% {
        right: 30px;
        bottom: 80px;
        rotate: 0deg;
    }
}

.stickers .rainbow {
    position: absolute;
    animation: rainbow 20s ease-in-out infinite;
}

@keyframes boid {
    0% {
        left: 0px;
        top: 140px;
        rotate: 0deg;
    }
    25% {
        left: 80px;
        top: 100px;
        rotate: 10deg;
    }
    50% {
        left: 45px;
        top: 60px;
        rotate: 15deg;
    }
    75% {
        left: 30px;
        top: 10px;
        rotate: 8deg;
    }
    100% {
        left: 0px;
        top: 140px;
        rotate: 0deg;
    }
}

.stickers .boid {
    position: absolute;
    animation: boid 23s ease-in-out infinite;
}