@font-face {
    font-family: 'Lexend';    
    font-weight: 1 999;
    src: url('/fonts/lexend.ttf') format('truetype');
}

html {
    font-family:'Lexend', sans-serif;
    background: var(--bg-color);
    color: var(--body-color);
    user-select: none;
    height: 100%;
    width: 100%;

}

:root {



    
    --bg: #3a2e36;
    --text:#1A1B41;
    --body:#ffe7f5;
    --hover:#ff2b4e;
    --active:#c92b40;
    --hover-text:#ff6673;
    
    --highlight:aliceblue;

    --active-text:aliceblue;



    --transparent:#ffe66d00;

    --shadow:#1A1B417F;

    --body-color: rgb(255, 225, 231);

    --init-button-hover-color:rgba(157, 140, 255, 0);

    --dark-shadow:rgba(0, 0, 0, 0.514);
    --recess:rgba(255, 255, 255, 0.514);



    --bg-color: var(--bg);

    /*--body-accent:#75DBCD;*/

    --bg-grid: 50px 50px;

    --button-bg: var(--hover-text);


    --bg-gradient: 
      linear-gradient(0deg,transparent 47%, rgba(255, 255, 255, 0.05) 47%,rgba(255, 255, 255, 0.05) 53%,transparent 53%),
      linear-gradient(90deg,transparent 47%,   rgba(255, 255, 255, 0.05) 47%,rgba(255, 255, 255, 0.05) 53%,transparent 53%);/*linear-gradient(338deg, #5465FF 0%, #8b97ff 100%);*/
    --nav-mobile-bg-gradient: var(--button-bg);/*linear-gradient(185deg, hsl(320, 100%, 85%) 0%,hsl(17, 100%, 83%) 20%,hsl(44, 100%, 87%) 40%,hsl(97, 100%, 94%) 60%,hsl(165, 100%, 91%) 80%, rgb(184, 229, 255) 100%)*/;
    --nav-desktop-bg:  var(--button-bg);/*linear-gradient(185deg, hsl(320, 100%, 72%) 0%,hsl(17, 100%, 71%) 20%,hsl(44, 100%, 76%) 40%,hsl(98, 100%, 90%) 60%,hsl(165, 100%, 78%) 80%, rgb(35, 149, 214) 100%);*/
    --nav-shadow-color: var(--hover-text);

    --nav-button-color: var(--text);
    --nav-button-border-color: var(--transparent);
    --nav-button-bg-color:  var(--init-button-hover-color);

    --nav-button-hover-color: var(#F4CBC6);
    --nav-button-hover-border-color: var(--hover);
    --nav-button-hover-bg-color: var(--hover);

    --nav-button-active-color:  var(--active-text);
    --nav-button-active-border-color: ar(--active);
    --nav-button-active-bg-color: var(--active);

    --nav-border-color:  var(--button-bg);

    --contact-button-color: var(--body);
    --contact-button-border-color: var(--body);
    --contact-button-bg-color: var(--transparent);

    --contact-button-hover-color: #1A1B41;
    --contact-button-hover-shadow-color: var(--hover-text);
    --contact-button-hover-border-color: var(--hover-text);
    --contact-button-hover-bg-color: var(--hover-text);

    --contact-button-active-color: var(--highlight);
    --contact-button-active-border-color: var(--hover);
    --contact-button-active-bg-color: var(--hover);

    --expand-dong-color: var(--text);

    --nav-item-shadow-color: var(--dark-shadow);
    --contact-button-shadow-color: var(--hover-text);
    --contact-button-shadow-active-color: var(--hover);

    --button-recess-color:  var(--dark-shadow);
    --box-recess-color: var(--recess);
    --box-border-color: var(--recess);
  }


@media only screen and (orientation: portrait) {
    .woop {
        /*transform: rotate(90deg);*/
        writing-mode: vertical-rl;
        text-orientation: upright !important;
        letter-spacing: -1.5rem;
        font-size: 4em;
        top:0px;

    }
    
    .woop:hover {

    letter-spacing: -0.95rem !important;
    transition: letter-spacing 0.5s cubic-bezier(0, .95, .26, 1), font-weight 0.5s cubic-bezier(0, .95, .26, 1);
    font-weight: 900;
}
    nav{
        
    bottom: 0;
    }
    nav-list {
        display: table-column !important;
        /*transform: translateX(calc(-50vw + 80px));*/
        transition: all 0.25s cubic-bezier(.79,.21,.15,.95);
    }

    nav-list.active {
        display: table-column !important;
        transform: translateY(0px);
        width: 90%;
    }

    nav-list>a:not(.current) {
        display: none;

    }

    nav-list.active>a:not(.current) {
        display: inline;

    }

    nav {
        transition: all 0.25s cubic-bezier(.79,.21,.15,.95);
        height: 10%;
        width: calc(100% - 26px) !important;
        background:  var(--nav-mobile-bg-gradient)!important;
        border: var(--nav-border-color) 3px solid;
    }

    nav.active {
        display: inline-flex;
        transform: translateY(0px);
        height: calc(60% - 26px);
    }

    hero>h1 {
        font-size: 80px;
        white-space: nowrap;
    }

    .container {
        overflow: auto;
    }

    .container.box {

        box-shadow: 0px 10px 30px -10px var(--box-recess-color);
        border: var(--box-border-color) 1px solid !important;
        padding: 1em;
        border-radius: 3px;
        color:var(--body-color);
    }

    nav-item:hover {
        background-color: var(--nav-button-hover-bg-color);
        color: var(--nav-button-hover-color);
        padding: 20px 60px;
        border-radius: 5px;
        font-weight: 900;
        transition: all 0.25s cubic-bezier(.79,.21,.15,.95);
        border: var(--nav-button-hover-border-color) solid 1px;

    }

    nav-item:active {
        background-color: var(--nav-button-active-bg-color);
        color: var(--nav-button-active-color);
        padding: 20px 60px;
        border-radius: 5px;
        border: var(--nav-button-active-border-color) solid 1px;
        font-weight: 900;
        box-shadow: 0px 10px 30px -10px var(--button-recess-color) inset;
        transition: all 0.25s cubic-bezier(.79,.21,.15,.95);

    }

    hero-container
    {
        
        align-items: stretch;
    }

    content-container
    {
        display:block;
        align-items: stretch;
    }

    contactscontainer {
        line-height: 1cm;
    }

    stuffscontainer {
        line-height: 1cm;
    }
    stuffscontainer>h1 {
        line-height: 1.5cm;
    }

    contactbutton {
        display: block !important;
        text-align: center;
        white-space: normal;
        padding: 0.25em 1em !important;
    }
    banner{
        top: 20px;
        font-size:1em;
        /*line-height: 2em;*/
    }
    banner > toppart{
        color:hsla(51, 100%, 50%, 1);
    }   

    hideonmobile
    {
        display: none;
    }
}
/*

AMONG US


*/
@media only screen and (orientation: landscape) {

    .hamburgerBTN {
        display: none !important;
    }
    showonmobile
    {
        display: none;
    }
    banner{
        
    font-size:1.5em;
        bottom: 20px;
            
    text-shadow: 
    hsla(51, 100%, 50%, 1) 0px 2px 0px,
    hsla(51, 100%, 50%, 1) 2px 0px 0px,
    hsla(51, 100%, 50%, 1) 0px -2px 0px,
    hsla(51, 100%, 50%, 1) -2px 0px  0px,
    hsla(51, 100%, 50%, 1) 2px 2px 0px,
    hsla(51, 100%, 50%, 1) 2px -2px 0px,
    hsla(51, 100%, 50%, 1) -2px -2px 0px,
    hsla(51, 100%, 50%, 1) -2px 2px  0px;
    }
    nav{
        
        top: 0;
    }
    hero>h1 {
        font-size: 120px;
        white-space: nowrap;
    }
    hero-container
    {
        
        align-items: center;
        
    }
    .container{
    margin-top: 150px;
    }
    contactscontainer {

        line-height: 2cm;
    }

    contactbutton {
        white-space: nowrap;
    }

}

/* 

all oethere

*/


body {
    height: calc(100% - 5px);
    width: 100%;
    margin: 0px;
}


::-webkit-scrollbar
{
    width:10px;
    border-radius: 100em;

}
::-webkit-scrollbar-thumb
{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100em;
}
a.link{
    border-bottom: var(--body-color) 1px solid;
}
a.link.source{
    border-bottom: var(--body-color) 1px solid;
    font-size:0.5em;
}
.navlink {
    text-decoration: none;
    margin: 20px;
}

.hamburgerBTN {
    font-family: 'Rubik';
    position: fixed;
    font-weight: 100;
    height: 48px;
    width: 48px;
    bottom: 10px;
    right: 10px;
    font-size: 1.5rem;
    padding: 10px;
    height: 20px;
    width: 20px;
    color: var(--expand-dong-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(.79,.21,.15,.95);
}


.hamburgerBTN.active {
    transform: rotate(405deg);
    font-size: 1.5rem;
    font-weight: 500;
    color:var(--hover);
}



nav {
    background: var(--nav-desktop-bg);
    color: var(--nav-button-color);
    position: fixed;
    /*mix-blend-mode: hard-light;
    backdrop-filter: blur(10px);*/
    height: 80px;
    left: 0;
    min-height: 50px;
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    white-space: nowrap;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px -10px var(--nav-shadow-color);
    transition: all 1.0s cubic-bezier(0, .95, .26, 1);

}

nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    white-space: nowrap;


}
lol-container
{
    height:calc(100vh - 160px);
    display:flex;
}


nav-item {
    height: 100%;
    color: var(--nav-button-color);
    background-color: var(--nav-button-bg-color);
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    transition: all 0.5s cubic-bezier(0, .95, .26, 1);
    border: var(--nav-button-border-color) solid 1px;

}

nav-item:hover {
    background-color: var(--nav-button-hover-bg-color);
    color: var(--nav-button-hover-color);
    padding: 20px 60px;
    border-radius: 5px;
    font-weight: 900;
    transition: all 0.5s cubic-bezier(0, .95, .26, 1);
    border: var(--nav-button-hover-border-color) solid 1px;

}

nav-item:active {
    background-color: var(--nav-button-active-bg-color);
    color: var(--nav-button-active-color);
    padding: 20px 60px;
    border-radius: 5px;
    font-weight: 900;
    box-shadow: 0px 10px 30px -10px var(--nav-item-shadow-color) inset;
    transition: all 0.5s cubic-bezier(0, .95, .26, 1);
    border: var(--nav-button-active-border-color) solid 1px;

}

.container {
    margin: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 180px);
    z-index: 3 !important;
    overflow: auto;
}

