@font-face {
    font-family: zen-maru;
    src: url("../media/ZenMaruGothic-Regular.ttf");
}

/* GENERAL */

html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
	overflow: hidden;
    height: 100vh;
    background-color: #000000;
    animation: 6s ease-in-out 0s alternate infinite colorshift;
    -webkit-animation: 6s ease-in-out 0s alternate infinite colorshift;
}

#vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 20vw rgba(0, 0, 0, 0.6) inset;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 1;
    animation: 6s ease-in-out alternate infinite brightshift;
}

a {
    text-decoration: none;
    color: #883737;
}

a:hover {
    text-decoration: underline;
}

/* CENTER CARD */

#center-card {
    position: absolute;

    width: 45vh;
    height: 60vh;
    min-width: 300px;
    min-height: 400px;
    max-width: 60vw;
    max-height: 80vw;

    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    background-color: #ffffff;
    border-radius: 0.6vh;
    animation: 2s ease-out 0s 1 slideup;
    opacity: 0.5;
    box-shadow: -0.4vh 0.4vh 0.3vh rgba(0, 0, 0, 0.5);
    align-items: center;

}
/* 
#center-card:hover {
    -webkit-transform: translate(-50%, -50%) translateY(-0.4vw);
    transform: translate(-50%, -50%) translateY(-0.4vw);
    box-shadow: -0.9vw 1.1vw 0.3vw rgba(0, 0, 0, 0.5);
} */

/* INSIDE CARD */

* {
    font-family: zen-maru;
}

/* #title {
    color:#ffffff;
    text-align:center;
    height: auto;
    mix-blend-mode: exclusion;
}

#title h1 {
    margin: 0;
    animation: 2s ease-in-out 0s 1 slidedown;
}

#title span{
    display: inline-block;
} */



#separator {
    width: auto;
    height: 0.3vh;
    background-color: #000000;
    margin: 10px 20px;
    border-radius: 2px;
}

#card-content {
    /* transform: translateY(-48px); */
    padding-top: 20vh;
}

#card-content p {
    /* font-size: 24px; */
    /* font-size: min(2.7vh, 3.4vw); */
    /* font-weight: bold; */
    /* padding: 0 3vw 6px; */
    margin: 0;
}

h2 {
    margin: 0;
    text-align: center;
    font-weight: normal;
}

/* FOOTER */

footer {
    position: absolute;
    width: inherit;
    padding: 1vh;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

}

footer a {
    display: inline-block;
}

#links {
    background-color: #ffffff;
    margin-bottom: 4px;
    width: auto;
    margin: 1.5vh auto 0;
    display: inline-block;
    height: auto;
}

#links a {
    white-space: nowrap;
}

#tag {
    position: absolute;
    transform: translate(-50%, 15%);
    z-index: -1;
    transition: 0.15s;
}

#discord:hover + #tag {
    transform: translate(-172%, 15%);
}


#email {
    position: absolute;
    transform: translate(-105%, 15%);
    z-index: -1;
    transition: 0.15s;
}

#mail:hover + #email {
    transform: translate(10%, 15%);
}

.icon {
    transition: 0.15s ease-out;
    aspect-ratio: 1;
    margin: 0.5%;
    z-index: 10;
}

.icon:hover {
    transform: translate(0.2vh, -0.2vh);
    filter: drop-shadow(-0.2vh 0.2vh 0 #9c9c9c);
}

@keyframes slidedown {
    0% {
        transform: translateY(-3vh);
    }
    20% {
        transform: translateY(-3vh);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes slideup {
    0% {
        margin-top: 2vh;
        opacity: 0;
    }

    20% {
        margin-top: 2vh;
        opacity: 0;
    }

    100% {
        margin-top: 0;
        opacity: 0.5
    }
}

@keyframes colorshift {
    0% {
        background-color: rgb(44, 14, 10);
    }
    100% {
        background-color: rgb(77, 25, 17);
    }
}

@keyframes brightshift {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(0.4);
    }
}