header{
    margin: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-self: center;
    background-image: url(../media/obsidian.jpg);
    background-position: top left;
    background-size: 2000px;
}

header > div{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80%;
    color: var(--gold);
    flex: 0 1 100%;
    align-items: center;
    justify-content: center;
    row-gap: 5vh;
    align-self: center;
}

header > div > a{
    text-align: center;
    padding: 10px 20px;
    box-shadow: 0 0 0 transparent;
    border-radius: 100px;
    font-size: 20pt;
    transition: text-shadow 0.2s ease-in-out, box-shadow 0.2s ease-out;
}

header > div > a:hover{
    box-shadow: 0 0 8px 5px var(--gold);
}

p#intro{
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: 4em;

    background: linear-gradient(110deg, var(--gold) 49%, var(--white) 51%, var(--gold) 53%);
    background-size: 4000px;
    background-position: right;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Playfair Display', serif;
}

#diamonddecoration{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    max-width: 90vw;
    max-height: 90vw;
    transform: rotate(45deg);
    margin: auto;
    width: 650px;
    height: 650px;
    box-shadow: inset 0 0 10px 10px var(--gold);
    background-color: black;
    z-index: -1;
}

div#hp{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "tales taleslink taleslink"
                         "skillslink skillslink skills"
                         "progress progresslink progresslink"
                         "contactslink contactslink contacts";
    padding: 10vh 0;
    width: 80%;
    align-self: center;
    row-gap: 30px;
    column-gap: 10vw;
}


div#hp > h1{
    margin: 0;
    font-size: 2em;
    background-image: repeating-linear-gradient(110deg, var(--gold) 49%, var(--white) 51%, var(--gold) 53%);
    background-size: 3000px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    align-self: center;
}

h1#tales{
    grid-area: tales;
}

h1#skills{
    grid-area: skills;
}

h1#progress{
    grid-area: progress;
}

h1#contact{
    grid-area: contacts;
}

div#hp > h1 > p{
    background-clip: unset;
    -webkit-text-fill-color: currentColor;

    color: var(--white);
    font-size: 14pt;
}

a.redirects, div.redirects{
    border-radius: 100px 0 100px 0;
    height: 50vh;
    display: grid;
    grid-template-columns: 1fr;
}

a.redirects > img{
    position: relative;
    z-index: -1;
    grid-column-start: 1;
    grid-row-start: 1;
}

a#tales{
    grid-area: taleslink;
}

a#tales > img#xeno{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a#tales > img#oblisk{
    max-width: 30%;
    object-fit: cover;
    top: 45%;
    left: 15%;

    z-index: 1;
    transform: rotate(20deg);
}

a#tales > img#video{
    max-width: 35%;
    object-fit: cover;

    top: 20%;
    left: 20%;
    z-index: 0;
    transform: rotate(-30deg);
}

a#skills{
    grid-area: skillslink;
}

a#skills > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a#progress{
    grid-area: progresslink;
}

a#progress > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

div#contact{
    grid-template-columns: 1fr 1fr;
    grid-area: contactslink;
    overflow: visible;
    place-items: center;
}

div#contact > a{
    box-shadow: 0 0 5px var(--white),
                0 0 7px var(--white),
                0 0 10px var(--white),
                0 0 12px var(--white),
                0 0 16px var(--white),
                0 0 50px var(--white);
    transition: box-shadow 0.15s ease-in-out, filter 0.2s ease;

    border-radius: 10px;

    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: var(--white);
}

div#contact > a > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


@media screen and (max-width: 820px){
    a#tales > img#oblisk, a#tales > img#video{
        max-width: calc(150px + 25%);
    }
}

@media screen and (max-width: 1000px){

    header{
        background-image: linear-gradient(to top, transparent 20%, var(--black) 35%, var(--black) 65%, transparent 80%), url(../media/obsidian.jpg);
    }
    
    div#hp{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 0.5fr 0.75fr);
        grid-template-areas: "tales"
                             "taleslink"
                             "skills"
                             "skillslink"
                             "progress"
                             "progresslink"
                             "contacts"
                             "contactslink";
        padding: 10vh 0;
        width: 90%;
        column-gap: 3vw;
    }

    div#hp > h1{
        align-self: self-end;
    }

    #diamonddecoration{
        display: none;
    }
}