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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


@keyframes glow-screen {
    0%   { opacity: 0.6; }
    20%  { opacity: 0.7; }
    40% { opacity: 0.6; }
    60% { opacity: 0.7; }
    80% { opacity: 0.5; }
    100% { opacity: 0.6; }
}

@keyframes noise-screen {
    0%   { background-position-x: 0 }
    100%  { background-position-x: 5000% }
}

@keyframes pulse-box-shadow {
    0%   { box-shadow: 0 0 13px 0px #00fff347, 0 0 9px inset #00e7ff }
    50%   { box-shadow: 0 0 33px 10px #00fff347, 0 0 9px inset #00e7ff }
    100%  { box-shadow: 0 0 13px 0px #00fff347, 0 0 9px inset #00e7ff }
}

@keyframes news-line {
    0%   { margin-left: 0% }
    100%  { margin-left: -100% }
}

html, body {height: 100%; margin: 0;}
body {font-family: monospace, sans-serif; font-size: 20px; background-color: #111515; color: #e8e8e8; background: url("/images/background.png"); background-size: cover; background-position: center; display: flex; align-items: center; flex-direction: column;}
a {color: #e8e8e8; text-decoration: none;}
a:hover {text-decoration: underline;}
p {color: #b4b4b4; font-size: 15px; line-height: 1.25;}
p:not(:first-child) {margin-top: 15px;}
li {font-size: 15px; color: #b4b4b4;}
h1 {line-height: 1; margin-bottom: 20px; font-family: "Calibri Light"; color: #e7e7e7;}
h2 {font-size: 21px; color: #e7e7e7;}
p + h1, p + h2, p + h3 {margin-top: 20px;}

ol li {}
ol li span {border-bottom: 1px dashed; color: #55b1bd; cursor: pointer;}
ol li span:hover {border-color: transparent;}

.wrap {max-width: 1600px; width: 100%;}

img.logo {width: 200px; height: 200px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; -ms-interpolation-mode: nearest-neighbor; float: right; margin: 0 10% 10px 20px;}
.email {text-decoration: underline;}
.email:hover {text-decoration: none;}

.about video {float: right; width: 60%; margin: 0 0 10px 20px;}

.green {color: #95d53f;}
.red {color: #d70c0c;}
.blue {color: #55b1bd;}

.mid {font-size: 21px; font-family: "Calibri Light";}
.center {display: flex; justify-content: center; margin: 3% 0 -2%;}

.button {box-shadow: 0 0 33px 0px #00fff347, 0 0 9px inset #00e7ff; border-top: 1px solid #00f3ffb5; border-radius: 8px; padding: 10px 60px;  display: flex; align-items: center; text-align: center; font-size: 20px;  justify-content: center; cursor: pointer; font-family: "Segoe UI Light"; text-transform: uppercase; color: #85edff; text-shadow: 0 0 16px; white-space: nowrap; animation: pulse-box-shadow 2s infinite ease-in-out; transition: 250ms;}

.button:hover {transition: 400ms; transform: scale(1.10); text-decoration: none;}

nav {position: relative; text-transform: uppercase;  margin: 5%; display: flex; justify-content: center; z-index: 500;}
nav a {margin: 0 5%; color: #b4b4b4; display: flex; align-items: center;}
nav a:hover {color: #e7e7e7;}
nav a span {margin-left: 12px;}
nav a svg {margin-top: 1px;}

.wrapper {display: flex; justify-content: center; align-items: center; box-sizing: border-box; flex-direction: column;}

video {height: 100%; display: block;}

.tv-wrap {position: relative; margin: -11% 11% -12%;}

.news-wrap {position: absolute; bottom: 9%; left: 5%; overflow: hidden; font-family: Calibri;}
.breaking-news {background: red; white-space: nowrap; display: inline-block; color: #fff; text-transform: uppercase; padding: 0 1.3%; transform: skewX(-5deg);}
.news-line {background: #ffffff; color: #4e4e4e; white-space: nowrap; letter-spacing: -0.05rem; text-transform: uppercase; animation: news-line 9s infinite linear; padding-left: 511px;}
.news-line span {display: none;}

.tv {position: relative;}
.tv .noise {width: 100%; z-index: 99 !important; background: url("/images/tv/noise.png") repeat-x; background-size: contain; animation: noise-screen 300ms linear infinite; opacity: 0;}
.tv .screen {position: absolute; overflow: hidden; left: 26%; right: 36%; top: 27%; bottom: 27%; background: #323232; display: flex; justify-content: center; align-items: center;}
.tv img {position: relative; z-index: 100}
.tv .abs {position: absolute; z-index: 101; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0;}
.tv .glow-screen {animation: glow-screen 1s ease-in-out infinite; z-index: 102;}
.tv .glow-down {animation: glow-screen 1s ease-in-out infinite; animation-delay: 100ms; z-index: 103;}

.links {display: flex; align-items: center; justify-content: center; margin-bottom: 1%;}
.links > * {margin: 0 5%;}
.link {display: flex; align-items: center; color: #4d7281; transition: 800ms;}
.link:hover {color: #55b1bd; text-shadow: 0 0 10px #00e7ff; transition: 150ms; text-decoration: none;}
.link span {margin-left: 7px;}

.bottom-wrap {width: 100%; margin-top: 5%; display: flex; flex-direction: column; align-items: center;  z-index: 500; position: relative;}

.exchange {color: #b4b4b4; width: 100%; display: flex; flex-direction: row; justify-content: center; margin-bottom: 2%;}
.exchange > div {margin: 0 5%; white-space: nowrap;}
.exchange > div span {color: #55b1bd; font-family: "Segoe UI Light"; transition: 1500ms;}

.line {bottom: 14%; width: 70vw; height: 2px; margin: 2% auto; background: linear-gradient(to right, transparent, #ffffff4f, transparent);}

footer {font-size: 11px; margin-bottom: 1%; color: #6f6f6f;}
footer a {text-decoration: none; color: #6f6f6f;}
footer a:hover {text-decoration: underline; color: #e7e7e7;}

.price-glow {text-shadow: 0 0 13px #00fff3, 0 0 5px #00fff3;}


/* */
main {display: flex; flex-direction: column; align-items: center;}
main section {width: 60%;}

/* faq */
.faq-wrap {margin-top: 20px;}
.faq-wrap .item {border-radius: 10px; padding: 10px; background: #00000042; border: 1px dashed #ffffff40; font-size: 15px;}
.faq-wrap .item:not(:first-child) {margin-top: 10px;}
.faq-wrap .question {}
.faq-wrap .question span {cursor: pointer; color: #55b1bd; border-bottom: 1px dashed; line-height: 2; cursor: pointer;}
.faq-wrap .question span:hover {border-color: transparent;}
.faq-wrap .answer {overflow: hidden; transition: max-height 0.4s ease; max-height: 0;}

.faq-wrap a {color: #00fdff;}

/* dialog */
.bubble {position: absolute; left: 8%; top: 13%; color: #000; background: #fff; border: 2px solid #000; border-radius: 12px; padding: 16px 20px; font-family: Arial, cursive, sans-serif; font-size: 16px; line-height: 1.1; box-shadow: 3px 3px 0 #000; transform: scale(0); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center bottom;}
.bubble.active {transform: scale(1); opacity: 1;}
.bubble::before {content: ""; position: absolute; bottom: -20px; left: 40px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #fff; z-index: 1;}
.bubble::after {content: ""; position: absolute; bottom: -22px; left: 39px; width: 0; height: 0; border: 11px solid transparent; border-top-color: #000; z-index: 0;}
.bubble span {display: none;}
.bubble span.active {display: block;}