hero-container {
    background-size:  var(--bg-grid)!important;
    background: var(--bg-gradient);
    background-size: cover;
    background-position: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: var(--body-color);
    display: flex;
    justify-content: center;
    z-index: 0;
    position: absolute;

}

a {
    color: var(--body-color);
    text-decoration: none;
}

contactbutton {
    display:inline;
    background-color: var(--contact-button-bg-color);
    border: var(--contact-button-border-color) 1px solid;
    padding: 1em;
    border-radius: 3px;
    margin: 0.2em;
    user-select: none;
    -webkit-user-drag: none;
    color: var(--contact-button-color);
    transition: all 0.25s cubic-bezier(.67, .27, .31, .86);
}
contactbutton>svg.audius
{
    fill:var(--contact-button-color);
    transition: all 0.25s cubic-bezier(.67, .27, .31, .86);
    width:24px;
    height:24px;
}
contactbutton:hover>svg.audius
{
    fill:var(--contact-button-hover-color);
}
contactbutton:hover {
    border: var(--contact-button-hover-border-color) 1px solid;
    border-radius: 5px;
    margin: 0.2em;
    background: var(--contact-button-hover-bg-color);
    color: var(--contact-button-hover-color);
    transform: translateY(-6px);
    box-shadow: 0px 10px 20px -5px var(--contact-button-shadow-color);
}

