/*? global clearing */
*,
html,
body {
    text-indent: 2%;
    margin: auto;
    margin-bottom: 1%;
    padding: 0;
    box-sizing: border-box;
    background: none;
    color: white;
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    z-index: 2;
    position: relative;
}

@keyframes backgroundAnim {
    0% {background: linear-gradient(56deg, rgba(0, 146, 183, 0.5), rgba(0, 0, 0, 0.9));}
    5%,10%,15%,20%,25%,30%,
    33% {background: linear-gradient(182deg, rgba(0, 53, 166, 0.5), rgba(0, 0, 0, 0.8));}
    66% {background: linear-gradient(324deg, rgba(77, 1, 164, 0.5), rgba(0, 0, 0, 1));}
    100% {background:linear-gradient(7deg, rgba(162, 0, 176, 0.5), rgba(0, 0, 0, 0.7));}
}

#html {
    width: 100%;
    height: 100%;
    background: black;
}

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 90deg;
}

#everything {
    --angle: 90deg;
    top:0;
    box-sizing: border-box;
    width: 90vw;
    height: 100vh;
    margin:0;
    margin-left: 5vw;
    margin-bottom:-100vh;
    padding:0;
    z-index: 1;
    background: linear-gradient(var(--angle), rgba(255, 0, 255, .62), rgba(0, 255, 255, .62));
    position: sticky;
    overflow: clip;

    /* background: linear-gradient(56deg, rgba(0, 146, 183, 0.5), rgba(0, 0, 0, 0.9));
    backdrop-filter: blur(100px);
    background-blend-mode: screen; */
    border-radius: 30%;
    box-shadow:
    0 0 40px #ffffff77,
    -40px 0 160px #ff00ffbb,
    40px 0 160px #00ffffbb,
    inset 0 0 200px #ffffff77,
    inset 100px 0 320px #ff00ff99,
    inset -100px 0 320px #00ffff99,
    inset 100px 0 1200px #ff00ff99,
    inset -100px 0 1200px #00ffff99;

    animation: pulsate 30s linear infinite;


    filter: blur(6vw); 

    
}

@keyframes pulsate {
    50% {
      box-shadow:
        0 0 40px #ffffff77,
        40px 0 160px #ff00ffbb,
        -40px 0 320px #00ffffbb,
        inset 0 0 200px #ffffff77,
        inset -100px 0 320px #ff00ff99,
        inset 100px 0 200px #00ffff99,
        inset -100px 0 1200px #ff00ff99,
        inset 100px 0 1200px #00ffff99;

        --angle: 270deg;
    }
  }



head {
    padding: 0.5%
}

header {
    font-family:'Courier New', Courier, monospace;
    font-weight: lighter;
    background: none;
}

h1, h2 {
    text-align: center;
    padding: .75%;
    text-transform: uppercase;
    margin:auto;
    background-size: cover;
}

span {
    display: inline;
    padding: 0;
    margin: 0;
}

.mainTitle {
    font-size: xxx-large;
}

p {
    max-width: 75vw;
    z-index: 5;
}



a {
    color: hsl(180, 90%, 60%);
    font-weight: 800;
    font-variant: small-caps;
    border-radius: .5em;
    padding:.1em .1em;
    animation: link-color 30s ease-in infinite;
}

@keyframes link-color {
    30% {
        color: hsl(275, 100%, 75%);

    }
    45% {
        color: hsl(300, 90%, 60%);
    }
    80% {
        color: hsl(205, 100%, 75%);
    }

}

a.button{
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #FFFFFF;
    margin:0 0.3em 0.3em 0;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.2s;
    background-color: #00000000;
    animation: none;
    }

a.button:hover{
    color:#000000;
    background-color:#FFFFFF;
}
@media all and (max-width:30em){
    a.button{
    display:block;
    margin:0.4em auto;
    }
}


.foot {
    bottom:0;
    margin:.5%;
    position: fixed;
    width:20%
    }

span.language {
    background-color: #bb00bb;
    border-radius: 10em;
    padding: .1em .4em;
    font-size: small;
    margin: 0em .1em;
}

a.website {
    background-color: #00bbbb;
    border-radius: 10em;
    padding: .1em .4em;
    font-size: small;
    margin: 0em .1em;
    color: #FFFFFF;
    animation: none;
    font-variant: normal;
    font-size: small;
    font-weight: normal;
}




ul {
    padding-left: 2em;
    margin-top: 1%;
}

li {
    text-indent: 0;
    max-width: 70vw;
}