* {
    font-family: "Bebas Neue", monospace !important;
}

body, html { 
    overflow-x: hidden; 
    overflow-y: hidden;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 100vw rgba(0, 0, 0, 0.9) inset;
    z-index: 2;
    pointer-events: none;
}

.flash-warning {
    font-weight: 700 !important;

    font-optical-sizing: auto;
    text-wrap: pretty;

    background-color: red;
    width: 100%;
    height: 100%;
    position: absolute;

    color: rgb(0, 242, 255);
    
    text-shadow: 0px 15px 500px black;

    /* filter: blur(2px);
    -webkit-filter: blur(2px); */

    z-index: 1;
    cursor: help;
}

.lambda {
    z-index: 2;
    font-size: var(--lambda-size);
    color: rgb(0, 242, 255);

    cursor: progress;

    animation: lambda-scale 0.15s infinite;
    -webkit-animation: 0.15s infinite lambda-scale;
    -moz-animation: 0.15s infinite lambda-scale;
}

.red-lambda {
    color: rgb(235, 10, 10) !important;
    scale: 1.2;
}

.main-box {
    background-color: red;
    width: 100%;
    height: 100%;
    position: absolute;
}

.lambda-over {
    font-size: calc(var(--lambda-size) + 3vh);

    animation: flash 0.1s infinite, flash_hue 2s alternate infinite;
    -webkit-animation: flash 0.1s infinite, flash_hue 2s alternate infinite;
    -moz-animation: flash 0.1s infinite, flash_hue 2s alternate infinite;

    /* filter: blur(2px) !important;
    -webkit-filter: blur(2px) !important; */
}

.lambda_scale {
    animation: lambda-scale 0.15s infinite;
    -webkit-animation: 0.15s infinite lambda-scale;
    -moz-animation: 0.15s infinite lambda-scale;
}

.flash-warning-text {
    font-size: 3rem !important;    
}

.main-box-text {
    color: rgb(0, 242, 255);
    text-shadow: 0px 15px 500px black;

    position: absolute;
    
    width: 100%;
    height: 100%;
}

.main-box-text-title::selection {
    background-color: red !important;
    text-decoration: none !important;
}

.main-box-text-title {
    font-size: 6vh !important;
    width: fit-content;
    
    display: block;
    margin-left: auto;
    margin-right: auto;

    padding: 1%;
}

.static-fixed {
    position: fixed;
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
}

.rotating-text {
    animation: rotate-around 3s infinite linear;
    -webkit-animation: rotate-around 3s infinite linear;
    -moz-animation: rotate-around 3s infinite linear;
}

.name {
    box-shadow: 0 0 4rem 4rem white inset, 0 0 3rem 3rem white;
    background-color: red;
    height: fit-content;
    width: fit-content;
    /* margin-top: 20%; */
}

.socials-button {
    position: absolute;
    bottom: 3vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    background-color: black;
}

.button {
    color: white;
    padding: 1vh !important;
    text-shadow: 0px 15px 500px cyan;
    
    cursor: pointer;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.button:hover {
    text-shadow: none;
    animation: button-blink 0.6s step-start 0s infinite;
    -webkit-animation: button-blink 0.6s step-start 0s infinite;
    -moz-animation: button-blink 0.6s step-start 0s infinite;
}

.projects-button {
    background-color: black;
}

.projects-grid {
    display: grid;
    gap: 2vh;
}

.projects-grid-element {
    border: black 2px solid;
    text-wrap: balance;
    padding: 5px;
    /* background-color: rgb(255, 0, 140); */
    background-color: black;
    /* max-width: 30vh; */
}

#shadow {
    background-color: black;
    pointer-events: none;
    width: 2rem;
    height: 2rem;

    position: absolute;

    border: 1px var(--lambda-pink) solid;

    z-index: 12;
}

.socials-box {
    font-size: 8vh;
    display: grid;
    gap: 2vh;
}

.socials-grid-element {
    background-color: black;
    width: 200vw;
}

a:visited {
    color: inherit;
}

a {
    color: inherit;
}

a:hover {
    scale: 1.1;
    animation: button-blink 0.6s step-start 0s infinite;   
}

.attributions {
    font-size: 1.7vh;
    color: white;
    position: absolute;

    bottom: 3vh;
    right: 3vh;
}

.copyright {
    font-size: 1.7vh;
    color: white;
    position: absolute;
    
    bottom: 3vh;
    left: 3vh;
}

@media screen and (max-width: 480px) {
    .projects-grid {
        font-size: 6vh;
    }
}