@font-face {
    font-family: 'clashregular';
    src: url("../fonts/clash-regular-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal; 
}
*{
    --white: #efefef;
    --black: #323232;
    transition:all ease-in-out 300ms;
    cursor: url(../cursors/arrow.cur),auto;
}
img{
    max-width: 100vw;
}
body{
    overflow-x:hidden;
    padding:0;margin:0;
    text-align: center;
    font-family: 'clashregular';
    background-size:5%;
    background-attachment: fixed;
}
h1, h2{
    font-family: 'clashregular';
}
h1{
    font-size:3rem;
}
h2{
    font-size:2.2rem;
}
nav{
    position:fixed;
    inset: 5px 2px auto 2px;
    background: linear-gradient(to right, #333a, rgba(255, 255, 255, 0.467), #333a);
    z-index: 1000;
    border-radius: 8.5px;
    box-shadow: 10px 10px 10px #1116, -10px -10px 10px #1116;
    padding-top:5px;
    --homeWidth:40px;
    --ulWidth:100%;
}
nav, .home{
    box-shadow: 10px 10px 10px #1116, -10px -10px 10px #1116;
}
.home{
    position:fixed;
    left:0;
    bottom:0;
    border-top-right-radius: 100%;
    padding:40px 56.5px 30px 10px;
    background-color:rgba(206, 206, 206, 0.667);
    text-align: left;
}
.home img{
    transition: all ease-in-out 900ms;
}
.home:hover{
    background-color: var(--white);
}
.home:hover img{
    rotate:360deg;
}
nav ul{
    display:flex;
    justify-content: space-evenly;
    padding:0;
    width: var(--ulWidth);
}
nav ul{
    list-style: none;
}
nav ul li{
    display:inline-block;
    width:123.79px;
}
nav a{
    color:#111;
    text-decoration: none;
    cursor:pointer;
}
nav:hover a{
    color:var(--white) !important;
}
#navblurer{
    position:fixed;
    inset:0;
    z-index:500;
    width:100vw;height:100vh;
    background-color:#0005;
    display:none;
}
main{
    min-height: 100vh;
}
header{
    color:var(--white);
    min-height: 100vh;
    min-width:100vw;
    display:flex;
    justify-content: center;
    flex-direction: column;
    padding-top:50px;
}
footer{
    background-color:var(--black);
    color:var(--white);
    margin-bottom:-20px;
    padding:20px;
    user-select: none;
}
footer a{
    color:inherit;
    text-decoration: none;
}

footer ul{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
}
footer ul li{
    display:inline-grid;
    grid-template-areas: 'div div';
    border-radius:8px;
    border:1px solid #000;
    background-color:#000;
    width:255px;
}
footer ul li:hover .left{
    rotate:360deg;
}
footer ul li .left{
    font-size:40px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding-left:10px;
    transition: rotate ease-in-out 500ms !important;
}
footer ul li .right{
    padding: 0 20px;
    text-align: left;
}
#mobileDashes{
    display:none;
}

/* Mobile layout */
@media screen and (max-width:600px) {
    nav{
        display:none;
        position:fixed;
        inset:0;
        z-index: 1000;
        background:#333;
        border-radius: 0;
    }
    nav ul li{
        display:block;
    }
    nav ul li a{
        color:var(--white) !important;
    }
    footer ul{
        flex-direction: column;
        height:16em;
    }
    #mobileDashes{
        display:block;
        text-align:right;
        font-size:30px;
        width:max-content;
        position:fixed;
        right:10px;
        background:transparent;
    }
}