@font-face{
    font-family: 'customFont';
    src: url('resources/fonts/Quick.otf');
}
body{
    font-family: 'customFont';
    font-size: 16px;
    /*background-color: #303030;  Make the background the same color as the section of the page so that when you use a macbook it won't look bad when you rubberband at the end of the page */
    -ms-overflow-style: none; /* Removes the scrollbar from the screen*/
    background-color: #2A2B2E;
    color: #ffee03;
}
body::-webkit-scrollbar{
    /* Removes the scrollbar from the screen*/
    display: none;
}
.loader{
    /*https://css-tricks.com/lets-make-a-fancy-but-uncomplicated-page-loader/*/
    position: fixed; /* Fixed so it doesn't scroll with the page*/
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
    height: 100vh;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    pointer-events: none; /* Makes it possible to click through this element so that you don't have to wait for it to disappear*/
    background: rgb(22, 22, 22);
}
canvas{
    display: block;
}
#particles-js{
    position: absolute; /*Absolute because its an element that shouldn't affect the layout of the page*/
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background: white; /* Changes the menu buttons to white instead of grey*/
}
#fp-nav{
    display: none;
}
.divider{
    width: 100%;
    height: 1px;
    background-color: #ffee03;
}
.pageOne, .pageTwo, .pageThree{
    /* Sets the flex direction for all 4 sections of the website*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.pageOne{
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}
nav{    /* CSS for the mobile nav*/
    position: fixed;
    z-index: 20;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    background-color: #303030;
}
nav > ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    max-width: 800px;
    height: 2.5em;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav > ul > li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}
nav a{
    line-height: 3em;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    font-size: 0.8em;
}
nav li:hover{
    background: white;
}
nav li:hover a{
    text-decoration: none;
    color: black;
}
.title-wrapper{ /* Wraps the title and sub-title on the fist page so that the underline under the title can be the exact width of the title and also be fully responsive and scalable*/
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 60vw;
    width: 65vw;
    max-width: 600px;
    max-height: 550px;
    z-index: -5;
}
#grupp054logo{
    width: 100%;
    height: 100%;
}
.about-wrap, .join-wrap{
    max-width: 1100px;
    width: 80vw;
    text-align: center;
}
.join-button{
    border: 1px solid #ffee03;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    margin-top: 30px;
}
.join-button:hover, .join-button:focus{
    color: black;
    background: #ffee03;
}
@media screen and (min-width: 868px){
    .mobile{
        display: none;
    }
    #fp-nav{
        display: block;
    }
}