@font-face {font-family: "Supercharge";src: url("supercharge.woff");font-style: normal;font-weight: normal;}

body,div,svg{ margin:0;padding:0;}img,svg,video{border:none;}body {line-height:1}div, input, textarea, button{-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; -moz-user-select: -moz-none;-webkit-user-select: none;-ms-user-select: none;user-select: none;top:0;left:0;}span {display:inline-block;}
sup{font-size:40%; line-height:0; position: relative; top: -0.7em; vertical-align: baseline; margin-left:0.1em;}

body{background:#000; text-align:center; }
button, div{letter-spacing:0em; font:38px/1.1em "Supercharge"; color:#fff;}
button{border:none; background:transparent;}
a{color: #cba3ff; font-weight:bold; text-decoration:none;}

#container
{
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    overflow:hidden;
    visibility:hidden;
}

#bg
{
    width:1080px;
    height:1080px;
    position:absolute;
    left:50%;
    top:50%;
    /* border:1px solid white; */
    transform:translate(-50%, -50%);
}



#bg-inner{
    position:absolute;
    left:50%; top:30%;
    transform:translate(-50%, -50%);
}

#dude, #laser, #drone{position:absolute;}
#dude{left:425px; top:1290px;}
#laser{left:1338px; top:1392px;}
#drone{left:2392px; top:900px;}

h1{font:40px/1.0em "Supercharge"; text-transform: lowercase; color:#cba3ff; margin-top:64px;}
h2{font:34px/1.0em "Supercharge"; text-transform: lowercase; color:#cba3ff; margin-top:48px;}
h3{font:28px/1.0em "Supercharge"; text-transform: lowercase; color:#9768d3; margin-top:32px;}
h4{font:22px/1.0em "Supercharge"; text-transform: lowercase; color:#9768d3; margin-top:16px;margin-bottom:16px;}
p, ul, li{font:16px/1.2em Arial;}

.text{position:absolute; width:100%; text-align:center;}

#copy{min-width:1024px; width:100%; position:absolute; top:auto; left:50%; transform:translate(-50%, 0%);}
#copy div{position:relative; display:inline-block;}
#headline{ width:100%; height:200px; left:50%; transform:translate(-50%, 0%);}
#headline svg {width:100%; height:100%;}
#devices{ top:-90px; font:26px/1.2em Arial;}
#cta{ top:-70px; }
#cta-link{position:absolute; left:50%; transform:translate(-50%, 0%); width:100%; max-width:800px; cursor:pointer; background: #9768d3; color:#fff; padding:8px;}

#privacy-link a{font:16px/1.2em Arial; color:#cba3ff;}

.pipe{display:inline-block; top:2px; height:16px; border-right:2px solid #4a2181; margin:0 24px;}

/*     REPORTING MODAL   */
#bugTitle{margin-top:0px;}
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop.open { display: flex; }
.modal { width:min(800px, 100%); margin:auto;}
.modal .close { position:absolute; top:16px; left:auto; right:16px; color:#fff; border: none; background: transparent; font-size: 30px; cursor: pointer; padding: 4px; }
.modal .content { padding: 6px; }
/* form { display: grid; gap: 14px; } */
input, textarea {
    width: 100%; padding: 10px 12px; border:none; outline: none; font:16px/1.1em Arial;
}
form{text-align:center;}
textarea { min-height: 120px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.submit-btn {display:inline-block; font-size:20px; letter-spacing:0.1em; cursor:pointer; background: #9768d3; color:#fff; padding:8px 36px;}
.submit-btn[disabled] { opacity: .6; cursor: not-allowed; }
.status { font-size: 16px; padding-top:10px;}
.status.ok { color: #16d8b8; }
.status.err { color: #e6a20f; }
.hidden { visibility: hidden !important; }


@media screen and (max-width: 480px)
{
    #privacy-link a{font-size:24px;}
    .pipe{top:4px; height:24px; border-right:3px solid #4a2181;}
}




/*     PRIVACY POLICY PAGE  */

#privacy {
    margin: auto;
    text-align: left;
    min-width: 320px;
    max-width: 960px;
    padding: 16px 24px;
}

#privacy-title, #privacy-update{text-align:center;}
#privacy-update{color:#9768d3;font-size:16px; margin-bottom:64px;}