contactbutton:active {
    border: var(--contact-button-active-border-color) 1px solid;
    border-radius: 7px;
    margin: 0.2em;
    color: var(--contact-button-active-color);
    background: var(--contact-button-active-bg-color);
    box-shadow: 0px 10px 20px -5px var(--contact-button-shadow-active-color);

}

hero {

    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    transition: transform 1.5s cubic-bezier(0, .95, .26, 1);

}

h2 {
    font-size: 4rem;
}

.woop {
    margin: 10px;
    transition: all .5s cubic-bezier(1, 0, .6, 1);
    font-weight: 400;
    z-index: 20;
}

.woop:hover {

    letter-spacing: 1rem;
    transition: letter-spacing 0.5s cubic-bezier(0, .95, .26, 1), font-weight 0.5s cubic-bezier(0, .95, .26, 1);
    font-weight: 900;
}


spacefix {
    width: 100%;
    height: calc(100% - 10px);
    display: inline-block;
    z-index: 0;
}

paragraphcontainer{
    font-size: 1.5em;
}

stuffsep{
    margin-bottom:2em;
    /*border-bottom: var(--body-color) 2px solid;*/
}

stuffsep a{
    font-weight: 700;
}

banner{
    transition: color 0.5s cubic-bezier(.17,.67,.1,1),
    padding 0.25s cubic-bezier(.17,.67,.1,1),
    background-color 0.5s cubic-bezier(.17,.67,.1,1),
    filter 0.5s cubic-bezier(.17,.67,.1,1),
    border 0.5s cubic-bezier(.17,.67,.1,1),
    transform 0.25s cubic-bezier(.17,.67,.1,1),
    box-shadow 0.25s cubic-bezier(.17,.67,.1,1),
    font-weight 0.5s cubic-bezier(.17,.67,.1,1);
    position:absolute;
    font-weight: 900;
    left:19px;
    display:block;
    width: calc(100% - 106px);
    border-radius: 20px;
    background: linear-gradient(180deg, hsla(211, 100%, 36%, 1) 50%, hsla(51, 100%, 50%, 1) 50%);
    padding: 30px;
    color: hsla(211, 100%, 36%, 1);
    box-shadow: 0px 7px 0px 0px hsla(211, 100%, 36%, 1);

    background-size: contain;
    border:3px hsla(211, 100%, 36%, 1) solid;
    text-align: center;
    filter:  saturate(0.9);
}

