@-moz-keyframes blink { to { visibility: hidden; } }
@-webkit-keyframes blink { to { visibility: hidden; } }
@-o-keyframes blink { to { visibility: hidden; } }
@keyframes blink { to { visibility: hidden; } }

@keyframes waka {
    0% {}
    50% { transform: rotate(0); }
    100% {}
}

/* GLOBAL RESETS & SCROLLBAR */
html {
    scrollbar-color: #00152c #024d70;
    scrollbar-width: thin;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: "Press Start 2P", cursive;
    color: white;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #00152c;
    
    /* Perfect layered background pinned to the body so it never breaks on scroll */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        linear-gradient(to bottom, rgba(0, 21, 44, 1) 0%, rgba(0, 21, 44, 0) 15%, rgba(0, 21, 44, 0) 85%, rgba(0, 21, 44, 1) 100%),
        linear-gradient(to right, rgba(0, 21, 44, 1) 0%, rgba(0, 21, 44, 0) 15%, rgba(0, 21, 44, 0) 85%, rgba(0, 21, 44, 1) 100%),
        url("images/gamer_0wn3d_territory_cover3.jpg");
        
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* RESPONSIVE IMAGES & VIDEOS */
img, video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* HERO SECTION */
.hero {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.hero h1 {
    font-size: clamp(1.5em, 5vw, 3em);
    margin-top: 0;
    margin-bottom: 1em;
}

.hero h2 {
    font-size: clamp(1em, 3vw, 2em);
    margin-top: 0;
    margin-bottom: 1em;
}

/* TYPOGRAPHY */
h1, h2, h3 {
    font-family: "Press Start 2P", cursive;
    color: #fff;
    text-align: center;
}

h1 {
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

h2 {
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

h3 {
    text-shadow: -1px 0 0 #fdff2a, -3px 0 0 #df4a42, 1px 0 0 #91fcfe, 3px 0 0 #4405fc;
}

.fancy-text {
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    margin: auto;
    padding-top: 20px;
    font-size: clamp(12px, 3vw, 20px);
    line-height: 1.5;
    letter-spacing: 5px;
    text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe, 4px 0 0 #4405fc;
    animation: blink 2s steps(4, start) infinite;
}

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

/* MAIN LAYOUT - Mobile First */
main {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

aside {
    width: 100%;
    margin-bottom: 40px;
}

article {
    width: 100%;
}

article h2 {
    padding: 20px 0 0 0;
}

/* MEDIA QUERY FOR DESKTOP */
@media (min-width: 768px) {
    main {
        flex-direction: row;
        padding: 50px;
    }
    aside {
        width: 25%;
        margin-bottom: 0;
    }
    article {
        width: 70%;
        margin-left: 5%;
    }
}

/* PAGINATION & PACMAN */
.pagination {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    --ddim: 10px;
    --rd: 15px;
    --rdim: calc(var(--rd) * 2);
    --pm: #ffff03;
    margin-bottom: 45px;
    width: 100%;
}

label {
    content: "";
    margin: 5px 10px;
    height: var(--ddim);
    width: var(--ddim);
    background: whitesmoke;
    cursor: pointer;
    box-shadow: -1px 0 0 #fdff2a, -2px 0 0 #df4a42, 1px 0 0 #91fcfe, 2px 0 0 #4405fc;
}

input {
    display: none;
}

.pacman {
    content: "";
    position: absolute;
    top: calc(-1 * var(--ddim));
    left: calc(-1 * var(--ddim) / 2);
    height: var(--rdim);
    width: var(--rdim);
    transition: transform 250ms linear;
}

.pacman:before {
    content: "";
    position: absolute;
    height: var(--rd);
    width: var(--rdim);
    left: 0;
    background: var(--pm);
    transition: inherit;
    top: 0;
    border-top-left-radius: var(--rdim);
    border-top-right-radius: var(--rdim);
    transform-origin: bottom center;
    transform: rotate(-45deg);
}

.pacman:after {
    content: "";
    position: absolute;
    height: var(--rd);
    width: var(--rdim);
    left: 0;
    background: var(--pm);
    transition: inherit;
    bottom: 0;
    border-bottom-left-radius: var(--rdim);
    border-bottom-right-radius: var(--rdim);
    transform-origin: top center;
    transform: rotate(45deg);
}

input[type="radio"]:hover ~ .pacman:before { animation: waka 500ms infinite; }
input[type="radio"]:hover ~ .pacman:after { animation: waka 500ms infinite; }

input[id="dot-1"]:checked ~ .pacman { transform: translateX(var(--ddim)); }
input[id="dot-2"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim))); }
input[id="dot-3"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 2)); }
input[id="dot-4"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 3)); }
input[id="dot-5"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 4)); }
input[id="dot-6"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 5)); }
input[id="dot-7"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 6)); }
input[id="dot-8"]:checked ~ .pacman { transform: translateX(calc(var(--ddim) + var(--rdim) * 7)); }

/* LINKS & TAGS */
a {
    color: #2e6c77;
    text-decoration: none;
    word-wrap: break-word;
}

a:hover { cursor: pointer; color: #011527; }
a:active { color: #024d70; }
a:visited { color: #01071a; }

figcaption {
    margin-top: -10px;
    padding: 20px;
    text-shadow: -1px 0 0 #fdff2a, -3px 0 0 #df4a42, 1px 0 0 #91fcfe, 3px 0 0 #4405fc;
    animation: blink 2.5s steps(4, start) infinite;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.article-tags .tag {
    background: whitesmoke;
    display: inline-block;
    position: relative;
    font-size: clamp(10px, 2vw, 15px);
    padding: 10px;
    font-family: "Press Start 2P", cursive;
    text-decoration: none;
    color: white;
    box-shadow: inset -1px 0 0 #fdff2a, -2px 3px 0 #df4a42, 1px 0 0 #91fcfe, 2px 0 0 #4405fc;
}

.article-tags .tag:after {
    left: -6px;
    top: 0;
    border-left: 6px black solid;
    border-right: 6px black solid;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
}

.article-tags .tag:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
}