/* What a world we live in, CSS doing some download bullshittery. */
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Some colours and what-not. */
:root{
    --pretty-violet-thingy: #d1c4e9;
    --moody-background-thingy: rgba(39, 39, 47, 1);

    --shine-degree: 120deg;
    --shine-color: rgba(255, 255, 255, 0.2);
    --shine-effect: linear-gradient(
        var(--shine-degree),
        transparent,
        var(--shine-color),
        transparent
    );
    --shine-transition: all 0.65s ease-in-out;
}

/* Dark mode, stop burning your eyeballs. */
body {
    background-color: rgba(39, 39, 47, 1);
    color: var(--pretty-violet-thingy);

    /*  Google tries to throw you down this re-usable, horrific, lovecraftian setup of making a FONT class that can be applied to things. 
        You heard correct, a FONT CLASS.
        Insane... WHAT ARE WE DOING? Just set your sites font and tweak as and when required. 
        What is it with this re-usable styling stuff. You can't polish something as shit as CSS, just use it as it is and man/woman up! */
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
          "wdth" 100;
}

/* CSS reset appears to reset all header sizes. Which is great, isn't it. I didn't want my h1 to be different from my h2 or anything, to be honest. Lovely. */
h1 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
    background: var(--pretty-violet-thingy);
    color: var(--moody-background-thingy);
    padding: .5em 1em;
    border-radius: 4px;
    font-size: .8em;

    position: relative;
    overflow: hidden;
    transition: .2s;
}

a:hover{
    transition: .2s;
    filter: brightness(90%) saturate(2);
}

a::before{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    /* transform: translateX(-100px) skewX(-15deg); */
    animation: oooh-shiny 4s ease-in-out forwards infinite;
}

a::after{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    width: 30px;
    height: 100%;
    top: 0;
    filter: blur(5px);
    /* transform: translateX(-100px) skewX(-15deg); */
    animation: oooh-shiny 4s ease-in-out forwards infinite;
}

.bordered{
    border-radius: 15px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    transition: .4s;
}

.bordered:hover{
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
    transition: .4s;
}

.img{
    position: relative;
    overflow: hidden;
    transition: .4s;
}

.img img{
    display: block;
    width: 800px;
 }

.img:hover{
    transform: scale(1.05);
    transition: .4s;
}

.img::after{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.02);
    width: 400px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    /* transform: translateX(-100px) skewX(-15deg); */
    animation: oooh-shiny-two 8s ease-in-out forwards infinite;
}

.p-1{
    padding: 1em;
}

.p-2{
    padding: 2em;
}

.mb-2{
    margin-bottom: 2em;
}

.mt-2{
    margin-top: 2em;
}

@keyframes oooh-shiny {
    0%{
        transform: translateX(-100px) skewX(-15deg);
    }
    100%{
        transform: translateX(300px) skewX(-15deg);
    }
}

@keyframes oooh-shiny-two {
    0%{
        transform: translateX(-500px) skewX(-30deg);
    }
    100%{
        transform: translateX(1200px) skewX(-30deg);
    }
}

/* -------------------------------------- STUPID FLEX RE-USABLE CLASS SETUP STUFF BECAUSE CSS IS HORRIBLE. --------------------------------------*/
/* I wish the whole flex setup malarkey could just be, like, one keyword that I could paste around without all this stuff. */
/* Because now I have to make all of this re-usable stuff which shifts the character count over to HTML instead of just making life better here in CSS. So now my CSS is shit, and also my HTML looks horrible. Cheers to the web demons, who probably hold their spoons like toddlers. */
.flex-col {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 2em;
}

.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 2em;
}

.flex-lg-row{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 2em;
}

.purple-back{
    background: var(--pretty-violet-thingy);
}

.dark-back{
    background: var(--moody-background-thingy);
}

.half-gap{
    gap: 1em;
}

.qua-gap{
    gap: .5em;
}

.sep-gap{
    gap: 1px;
}

.align-start{
    align-items: start;
}

.align-stretch{
    align-items: stretch !important;
}

.justify-start{
    justify-content: start;
}

.center{
    justify-content: center !important;
    align-items: center !important;
}

.no-gap{
    gap: 0;
}

.grow{
    flex: 1 1 0;
}

.no-grow{
    flex-grow: 0;
}

.fw{
    width: 100%;
}

.fh{
    height: 100%;
}
/* -------------------------------------- STUPID FLEX RE-USABLE CLASS SETUP STUFF BECAUSE CSS IS HORRIBLE. --------------------------------------*/

/* This is the main page container, only because I don't like working directly on the body component much. Gives me the ick seeing styling, outside of resets, being applied directly to elements. Grim... */
.page-container{
    width: 100%;
    overflow-x: hidden;
}

.page-container .obviously-the-header{
    padding-top: 2em;
}

.pen-info{
    padding: 2em 16em;
    text-align: center;
    line-height: 1.25em;
    align-self: stretch;
}

.vs{
    width: 2px;
    background: var(--pretty-violet-thingy);
}

.pen-info p{
    color: #e9e5f0;
    font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    font-size: .75em;
}

@media only screen and (max-width: 1700px) {
    .pen-info{
        padding: 2em 4em;
    }
}

@media only screen and (max-width: 1000px) {
    .pen-info{
        padding: 2em 2em;
    }
    .flex-lg-row{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        gap: 1px;
    }

    .vs{
        height: 1px;
        background: var(--pretty-violet-thingy);
    }

    .img img{
        width: 100%;
    }

    .img{
        width: 100%;
        margin: 0 2em;
    }

    .img:hover{
        transform: scale(1);
        transition: .4s;
    }

    .obviously-the-header{
        gap: 1em;
    }
}