@font-face {
  font-family: Nounty;
  src: url(fonts/Nounty.ttf);
  font-weight:bold;
}

@font-face {
  font-family: Alvera-Square;
  src: url(fonts/AlveraDEMO-BoldSquare.ttf);
}

@font-face {
  font-family: Kagurazaka;
  src: url(fonts/KH-Dot-Kagurazaka-12.ttf);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}
header {
    width: 100%;
    text-align: center;
    background-color: rgb(255,255,255);
    color: gray;
}
h1 {
    font-family: Alvera-Square, monospace;
    font-size: 5em;
    margin: 0px;
}
h2 {
    font-family: Alvera-Square, monospace;
    font-size: 2em;
    margin: 0px;
}
ul {
    list-style-type: square;
}
p, li {
    font-family: Nounty, Kagurazaka, serif;
    color: white;
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: stretch;
    align-items: center;
    flex-grow: 1;
}

.selectText {
    margin-bottom: 1rem;
}
nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
}

nav div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: calc(100%/3);
    background-size: cover;
}
nav div a {
    background-color: rgba(0,0,0,.2);
    padding: 1em 2em;
    color: white;
    text-decoration:none;
}

.recruiters{
    background-image: url(media/splash1.gif);
    position: relative;
}
.artists{
    background-image: url(media/splash2.gif);
}
.students{
    background-image: url(media/splash3.gif);
}


a {
    display: flex;
    flex-direction: column;
    height:100%;
}
a:hover {
    color: pink;
}

button {
    position: absolute;
    bottom: 1em;
    left: 1em;
    width: calc(100% - 2em);
    padding: 0.5rem;
    border-radius: 0px;
    font-family: Alvera-Square, Kagurazaka;
    font-size: 1.2em;
    background-color: white;
    color: darkslategray;
    border: 2px gray solid;
}
button:hover {
    background-color: lightgray;
    border-color: darkslategray;
}