*, *::after, *::before{
    padding: 0;
    margin: 0px;
    box-sizing: border-box;
    outline: none;
}

p, h1, h2,h3 ,h4, h5, h6, input{
    font-family: 'Montserrat', sans-serif;
}

*:focus{
    box-shadow:
      0 0 0 1.5px transparent,
      0 0 0 3px grey;
}

.nofocus:focus{
    box-shadow: none !important;
}

.mobileonly{
    display: none;
}

html{
    overflow-x: hidden;
    overflow-y: scroll;
}

body{
    overflow: hidden;
    background-color: #333333;
}

.errordiv{
    height: 8vh;
    line-height: 8vh;
    background-color: white;
    color: #be2edd;
    box-shadow: 0px 0px 4px 0px grey;
    width: 70vw;
    position: fixed;
    z-index: 100;
    bottom: 3vh;
    left: 15vw;
    right: 15vw;
    border-radius: 4vh;
    text-align: center;
    font-weight: 700;
}

.errordiv button {
    height: 6vh;
    width: 6vh;
    border-radius: 50%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    background-color: rgb(61, 61, 61);
    color: white;
    font-size: 3vh;
    outline: none;
    box-shadow: none;
    border: none;
    float: right;
    margin-right: 1vw;
    display: none;
}

.disabled{
    pointer-events: none;
}

#fullpage{
    height: auto;
    min-height: 100vh;
    background-color: #333333;
    padding-top: 10vh;
}

.loadingscreen{
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    background-color: black;
    z-index: 1000;
}

.loadingscreen section{
    width: 100vw !important;
    height: auto;
    display: block;
}

.imgwrapper{
    width: 100%;
    text-align: center;
    top: 22.5vh;
    position: absolute;
}

.loadwrapper{
    position: absolute;
    top: 55vh;
}

.loadingscreen img{
    max-width: 60vw;
    height: auto;
}

.loadbar{
    width: 50vw;
    height: 4vh;
    border: none;
    overflow: hidden;
    border-radius: 3vh;
    margin-left: 25vw;
    margin-right: 25vw;
    margin-top: 10vh;
}

