@font-face {
    font-family: "distorted";
    src: url("fonts/A_Font_with_Serifs.ttf");
}


* {
    box-sizing: border-box;
}

body {
    user-select: none;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: 
    radial-gradient(transparent 1%, #000000 100%) fixed,
    url("img/pat.png") center center/500px fixed,
    #242138;
    font-size: 20px;
    color: #bac3bd;
}

h1{
    position: relative;
    font-family: distorted, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 65px;
    font-weight: bold;
    letter-spacing: -3px;
    margin: -15px;
    color: #688d6f;
    filter: drop-shadow(0 0 0.3px #688d6f) drop-shadow(0.3px 0 0 #688d6f) drop-shadow(0 0 55px #000000);
    animation: letters 0.3s ease-in 1;
    transform: rotateX(-20deg);
}

h1:first-letter{
    letter-spacing: -8px;
}

@keyframes letters{
    0% { letter-spacing: -3px; }
    100% { letter-spacing: -1px; }
}

.shadow{
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    background: url("img/shadow.png") center 400px/3000px no-repeat;
    animation: infinite shadow 70s ease-in-out;
    filter: blur(8px);
}

@keyframes shadow {
    0% { background-position: center 400px; opacity: 0.3; filter: blur(8px); }
    50% { background-position: center 150px; opacity: 0.1; filter: blur(15px); }
    100% { background-position: center 400px; opacity: 0.3; filter: blur(8px); }
}

.backdropBlur{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    backdrop-filter: blur(10px);
    mask-image: linear-gradient(to top, transparent 40%, black 100%), linear-gradient(to bottom, transparent 40%, black 100%);
}

.cardContainer{
    /* only made this one for potential animation but nah */
}

main{
    z-index: 3;
    width: 100%;
    height: 100vh;
    position: relative;
}

.content {
    margin-top: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: #bac3bd;
}

.card{
    border-radius: 25px;
    color: #8a968e;
    width: 440px;
    height: 600px;
    margin: 0 auto;
    background: url("img/cardbackdrop.png") center center no-repeat;
    filter: drop-shadow(0 0 20px #000000B3);

    animation: drop 0.3s ease-in 1;
    opacity: 1;
}

@keyframes drop {
    0% { margin-top: -900px; opacity: 0; }
    55% { margin-top: 25px; opacity: 1; }
    100% { margin-top: 0px; }
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    padding: 0 55px;
}

a{
    transition: 0.5s linear(0, 0.94 17%, 1.15 24% 30%, 0.98 51%, 1);
    text-decoration: none;
    color: #45724d;
}

.link{
    display: inline-block;
    width: 60px;
    height: 60px;
    font-size: 40px;
    color: #45724d;
    text-align: center;
    &:hover{
        rotate: 3deg;
        transform: scale(160%);
        filter: drop-shadow(-1px 9px 2px #00000082);
    }
}

.contactTag{
    border-radius: 5px;
    background-color: #45724d;
    color: #141615;
    display: inline-block;
    padding: 5px;
    margin: 0 1px;
    transform: scale(80%);
}

.logo-goetia{
    transition: 0.5s linear(0, 0.94 17%, 1.15 24% 30%, 0.98 51%, 1);
    margin: 0px auto;
    width: 239px;
    height: 91px;
    background: url("img/logo-goetia.png") center center no-repeat;
    &:hover{
        transform: scale(105%);
        filter: drop-shadow(-1px 9px 2px #00000082);
    }
}

.mail u{
    color: #45724d;
}

footer{
    opacity: 0.5;
    margin: 35px 0;
    color: #5f6861;
    font-size: 15px;
}

footer a{
    &:hover{
        filter: brightness(160%);
    }
}