@import url('https://use.fontawesome.com/releases/v5.11.0/css/all.css');

@font-face {
    font-family: 'Monogram';
    src: url('./fonts/monogram.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    size-adjust: 200%;
}

@font-face {
    font-family: 'BestTen-DOT';
    src: url('./fonts/BestTen-DOT.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Link Highlighting */
a {
    color: #d9f8f4;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: blanchedalmond;
}


a[href^="http"]:after,
a[href^="//"]:after {
    margin: 0 0 0 10px;
    font-family: "Font Awesome 5 Free";
    content: '\f35d';
    font-weight: 900;
}

a[href^="https://derpynewbie.dev/pendulumer/"]:after {
    margin: inherit;
    font-family: inherit;
    content: '';
    font-weight: inherit;
}

header {
    font-family: "Monogram", "BestTen-DOT", sans-serif;
    font-size: 24px;
    max-font-size: 68px;
    min-font-size: 12px;
    background-color: #001c23;
    color: whitesmoke;
    padding: 10px 2rem;
    display: flex;

    a {
        color: whitesmoke;
    }

    .game-logo {
        height: 5rem;
    }
}

footer {
    font-family: "Monogram", "BestTen-DOT", sans-serif;
    font-size: 20px;
    background-color: #1d1d1d;
    color: whitesmoke;
    margin-top: 6rem;
    padding: 4rem;
}

body {
    font-family: "Monogram", "BestTen-DOT", sans-serif;
    font-size: 34px;
    max-font-size: 68px;
    min-font-size: 12px;
    background-color: #001c23;
    color: whitesmoke;
    margin: 0;

    iframe {
        width: 100%;
        aspect-ratio: 16/11;
        background-color: whitesmoke;
        border-radius: 10px;
        border: 15px whitesmoke solid;

        canvas {
            width: 480px;
            height: 480px;
        }

        margin: 2rem 0;
    }
}

.drop-shadow {
    filter: drop-shadow(6px 6px 4px #000000) drop-shadow(1px 1px 2px #000000);
}

.title-background {
    padding: 1rem 1rem 8rem 1rem;
    background-size: auto 40rem;
    background-repeat: repeat-x;
    background-position: top;
    background-origin: border-box;
    background-image: url('./img/background.png');
}

.content {
    filter: drop-shadow(0 0 0.75rem black);
    background-color: #151515bb;
    margin: 5rem auto;
    padding: 1rem 2rem;
    max-width: 75rem;
    align-content: center;
    border-radius: 2rem;
}

.main-section {
    padding: 0 20%;
    word-break: auto-phrase;

    h2 {
        display: flex;
        flex-direction: column;

        .title {
            font-size: 3rem;
        }

        .subtitle {
            font-size: 1.5rem;
        }
    }

    table {
        font-size: 1.5rem;
        border-collapse: collapse;
        border-radius: 4px;
        border: 4px solid whitesmoke;
        padding: 12px;

        th {
            background-color: #1d1d1d;
        }

        tr {
            /*border: whitesmoke 1px solid;*/
            padding: 4px 24px;
            background-color: #071f1e;

            td {
                padding: 8px 16px;
            }
        }

        tr:nth-of-type(2) {
            background-color: #071f14;
        }
    }
}

.game-desc {
    h1 {
        text-align: center;
    }
}

.flex {
    display: flex;
}

.margin-center {
    margin-left: auto;
    margin-right: auto;
}

.align-center {
    margin: auto;
    align-content: center;
    align-self: center;
    justify-content: center;
}

.align-center-text {
    align-content: center;
    align-self: center;
    justify-content: center;
    text-align: center;
}

.align-right {
    align-content: flex-end;
    align-self: flex-end;
    justify-content: right;
    text-align: right;
}

.h-layout {
    display: flex;
    flex: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.game-logo {
    height: 15rem;
    width: auto;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-img {
    max-width: 28rem;
    height: min-content;
    margin: 1rem 3rem;
    background-clip: content-box;
    border: 4px solid white;
    border-radius: 4px;
}

.anchor-left {
    text-anchor: start;
    margin: auto auto auto 0;
}

.anchor-right {
    display: flex;
    justify-content: right;
    text-anchor: end;
    margin: auto 0 auto auto;
}

.button {
    flex-grow: 1;
    max-width: 440px;
    min-width: 300px;
    margin: 1rem .5rem;
    padding: 0;
    width: 10rem;
    height: 5rem;
    font-size: 1.5rem;
    flex-basis: 440px;
    border-radius: 2rem;
    list-style: none;
    filter: drop-shadow(0 0 0.75rem black);
    display: inline-block;
    position: relative;
    color: #f6fffd;
    background-image: radial-gradient(circle, rgb(38, 29, 33, 1) 0%, rgb(63, 42, 52) 100%);
    z-index: 100;

    &:before {
        transition: opacity .3s;
        content: '';
        border-radius: inherit;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
        background-image: radial-gradient(circle, rgb(253, 197, 218) 0%, rgb(253, 197, 242) 100%);
        position: absolute;
        opacity: 0;
        z-index: -100;
    }

    &:hover {
        &:before {
            opacity: 1;
            transition: opacity .1s;
        }
    }

    a {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
}