* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
}

body {
    background-color: #111111;
    margin: 0;
    overflow-x: hidden;
    font-family: "Orbitron", "Courier New", monospace;
    color: red;
    min-height: 100vh;
}

/* NOISE BACKGROUND */
.bg {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
    background-repeat: repeat;
    animation: bg-animation .2s infinite;
    opacity: .9;
    visibility: visible;
    z-index: 0;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

/* MAIN CONTAINER - INVISIBLE */
.maincontainer {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    min-height: 100vh;
    z-index: 1;
}

/* GO BACK BUTTON */
nav {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 100;
}

nav a {
    color: red !important;
    text-decoration: none;
    border: 2px solid red;
    background: black;
    padding: 10px 20px;
    font-weight: bold;
    font-family: "Audiowide", "Courier New", monospace;
    transition: all 0.2s ease-in-out;
    position: relative;
    display: inline-block;
}

nav a:visited {
    color: red !important;
}

@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 3px red) drop-shadow(0 0 6px red);
    }
    50% {
        filter: drop-shadow(0 0 6px red) drop-shadow(0 0 12px red);
    }
}

nav a:hover {
    background: #111111; 
    color: red !important; 
    transform: translateY(-3px);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

/* ACTIVE BUTTON WITH GLITCH */
nav a.active {
    background: #111111;
    color: red !important;
    transform: translateY(-2px);
    animation: pulseGlow 3s ease-in-out infinite alternate;
}

nav a.active::before,
nav a.active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: black;
}

nav a.active.glitch {
    animation: navShake 0.5s ease-in-out, pulseGlow 3s ease-in-out infinite alternate;
}

nav a.active.glitch::before {
    animation: navTearLeft 0.5s ease-in-out;
    color: #ff00ff;
    z-index: 1;
}

nav a.active.glitch::after {
    animation: navTearRight 0.5s ease-in-out;
    color: #00ffff;
    z-index: 2;
}

@keyframes navShake {
    0%, 100% { transform: translateY(-2px) translate(0, 0); }
    10% { transform: translateY(-2px) translate(-2px, 0); }
    20% { transform: translateY(-2px) translate(2px, 0); }
    30% { transform: translateY(-2px) translate(-1px, 0); }
    40% { transform: translateY(-2px) translate(3px, 0); }
    50% { transform: translateY(-2px) translate(-2px, 0); }
    60% { transform: translateY(-2px) translate(1px, 0); }
    70% { transform: translateY(-2px) translate(-3px, 0); }
    80% { transform: translateY(-2px) translate(2px, 0); }
    90% { transform: translateY(-2px) translate(-1px, 0); }
}

@keyframes navTearLeft {
    0%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateX(0); }
    5% { opacity: 0.8; clip-path: inset(23% 0 67% 0); transform: translateX(-8px); }
    15% { opacity: 0.7; clip-path: inset(61% 0 12% 0); transform: translateX(-5px); }
    25% { opacity: 0.9; clip-path: inset(8% 0 88% 0); transform: translateX(-10px); }
    35% { opacity: 0.6; clip-path: inset(47% 0 31% 0); transform: translateX(-6px); }
    45% { opacity: 0.8; clip-path: inset(72% 0 15% 0); transform: translateX(-9px); }
    55% { opacity: 0.7; clip-path: inset(19% 0 73% 0); transform: translateX(-7px); }
    65% { opacity: 0.9; clip-path: inset(54% 0 28% 0); transform: translateX(-11px); }
    75% { opacity: 0.6; clip-path: inset(33% 0 59% 0); transform: translateX(-5px); }
    85% { opacity: 0.8; clip-path: inset(68% 0 7% 0); transform: translateX(-8px); }
    95% { opacity: 0.5; clip-path: inset(11% 0 81% 0); transform: translateX(-4px); }
}

@keyframes navTearRight {
    0%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateX(0); }
    8% { opacity: 0.7; clip-path: inset(41% 0 48% 0); transform: translateX(7px); }
    18% { opacity: 0.9; clip-path: inset(77% 0 9% 0); transform: translateX(9px); }
    28% { opacity: 0.6; clip-path: inset(14% 0 79% 0); transform: translateX(5px); }
    38% { opacity: 0.8; clip-path: inset(52% 0 36% 0); transform: translateX(11px); }
    48% { opacity: 0.7; clip-path: inset(29% 0 64% 0); transform: translateX(6px); }
    58% { opacity: 0.9; clip-path: inset(66% 0 18% 0); transform: translateX(10px); }
    68% { opacity: 0.6; clip-path: inset(7% 0 86% 0); transform: translateX(8px); }
    78% { opacity: 0.8; clip-path: inset(44% 0 42% 0); transform: translateX(7px); }
    88% { opacity: 0.7; clip-path: inset(81% 0 3% 0); transform: translateX(9px); }
    98% { opacity: 0.5; clip-path: inset(26% 0 68% 0); transform: translateX(4px); }
}

.noisebutton {
    position: fixed;
    top: 97px;
    left: 30px;
    color: red;
    border: 2px solid red;
    background: black;
    padding: 10px 20px;
    font-weight: bold;
    font-family: "Audiowide", "Courier New", monospace;
    transition: all 0.2s ease-in-out;
    z-index: 100;
    font-size: 12px;
}

.noisebutton:hover{
    background: #111111;
    transform: translateY(-3px);
    filter: drop-shadow(0 0 6px red);
}

/* CONTENT AREA */
main {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.titlebox {
    position: absolute;
    text-align: center;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
}


.emailbox {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: 615px;
    left: 1169px;
    transform: translateX(-50%);
}

.instabox {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: 675px;
    left: 50%;
    transform: translateX(-50%);
}

.bskybox {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: 615px;
    left: 3%;
    transform: translateX(-50%);
}

.citiesbox {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: 370px;
    left: -336px;
}

.randobox {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: 370px;
    left: 982px;
    cursor: pointer;
}

.speechbubble {
    position: absolute;
    background: transparent;
    border: none;
    padding: 30px;
    top: -71px;
    left: 1268px;
}

/* appear on hover stuff */

.emailbox,
.instabox,
.bskybox,
.citiesbox,
.randobox {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.emailbox:hover,
.instabox:hover,
.bskybox:hover,
.citiesbox:hover,
.randobox:hover,
.emailbox.revealed,
.instabox.revealed,
.bskybox.revealed,
.citiesbox.revealed,
.randobox.revealed {
    opacity: 1;
}

/* FOOTER */
footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    color: red;
    background: transparent;
    font-size: 8px;
    font-weight: bold;
    text-align: center;
}