.loadbar div{
    height: 4vh;
    border-radius: 3vh;
    width: 70vw;
    display: block;
    animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-name: loadinganim;
    -moz-animation-name: loadinganim;
    -o-animation-name: loadinganim;
    -webkit-animation-name: loadinganim;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    background-image: linear-gradient(45deg, #4834d8, #be2edd);
}

@keyframes loadinganim {

    from{
        transform: translateX(-70vw);
    }

    to{
        transform: translateX(50vw);
    }

}

@keyframes vanish{

    from{
        z-index: inherit;
    }

    to{
        top: -800vh;
    }

}

@-moz-keyframes loadinganim {

    from{
        transform: translateX(-70vw);
    }

    to{
        transform: translateX(50vw);
    }

}

@-moz-keyframes vanish{

    from{
        display: inherit;
        z-index: inherit;
    }

    to{
        top: -800vh;
        z-index: -10000000000000000000000000000000000000000000000000 !important;
    }

}

@-webkit-keyframes loadinganim {

    from{
        transform: translateX(-70vw);
    }

    to{
        transform: translateX(50vw);
    }

}

@-webkit-keyframes vanish{

    from{
        display: inherit;
        z-index: inherit;
    }

    to{
        top: -800vh;
        z-index: -10000000000000000000000000000000000000000000000000 !important;
    }

}

@-o-keyframes loadinganim {

    from{
        transform: translateX(-70vw);
    }

    to{
        transform: translateX(50vw);
    }

}

@-o-keyframes vanish{

    from{
        display: inherit;
        z-index: inherit;
    }

    to{
        top: -800vh;
        z-index: -10000000000000000000000000000000000000000000000000 !important;
    }

}

a{
    color: inherit;
    text-decoration: none;
}

ul{
    list-style-type: none;
}

nav{
    width: 100vw;
    position: fixed;
    height: 10vh;
    box-shadow: 0px 3px 10px 0px black;
    z-index: 10;
    top: 0;
}

.blur{
    height: 10vh;
    width: 100%;
    z-index: -10;
    position: fixed;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

nav ul{
    width: 100%;
    height: 10vh;
    line-height: 10vh !important;
    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

nav ul li{
    height: 10vh;
    line-height: 10vh;
    padding-left: 1em;
    padding-right: 1em;
    font-size: smaller;
    font-weight: 600;
    color: #fff;
}

.li1{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 0 !important;
}

.li1 a{
    display: flex;
    align-items: center;
    justify-content: left;
}

nav ul span{
    width: auto;
    height: 10vh;
    line-height: 10vh;
    display: flex;
    justify-content: space-between;
}

nav ul span li{
    width: auto;
    display: inline-block;
}

.navlogo{
    height: 5vh;
}

.li2:hover p, .li2:focus p, .li2:active p{
    color: #4834d4;
}

.li3:hover, .li3:focus, .li3:active{
    color: #4834d4;
}

.li4{
    padding-right: 0 !important;
}

.loginlink{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.loginlink button{
    max-height: 8vh;
    width: auto;
    height: auto;
    border: none;
    outline: none;
    background: linear-gradient(45deg, #4834d4, #be2edd);
    box-shadow: 0px 3px 10px 0px black;
    font-weight: 600;
    color: #fff;
    border-radius: .75em;
    padding: 1em 3.5em 1em 3.5em;
    font-family: 'Montserrat', sans-serif;
}

.loginlink button:hover, .loginlink button:focus, .loginlink button:active{
    box-shadow: 0px 3px 10px 0px #4834d4;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    -moz-transition-duration: .4s;
}

.loginlink button:not(hover), .loginlink button:not(focus), .loginlink button:not(active){
    box-shadow: none;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    -moz-transition-duration: .4s;
}

.profilelink{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    line-height: 10vh;
}

.profilelink img{
    height: 6vh;
    border-radius: 2vh;
    object-fit: contain;
}

.profilelink p{
    background: linear-gradient(45deg, #4834d4, #be2edd);
    color: white;
    height: 4vh;
    width: auto;
    padding-left: 2.5vw;
    padding-right: 2vw;
    position: relative;
    left: -1vw;
    display: inline-block;
    line-height: 4vh;
    font-size: x-small;
    border-radius: 0vh 2vh 2vh 0vh;
    z-index: -1;
}

.profilelink:hover p, .profilelink:hover p .profilelink img, .profilelink:focus p, .profilelink:focus p .profilelink img, .profilelink:active p, .profilelink:active p .profilelink img{
    box-shadow: 0px 0px 7.5px 1.5px lightgrey;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    -moz-transition-duration: .4s;
}

.profilelink:not(hover) p, .profilelink:not(hover) p .profilelink img, .profilelink:not(focus) p, .profilelink:not(focus) p .profilelink img, .profilelink:not(active) p, .profilelink:not(active) p .profilelink img{
    box-shadow: none;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    -moz-transition-duration: .4s;
}

footer{
    background-color: #333333;
    height: 40vh;
    max-width: 100vw;
    box-sizing: border-box;
    padding-top: 3vw;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-weight: bolder;
    padding-left: 5vw;
    padding-right: 5vw;
    position: relative;
    margin-top: 4vw;
    box-shadow: 0px -3px 10px 0px black;
}

footer ul, footer section{
    display: block;
}

footer ul{
    float: left;
    height: 90%;
    font-weight: 600;
    font-size: medium;
    font-family: 'Crimson Pro', serif;
}

footer ul a:hover, footer ul a:focus, footer ul a:active{
    color: #4834d4;
    transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    -webkit-transition-duration: .5s;
}

footer ul a:not(hover), footer ul a:not(focus), footer ul a:not(active){
    color: white;
    transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    -webkit-transition-duration: .5s;
}

footer section{
    float: right;
    height: 90%;
}

footer form{
    width: 30vw;
    background-color: #222222;
    box-shadow: 0px 3px 10px 0px black;
    color: #fff;
    border-radius: .75em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .5em 1.5em .5em 1.5em;
}

footer form:hover, footer form:focus, footer form:active{
    box-shadow: 0px 3px 10px 5px black;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
}

footer form:not(hover), footer form:not(focus), footer form:not(active){
    box-shadow: 0px 3px 10px 0px black;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
}

footer form input{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: xx-small;
    color: #fff;
    width: 80%;
    padding: 1.5em 3em 1.5em 3em;
}

footer form input::-webkit-input-placeholder {
    color: white;
    font-size: xx-small;
  }
  footer form input::-moz-placeholder {
    color: white;
    font-size: xx-small;
  }
  footer form input::-ms-input-placeholder {
    color: white;
    font-size: xx-small;
  }
  footer form input::-moz-placeholder {
    color: white;
    font-size: xx-small;
  }

footer form button{
    background-color: #fff;
    box-shadow: inset 0px 3px 10px 0px black;
    width: 2.5em;
    height: 2.5em;
    color: #161616 !important;
    border: none;
    outline: none;
    border-radius: 50%;
}     

footer button:hover, .herobtns form button:hover, footer button:focus{
    box-shadow: inset 0px 3px 10px 0px #fff;
    transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
    -webkit-transition-duration: .4s;
}

footer button:not(hover), .herobtns form button:not(hover), footer button:not(focus){
    box-shadow: inset 0px 3px 10px 0px black;
    transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
    -webkit-transition-duration: .4s;
}

footer p{
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
    height: 10%;
    text-align: center !important;
    color: white !important;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: lighter !important;
    font-size: xx-small;
    padding-bottom: 2vh;
    font-weight: 700;
}

@media only screen and (max-aspect-ratio: 4/3){

    nav{
        height: 7.5vh;
    }

    .blur{
        height: 7.5vh;
    }

    nav ul{
        height: 7.5vh;
        line-height: 7.5vh !important;
    }

    nav ul li{
        height: 7.5vh;
        line-height: 7.5vh !important;
        font-size: x-small;
    }

    nav ul span{
        height: 7.5vh;
        line-height: 7.5vh !important;
    }

    .navlogo{
        height: 4.5vh;
    }   

    .loginlink button{
        max-height: 5.5vh;
        font-size: x-small;
    }

    .profilelink{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 3.5vh;
        line-height: 3.5vh;
    }

    footer form{
        height: 7vw;
        width: 40vw;
        font-size: 7px;
    }

    footer form input{
        height: 7vw;
        width: 80%;
        font-size: 7px;
    }

    footer form input::-webkit-input-placeholder {
        color: white;
        font-size: 7px;
      }
      footer form input::-moz-placeholder {
        color: white;
        font-size: 7px;
      }
      footer form input::-ms-input-placeholder {
        color: white;
        font-size: 7px;
      }
      footer form input::-moz-placeholder {
        color: white;
        font-size: 7px;
      }

    footer form button{
        height: 4.5vw;
        width: 4.5vw;
        margin-top: 1.25vw;
        margin-bottom: 1.25vw;
        margin-right: 1.25vw;
        font-size: 7px;
    }

    footer p{
        font-size: 7px;
    }

}

@media only screen and (max-width: 600px) {

    .mobileblock{
        display: none;
    }

    .mobileonly{
        display: block;
    }

    nav{
        height: 5vh;
        line-height: 5vh !important;
    }

    .blur{
        height: 5vh;
    }

    nav ul{
        padding: 0vw !important;
        height: 5vh;
        line-height: 5vh !important;
        justify-content: center;
    }

    .li5{
        padding-left: 5vw;
        padding-right: 5vw;
        height: 5vh;
        line-height: 5vh !important;
        width: 100vw !important;
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .li6{
        position: absolute;
        top: -100vh;
        left: -100vw;
    }

    .li5 span{
        height: 5vh;
        width: 5vw;
    }

    .li5 a{
        width: auto;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    .navlogo{
        height: 3vh;
    }

    #navmenuopener, #navmenucloser{
        height: 5vh;
        line-height: 5vh;
        width: 5vw;
        text-align: right;
        background-color: transparent;
        color: #4834d4;
        outline: none;
        border: none;
        font-size: 1.25rem;
        overflow: hidden;
        overflow: -moz-hidden-unscrollable;
    }

    #navmenuopener{
        display: block;
    }

    #navmenucloser{
        display: none;
    }

    #navmenu{
        display: none;
        width: 100%;
        height: auto;
        padding: 2em 3.5em 2em 3.5em;
        background-color: #222222;
        top: 5vh;
        left: 0;
        right: 0;
        text-align: center;
        overflow: hidden;
        z-index: 10;
        box-shadow: 0px 3px 10px 0px black;
    }

    @keyframes menuslide {

        from{
            transform: translateY(-40vh);
        }
        to{
            transform: translateY(0vh);
        }
        
    }

    @keyframes menudelete {

        from{
            display: block;
            transform: translateY(0vh);
        }
        to{
            display: none;
            transform: translateY(-40vh);
        }
        
    }

    #navmenu li{
        color: #fff;
        font-size: x-small;
        text-align: center;
    }

    .menuli1 p, button{
        display: inline-block;
    }

    .loginlink button{
        max-height: none;
        padding: .5em 3.5em .5em 3.5em;
    }

    .username{
        width: 18vw !important;
    }

    footer{
        text-align: center;
        height: 35vh;
    }

    footer ul{
        text-align: left !important;
        display: block;
        height: auto;
        width: 100vw !important;
        padding-bottom: 3.5vh;
    }

    footer section{
        height: auto;
        display: flex;
        justify-content: left;
        align-items: left;
        text-align: left;
        float: left;
        width: 100%;
    }

    footer form{
        width: 100%;
        overflow: hidden;
        padding: 2em;
    }

    footer form input{
        width: auto;
        padding: 1.5em 3em 1.5em 3em;
    }

    footer form button{
        height: 2.5em;
        width: 2.5em;
    }

}