html {
    display: table;
    margin: auto;
    min-height: 100%;
    width: 100%;
    background-color: #70381b;
    background-image: url(../images/textures/wine-cork.png);
    background-image: url(../images/textures/wine-cork.png), linear-gradient(90deg, #301406 0%, #70381b 20%, #70381b 80%, #301406 100%);
}

body {
    min-width: 1200px;
    vertical-align: middle;
    margin: 0px;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes headerswing {
    0% {
        transform: rotate(-2deg)
    }
    50% {
        transform: rotate(2deg)
    }
    100% {
        transform:r otate(-2deg)
    }
}

.headerText {
    width: 250px;
    background-color: white;
    transform: rotate(-2deg);
    font-family: "Gycentium Popwell";
    padding: 10px;
    font-size: 80px;
    text-align: center;
    animation-name: headerswing;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: 50% 10%;
    outline-style: dashed;
    outline-color: lightgrey;
    outline-width: 4px;
    background-image: url(../images/textures/handmade-paper.png);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));
}

.introductory {
    padding-left: 180px;
    padding-right: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about {
    transform: rotate(1deg);
    font-family: "Comic Relief";
    font-size: 25px;
    line-height: 35px;
    width: 55%;
    height: 100%;
    padding: 30px;
    background-color: white;
    outline-style: dotted;
    outline-color: lightgrey;
    outline-width: 4px;
    background: repeating-linear-gradient(0deg, white, white 34px, lightblue 34px, lightblue 35px);
    background-image: url(../images/textures/handmade-paper.png), repeating-linear-gradient(0deg, white, white 34px, lightblue 34px, lightblue 35px);
    background-position-y: 5px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
}

.pic {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 50px;
    background-color: white;
    outline-style: solid;
    outline-color: lightgrey;
    outline-width: 3px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.tape {
    font-family: "Gycentium Popwell";
    font-size: 50px;
    color: darkred;
    width: fit-content;
    height: fit-content;
    padding: 11px 60px;
    background: pink;
    background: linear-gradient(0deg, pink 5%, white 6%, pink 7%, pink 93%, white 94%, pink 95%);
    clip-path: polygon(
        0% 0%,
        4px 10%,
        0% 20%,
        4px 30%,
        0% 40%,
        4px 50%,
        0% 60%,
        4px 70%,
        0% 80%,
        4px 90%,
        0% 100%,

        100% 100%,
        calc(100% - 4px) 90%,
        100% 80%,
        calc(100% - 4px) 70%,
        100% 60%,
        calc(100% - 4px) 50%,
        100% 40%,
        calc(100% - 4px) 30%,
        100% 20%,
        calc(100% - 4px) 10%,
        100% 0%
    );
}

.socialsHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: "Gycentium Popwell";
    font-size: 130px;
    text-shadow:
        -4px -4px 0 #fff,
        0   -4px 0 #fff,
        4px -4px 0 #fff,
        4px  0   0 #fff,
        4px  4px 0 #fff,
        0    4px 0 #fff,
        -4px  4px 0 #fff,
        -4px  0   0 #fff;
}

.socials {
    width: fit-content;
    height: 240px;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #5a1f00;
    background-image: url(../images/textures/cardboard-flat.png);
    border-radius: 140px;
    box-shadow: inset 2px 2px 2px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
}

.socialsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));
}

.socialButtonIcon {
    width: 112px;
    height: 112px;
}

.socialButtonPad {
    padding-left: 25px;
}

.socialButton {
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 128px;
    /* yoinked from https://css-shape.com/squircle/ */
    --r: 50%; /* between 0% [square] and 50% [squircle] (you can use pixel as well) */

    --_r: clamp(0%,var(--r)/2,25%);
    --_v: calc(var(--_r)*(1 - sqrt(2)/4));
    --_p: calc(var(--_v) - var(--_r)/2);
    clip-path: shape(
        from var(--_v) var(--_p),
        curve to 50% 0 with var(--_r) 0,
        curve to calc(100% - var(--_v)) var(--_p) with calc(100% - var(--_r)) 0,
        curve to calc(100% - var(--_p)) var(--_v) with calc(100% - 2*var(--_p)) calc(2*var(--_p)),
        curve to 100% 50% with 100% var(--_r),
        curve to calc(100% - var(--_p)) calc(100% - var(--_v)) with 100% calc(100% - var(--_r)),
        curve to calc(100% - var(--_v)) calc(100% - var(--_p)) with calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)),
        curve to 50% 100% with calc(100% - var(--_r)) 100%,
        curve to var(--_v) calc(100% - var(--_p)) with var(--_r) 100%,
        curve to var(--_p) calc(100% - var(--_v)) with calc(2*var(--_p)) calc(100% - 2*var(--_p)),
        curve to 0 50% with 0 calc(100% - var(--_r)),
        curve to var(--_p) var(--_v) with 0 var(--_r),
        curve to var(--_v) var(--_p) with calc(2*var(--_p)) calc(2*var(--_p))
    );

    background-color: #5a1f00;
    background-image: url(../images/textures/cardboard-flat.png);
    transition: .2s;
    border-radius: 38px;
    box-shadow: inset 2px 2px 2px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
}