banner:hover{
    
    filter: saturate(1);
    transform:translateY(-7px);
    box-shadow: 0px 14px 0px 0px hsla(211, 100%, 36%, 1);
}
banner:active{
    
    transform:translateY(3px);
    border:3px hsla(51, 100%, 50%, 1) solid;
    box-shadow: 0px 4px 0px 0px hsla(211, 100%, 36%, 1);
}
banner > a{
    transition: color 0.5s cubic-bezier(.17,.67,.1,1),
    padding 0.25s cubic-bezier(.17,.67,.1,1),
    background-color 0.5s cubic-bezier(.17,.67,.1,1),
    filter 0.5s cubic-bezier(.17,.67,.1,1),
    transform 0.25s cubic-bezier(.17,.67,.1,1),
    box-shadow 0.25s cubic-bezier(.17,.67,.1,1),
    font-weight 0.5s cubic-bezier(.17,.67,.1,1);
    text-shadow: none;
    padding:10px 10px;
    border-radius: 10px;
    background-blend-mode: hard-light;
    background-color: rgb(255, 217, 0);
    border:2px hsla(211, 100%, 36%, 1) solid;
    color: rgb(0, 89, 184);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: inline-flex;
    transform:translateY(-2px);
    box-shadow: 0px 7px 0px 0px hsla(211, 100%, 36%, 1);
    /*text-decoration:underline;*/
    
}

banner > a:hover{
    
    background-color: hsla(211, 100%, 36%, 1);
    color: rgb(255, 217, 0);
    border:2px rgb(255, 217, 0) solid;
    padding:10px 50px;
    font-weight: 800;
}

banner > a:active{
    transform:translateY(3px);
    box-shadow: 0px 2px 0px 0px hsla(211, 100%, 36%, 1);
    /*transform: scaleX(-1) rotateY(180deg);*/
}

jumbo{
    font-size: 4em;
}
large{
    font-size: 2em;
}

centerbold
{
    position: absolute;
    margin:auto;
    display: block;
    transform: rotate(7deg);
    top:40vh;
    font-weight: 700;
    font-size: 2em;
}

.flicker
{
    animation: flicker 1.75s,wiggle 4s cubic-bezier(.7,0,.3,1);
    animation-iteration-count: infinite;
}
@keyframes flicker {
        
    0% { opacity:   0.5;}
    20% { opacity:  0.75;}
    30% { opacity:  0.65;}
    50% { opacity:  0.24;}
    70% { opacity:  0.75;}
    80% { opacity:  0.3;}
    100% { opacity: 0.5;}
}
@keyframes wiggle {
        
    0% { transform: rotate(7deg);}
    50% { transform: rotate(-7deg);}
    100% { transform: rotate(7deg);}
}

linkhome
{
    font-size: 2em;
    font-variant: small-caps;
    position: absolute;
    bottom:20vh;
    text-decoration: underline;
    transition: all 0.5s ease;
}
linkhome>a
{
    transition: all 0.5s ease;
    font-weight: 400;
}
linkhome>a:hover
{
    color:#ff2b4e;
    font-weight: 800;
}