@font-face {
    font-family: 'Phosphate';
    src: url('/static/fonts/phosphatesolid.woff') format('woff');
}

@font-face {
    font-family: 'Pangram';
    src: url('/static/fonts/pangrammedium.woff') format('woff');
}


/** Layout **/
body {
    display: flex;
    flex-direction: column;
}
body{
    min-height: 100vH;
}
body .container-fluid {
    flex-grow: 1;
}

.content.container {
    margin-top: 20px;
    margin-bottom: 20px;
}

/** Generics **/

h1, h3, h4 {
    font-family: 'Phosphate';
    color: white;
}
h2 {
    font-family: 'Pangram';
    color: white;
}


a:hover {

    text-decoration: none;
}

.box-wrapper{
    padding: 20px;
    border-radius: 4px;
    background-color: rgba(0,0,0, .6);
    color: lightgray;
}

/** Menu **/
.navbar-brand {
    font-family: 'Phosphate';
}

/** The Spiral **/

.the-spiral-wrapper {
    overflow: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
.the-spiral {
    background: url("/static/images/thespiral.png");
    background-size: 100%;
    width: 3000px;
    height:3000px;
    position: relative;
    top: -1000px;
    left: -1000px;
    animation: spin 450s linear infinite;
    z-index: -1;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}