.socialButtonContainer {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
}

.socialButtonContainerShadow {
    transition: .2s;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));
    &:hover {
        .socialButton {
            transform: rotate(3deg) scale(1.2);
        }
        filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.2));
    }
    &:active {
        .socialButton {
            transform: rotate(-2deg) scale(0.9);
        }
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
    }
}

.works {
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workSegment {
    font-family: "Comic Relief";
    font-size: 30px;
    width: fit-content;
    height: fit-content;
    padding: 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #8f6453;
    background-image: url(../images/textures/handmade-paper.png);
    border-radius: 3px;
    box-shadow: inset 2px 2px 0px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));
}

.workTitle {
    white-space: nowrap;
    font-family: "Gycentium Popwell";
    font-size: 80px;
    text-shadow:
        -4px -4px 0 #fff,
        0   -4px 0 #fff,
        4px -4px 0 #fff,
        4px  0   0 #fff,
        4px  4px 0 #fff,
        0    4px 0 #fff,
        -4px  4px 0 #fff,
        -4px  0   0 #fff;
    text-decoration: underline;
    padding-bottom: 30px;
}

.workStack {
    padding-top: 60px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.workButton {
    font-family: "Gycentium Popwell";
    font-size: 60px;
    color: black;
    text-decoration: underline dotted;
    text-decoration-color: black;
    width: fit-content;
    height: fit-content;
    padding: 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: lightpink;
    background-image: url(../images/textures/handmade-paper.png);
    box-shadow: inset 2px 2px 0px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
    &:hover {
        outline-style: dashed;
        outline-color: white;
        outline-width: 4px;
    }
}

.workHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: "Gycentium Popwell";
    font-size: 100px;
    text-shadow:
        -4px -4px 0 #fff,
        0   -4px 0 #fff,
        4px -4px 0 #fff,
        4px  0   0 #fff,
        4px  4px 0 #fff,
        0    4px 0 #fff,
        -4px  4px 0 #fff,
        -4px  0   0 #fff;
}

.workDesc {
    font-family: "Gycentium Popwell";
    font-size: 40px;
    line-height: 33px;
    color: black;
    width: 700px;
    height: fit-content;
    padding: 25px 25px;

    background-color: white;
    background-image: url(../images/textures/handmade-paper.png), repeating-linear-gradient(0deg, white, white 32px, lightblue 32px, lightblue 33px);
    background-position: 0px 5px;
    box-shadow: inset 2px 2px 0px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
    :a {
        text-decoration: underline;
        text-decoration-color: black;
    }
}

.gameContainer {
    padding: 30px 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.gameThumb {
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 20px;
    background-color: white;
    outline-style: solid;
    outline-color: lightgrey;
    outline-width: 3px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.gameDesc {
    font-family: "Gycentium Popwell";
    font-size: 30px;
    line-height: 28px;
    color: black;
    width: 500px;
    height: fit-content;
    padding: 25px 25px;

    background: repeating-linear-gradient(0deg, white, white 27px, lightblue 27px, lightblue 28px);
    background-image: url(../images/textures/handmade-paper.png), repeating-linear-gradient(0deg, white, white 27px, lightblue 27px, lightblue 28px);
    box-shadow: inset 2px 2px 0px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
    :a {
        text-decoration: underline;
        text-decoration-color: black;
    }
}

.gameDescContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gameLink {
    font-family: "Gycentium Popwell";
    font-size: 30px;
    color: black;
    text-decoration: underline dotted;
    text-decoration-color: black;
    width: fit-content;
    height: fit-content;
    padding: 7px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: lightPink;
    background-image: url(../images/textures/handmade-paper.png);
    box-shadow: inset 2px 2px 0px rgba(256, 256, 256, 0.4), inset -2px -2px 2px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); /* stupid workaround for stupid bullshit that I can't be bothered to properly fix */
    &:hover {
        z-index: 1;
        outline-style: dashed;
        outline-color: white;
        outline-width: 4px;
    }
}

.gameLinkContainer {
    min-width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
}

.footer {
    color: black;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    border-radius: 90px 90px 0px 0px;
    background-color: #5a1f00;
    background-image: url(../images/textures/cardboard-flat.png);
    box-shadow: inset 2px 2px 2px rgba(256, 256, 256, 0.4), inset -2px 0px 2px rgba(0, 0, 0, 0.4), 4px 4px 4px rgba(0, 0, 0, 0.4);
    :a {
        color: white;
        text-decoration: underline;
        text-decoration-color: black;
    }
}

.footerText {
    font-family: "Comic Relief";
    font-size: 17px;
}

.footerText.outline {
    text-shadow:
        -1px -1px 0 #fff,
        0   -1px 0 #fff,
        1px -1px 0 #fff,
        1px  0   0 #fff,
        1px  1px 0 #fff,
        0    1px 0 #fff,
        -1px  1px 0 #fff,
        -1px  0   0 #fff;
}

a {
    color: white;
    text-decoration: underline dotted;
}