/* Normalize.css */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Global styles
   ========================================================================== */

html {
    font-size: 62.5%;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; /* Fixes bolding effect of light text on dark background */
    font-display: swap;
}
body {
    background: #1f1639;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.3;
    color: #b2adb9;
}
@media (max-width: 1000px) {
    body {
        font-size: 1.8rem;
    }
}
@media (max-width: 700px) {
    body {
        font-size: 1.53rem;
    }
}

*,
*::before,
*::after {
    z-index: 1;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove blue outline on click
 */

*,
*::before,
*::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*
 * Style the scrollbar (webkit only)
 */

*::-webkit-scrollbar-track
{
    width: 2px;
    border: 1px inset #19132f;
    background-color: rgba(255,255,255,0.1);
}

*::-webkit-scrollbar
{
    width: 4px;
    background-color: rgba(255,255,255,0.25);
}

*::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: rgba(255,255,255,0.4);
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: rgba(255,255,255,0.4);
    text-shadow: none;
}
::selection {
    background: rgba(255,255,255,0.4);
    text-shadow: none;
}

/*
 * remove blue highlight on focus
 */

*:focus {
    outline: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Project styles
   ========================================================================== */

/* 
 * TYPOGRAPHY
 * Based on Sakura.css v1.0.0 | https://github.com/oxalorg/sakura
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    line-height: 1.1;
    font-weight: 300;
    color: white;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
h1 {
    font-size: 10em;
    font-weight: 800;
    color: #2a2340;
    line-height: 0.9;
    text-transform: uppercase;
    margin-top: 0.1em;
}
h1:last-of-type {
    margin-top: 0;
}
h2 {
    font-size: 2.8em;
    font-weight: 400;
    letter-spacing: 0.02em;
}
h1 + h2 {
    margin-top: -1.3em;
}
h3 {
    font-size: 1.4em;
    margin-top: 0.5em;
}
@media screen and (max-width: 870px) {
    h1 {
        font-size: 18vw;
    }
    h2 {
        font-size: 6vw;
    }
    h1 + h2 {
        margin-top: 0;
    }
    h3 {
        font-size: 1em;
        line-height: 1.4;
    }
}
h4 {
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}
h5 {
    font-size: 0.6em;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: center;
    margin-top: 0.4em;
}
h6 {
    font-size: 1.00em;
}

small,
sub,
sup {
    font-size: 40%;
    font-family: sans-serif;
    line-height: 0;
    position: relative; /* Makes browsers position the sup/sup properly, relative to the surrounding text */
    vertical-align: baseline;
}
sup {
    top: -1.1em;
}

hr {
    border-top: 2px solid #4d4d4d;
    border-radius: 1px;
}
article, .article hr {
    color: #808080;
    border-width: 0 0 3px;
    border-style: solid;
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="20" height="4"><circle fill="#808080" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
    width: 40px;
}

p > a {
    color: inherit;
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip: ink;
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
}
p > a:hover {
    color: white;
    background: rgba(255,255,255,0.4);
    text-decoration: none;
}
sup > a::after {
    content: "";
    margin-left: 0;
}

ul {
    padding-left: 1.4em;
}
li {
    margin-bottom: 0.4em;
}

blockquote {
    font-style: italic;
    margin-left: 1.5em;
    padding-left: 1em;
    border-left: 3px solid #4d4d4d;
    border-radius: 3px;
}

/* Set inline images to column width */

img {
    max-width: 100%;
}

/* Pre and code */

pre {
    color: white;
    background-color: rgba(255,255,255,0.4);
    display: block;
    border-radius: 8px;
    padding: 1em 1.5em;
    overflow-x: auto;
}
code {
    color: white;
    font-size: 0.9em;
    padding: 0 0.2em;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.4);
    white-space: pre-wrap;
}
pre > code {
    padding: 0;
    background-color: transparent;
    white-space: pre;
    border-radius: none;
}

/* Tables */

table {
    text-align: justify;
    width: 100%;
    border-collapse: collapse;
}
td,
th {
    padding: 0.5em;
    border-bottom: 1px solid #f2f2f2;
}

/* Buttons, forms and input */

input,
textarea {
    border: 1px solid #4d4d4d;
}
input:focus,
textarea:focus {
    border: 1px solid #4d4d4d;
}
textarea {
    width: 100%;
}
textarea,
select,
input[type] {
    color: #4d4d4d;
    padding: 6px 10px;
    /* The 6px vertically centers text on FF, ignored by Webkit */
    margin-bottom: 10px;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
textarea:focus,
select:focus,
input[type]:focus {
    border: 1px solid #4d4d4d;
    outline: 0;
}
label,
legend,
fieldset {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
}
button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
button > svg {
    width: 16px;
    height: 15px;
    margin-right: 1em;
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    background-color: #b2adb9;
    border: none;
    width: auto;
    height: auto;
    padding: 0.6em 0.8em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.7em;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #1f1639;
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
}
.button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
    cursor: default;
    opacity: .5;
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="button"]:focus,
input[type="button"]:hover {
    background-color: white;
    outline: none;
    cursor: pointer;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
::-webkit-input-placeholder { /* Chrome */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
}
:-ms-input-placeholder { /* IE 10+ */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
}
::-moz-placeholder { /* Firefox 19+ */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    opacity: 1;
}

/* 
 * RECONNECT
 */

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

section.reconnect {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 96%;
    width: calc(100% - 40px);
    max-width: 1180px; 
    margin: 4em auto;
    text-align: center;
}
.reconnect > h1 {
    font-size: 2.8em;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    max-width: 14em;
    color: white;
    margin: 0 auto 1em;
}
.reconnect > h2 {
    font-size: 1.8em;
    margin-top: 0;
    color: #b2adb9;
}
.reconnect__row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-wrap: wrap;
}
.reconnect__row > h3 {
    font-size: 1.2em;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 2em;
    text-align: center;
    width: 100%;
}
.reconnect__row > p {
    width: 40%; 
    text-align: center;
    font-size: 1.4em;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; /* Fixes bolding effect of light text on dark background */ 
    color: #b2adb9;
}
.reconnect__row > p > span {
    font-family: monospace;
    font-weight: bolder;
}
.reconnect__row > img {
    width: 40%;
    min-width: 300px;
    max-width: 100% !important;
    height: auto;
    align-self: center;
    margin-top: 1em;
}
.reconnect__row:nth-of-type(2) > p {
    text-align: right;
    margin-right: 1em;
}
.reconnect__row:nth-of-type(3) {
    flex-direction: row;
}
.reconnect__row:nth-of-type(3) > p {
    text-align: left;
    margin-left: 1em;
}
@media screen and (max-width: 700px) {
    .reconnect > h1 {
        font-size: 1.4em;
        max-width: 100%;
    }
    .reconnect > h2 {
        font-size: 1.2em;
    }
    .reconnect__row > h3,
    .reconnect__row > p {
        font-size: 1em;
    }
    .reconnect__row {
        flex-direction: row;
    }
    .reconnect__row > img {
        min-width: 0;
        width: 70%;
    }
    .reconnect__row > p {
        width: 100%;
        max-width: 32em;
        text-align: center !important;
        flex: none;
    }
    
}