@import url(fonts.css);

:root {
    --light:#f7f8f9;
    --dark1:#17181f;
    --dark2:#22242e;
    --blue:#3da1ff;
    --blue2:#386a99;
    --green:#52e247;
    --green2:rgba(81, 226, 71, 0.39);
    --purple:#ad47e2;
    --purple2:#fa8cfa;
    --red:#b81a5c;
    --red2:#ff3030;
    --red3:#ffc3c6;
    --gold:#ffcf30;
}

body {
    width:100vw;
    padding:0;
    margin:0;
    background:var(--dark1);
    color:var(--light);
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

.general-button {
  font: inherit;
  background-color: #1b1c24;
  border: 0;
  color: #e8e8ef;
  border-radius: 0.5em;
  font-size: 1.35rem;
  padding: 0.375em 1em;
  font-weight: 600;
  text-shadow: 0 0.0625em 0 #0a0b10;
  box-shadow:
    inset 0 0.0625em 0 0 #2a2c36,
    0 0.0625em 0 0 #0f1016,
    0 0.125em 0 0 #0d0e14,
    0 0.25em 0 0 #0b0c12,
    0 0.3125em 0 0 #090a10,
    0 0.375em 0 0 #08090e,
    0 0.425em 0 0 #07080c,
    0 0.425em 0.5em 0 #05060a;
  transition: 0.15s ease;
  cursor: pointer;
}

.general-button:active {
  translate: 0 0.225em;
  box-shadow:
    inset 0 0.03em 0 0 #2a2c36,
    0 0.03em 0 0 #0f1016,
    0 0.0625em 0 0 #0d0e14,
    0 0.125em 0 0 #0b0c12,
    0 0.125em 0 0 #090a10,
    0 0.2em 0 0 #08090e,
    0 0.225em 0 0 #07080c,
    0 0.225em 0.375em 0 #05060a;
}


.mini-logo {
    width:95%;
    max-width:400px;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100vh;
    align-items: center;
}

.mini-logo svg {
    width:80px;
    height:80px;
    margin-top:-150px;
}

.mini-logo-text {
    width:100%;
    text-align: center;
}

.mini-logo-text h1 {
    font-size:30px!important;
    font-weight: 600;
}

.mini-logo-btn {
    width:fit-content;
    padding:15px 40px;
    box-sizing: border-box;
    border-radius:50px;
    font-size:14px;
    font-weight: 500;
    display: flex;
    gap:5px;
    align-items: center;
    transition:all .1s;
    cursor:pointer;
    border:2px solid var(--light);
}

.mini-logo-btn:hover {
    background:var(--blue);
    border:2px solid var(--blue);
    transform: translateY(-8px);
}

.mini-logo-btn svg {
    width:30px;
    height:30px;
    fill:var(--light);
    color:var(--light);
    margin-top:0px!important;
}

.btn1 {
    width:fit-content;
    padding:6px 22px;
    box-sizing: border-box;
    border-radius:50px;
    font-size:12px;
    font-weight: 500;
    display: flex;
    gap:5px;
    align-items: center;
    transition:all .1s;
    cursor:pointer;
    border:2px solid var(--light);
    text-align: center;
    justify-content: center;
    user-select: none;
}

.btn1:hover {
    background:var(--blue);
    border:2px solid var(--blue);
}

.btn1 svg {
    width:30px;
    height:30px;
    fill:var(--light);
    color:var(--light);
    margin-top:0px!important;
}

.btn2 {
    width:fit-content;
    padding:12px 22px;
    box-sizing: border-box;
    border-radius:50px;
    font-size:16px;
    font-weight: 500;
    display: flex;
    gap:5px;
    align-items: center;
    transition:all .1s;
    cursor:pointer;
    border:2px solid var(--light);
    text-align: center;
    justify-content: center;
    user-select: none;
}

.btn2:hover {
    background:var(--blue);
    border:2px solid var(--blue);
}

.btn2 svg {
    width:30px;
    height:30px;
    fill:var(--light);
    color:var(--light);
    margin-top:0px!important;
}

.btn3 {
    width:fit-content;
    padding:6px 32px;
    box-sizing: border-box;
    border-radius:50px;
    font-size:12px;
    font-weight: 500;
    display: flex;
    gap:5px;
    align-items: center;
    transition:all .1s;
    cursor:pointer;
    border:2px solid var(--light);
    text-align: center;
    justify-content: center;
    user-select: none;
}

.btn3:hover {
    background:var(--blue);
    border:2px solid var(--blue);
}

.btn3 svg {
    width:24px;
    height:24px;
    fill:var(--light);
    color:var(--light);
    margin-top:0px!important;
}

#main {
    width:100vw;
    min-height: 100vh;
    position: relative;
    z-index:77;
    padding-top:40px;
    margin-top:-40px;
}

#main2 {
    width:100vw;
    min-height: 100vh;
    background-image: url(../img/background7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index:77;
    padding-top:40px;
    margin-top:-40px;
}

#footer {
    width:100vw;
    padding-top:60px;
    padding-bottom:100px;
    background:var(--dark1);
    background-image: url(../img/footerbackground.png);
    position: relative;
    bottom:0;
    left:0;
    z-index:99999;
    border-top:5px solid rgba(0, 0, 0, .6);
}

.footercontent {
    width:98%;
    max-width:1100px;
    min-width:900px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    display: flex;
}

.footerbox {
    width:25%;
    display: flex;
    flex-direction: column;
}

.footerbox img {
    width:100%;
    max-width:200px;
}

.footerbtn {
    width:100%;
    background:rgba(0, 0, 0, .3);
    max-width:200px;
    display: flex;
    align-items: center;
    gap:5px;
    padding:10px;
    padding-bottom:8px;
    box-sizing: border-box;
    border-radius:10px;
    font-size:13px;
    font-weight: 500;
    color:var(--light);
    transition: all .1s;
    cursor: pointer;
    border-bottom:2px solid rgba(0, 0, 0, .4);
}

.footerbtn:hover {
    background:var(--blue);
}

.footerbtn svg {
    width:20px;
    height:20px;
    fill:var(--light);
    color:var(--light);
}

.footerbtn2 {
    width:fit-content;
    max-width:200px;
    display: flex;
    align-items: center;
    gap:5px;
    font-size:13px;
    font-weight: 500;
    color:var(--light);
    transition: all .1s;
    cursor: pointer;
    margin-bottom:8px;
}

.footerbtn2:hover {
    color:var(--blue);
}

.footerbtn2:hover svg {
    fill:var(--blue);
    color:var(--blue);
}

.footerbtn2 svg {
    width:23px;
    height:23px;
    fill:var(--light);
    color:var(--light);
    transition: all .1s;
}

.footerheadline1 {
    width:100%;
    font-size:16px;
    font-weight: 500;
}

.footerheadline2 {
    width:80%!important;
    margin:0 auto;
    font-size:14px;
    font-weight: 500;
    margin-top:25px;
    width:100%;
    padding:8px 30px;
    box-sizing: border-box;
    border-radius: 50px;
    transition: all .1s;
    cursor:pointer;
}

.footerheadline2:hover {
    background:var(--purple);
}

.footerplayercount {
    width: 100%;
    font-size:30px;
    font-weight: 800;
}

.logo {
    width:400px;
    margin:0 auto;
    position:relative;
    z-index:99999;
    display: flex;
    justify-content: center;
    margin-top:40px;
}

.logo img {
    width:350px;
}

.nav {
    width:95%;
    margin:0 auto;
    display: flex;
    align-items: center;
    gap:20px;
    justify-content:space-evenly;
    position:relative;
    z-index:99999;
    margin-top:30px;
    margin-bottom:80px;
}

.navitem {
    width:fit-content;
    padding:8px 20px;
    box-sizing: border-box;
    border-radius:50px;
    font-size:14px;
    font-weight: 500;
    transition:all .1s;
    cursor:pointer;
}

.navitem:hover {
    background:var(--blue);
    transform: translateY(-3px);
}

.navlogo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right:80px;
}

.navlogo svg {
    width:40px;
    height:40px;
    color:#f7f8f9;
    fill:#f7f8f9;
}

.startslider {
    width:98%;
    max-width:1000px;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:60px;
}

.slidertextbox {
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:relative;
    z-index:99999;
}

.slidertext1 {
    font-family: 'Montserrat',sans-serif;
    width:100%;
    font-size:80px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: -2px;
}
.slidertext2 {
    font-family: 'Montserrat',sans-serif;
    width:100%;
    font-size:60px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    word-spacing: 60px;
    margin-top:-20px;
    letter-spacing: -2px;
}
.slidertext3 {
    font-family: 'Poppins',sans-serif;
    width:100%;
    min-width:450px;
    font-size:28px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
}

.sliderimg {
    width:100%;
    min-height:600px;
    background-image: url(../img/screenshot_mockup.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:auto;
    position:relative;
    z-index:88888;
    margin-top:-60px;
    opacity: .5;
}

.sliderbottom {
    position:relative;
    z-index:99999;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top:-400px;
}

.sliderbtn {
    width:fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap:20px;
    padding:15px 30px;
    box-sizing: border-box;
    border-radius: 50px;
    background:rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
    font-size:18px;
    font-weight: 600;
    color:var(--light);
    transition:all .1s;
    cursor:pointer;
    border:2px solid rgba(255, 255, 255, .6);
}

.sliderbtn:hover {
    background:var(--blue);
    border:2px solid var(--blue);
}

.sliderbtn svg {
    width:40px;
    height:40px;
    color:var(--light);
    fill:var(--light);
}

.olderversions {
    font-size:13px;
    font-weight: 500;
    color:var(--light);
    transition:all .1s;
    text-decoration: none;
    margin-top:10px;
}

.olderversions:hover {
    color:var(--blue);
    text-decoration: underline;
}

.slider2 {
    width:98%;
    max-width: 1100px;
    min-width:900px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    z-index:99999;
    margin-top:100px;
    margin-bottom:100px;
}

.slidercontent {
    width: 100%;
    display:flex;
}

.sliderleft {
    width:60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sliderleftimg {
    width:100%;
    height:400px;
    background-image: url(../img/screenshot_mockup.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    position:relative;
    z-index:888;
    opacity:.5;
    margin-bottom:-45%;
}

.sliderright {
    width:40%;
    min-width:450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top:100px;
}

.sliderrightbtn {
    width:100%;
    min-width:450px;
    margin:0 auto;
    text-align:center;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    padding:20px 30px;
    box-sizing: border-box;
    border-radius: 50px;
    background:rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
    font-size:18px;
    font-weight: 600;
    color:var(--light);
    transition:all .1s;
    cursor:pointer;
    border:2px solid rgba(255, 255, 255, .6);
    margin-top:10px;
    text-transform: uppercase;
}

.sliderrightbtn:hover {
    background:var(--blue);
    border:2px solid var(--blue);
}

.sliderrightbtn svg {
    width:30px;
    height:30px;
    color:var(--light);
    fill:var(--light);
}

.maincontent {
    width:95%;
    max-width:1200px;
    margin:0 auto;
}

.maincontent h1 {
    font-size:32px;
    font-weight: 600;
}

.blogentry {
    width:100%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    padding:20px;
    box-sizing: border-box;
    border:2px solid var(--light);
    border-radius:20px;
    margin-bottom:40px;
    transition: all .1s;
}

.blogentry:hover {
    border:2px solid var(--blue);
}

.blogentry-headline {
    font-size: 20px;
    font-weight: 700;
}

.blogentry-header-line {
    width:100%;
    display: flex;
    gap:50px;
    padding-top:10px;
    padding-bottom:10px;
    opacity:.6;
}

.blogentry-date {
    font-size: 12px;
    font-weight: 600;
}

.blogentry-author {
    font-size:12px;
    font-weight: 400;
}

.blogentry-content {
    width:100%;
    font-size:14px;
    font-weight:500;
}

.bg-pan-bottom {
	-webkit-animation: bg-pan-bottom 30s infinite alternate both;
	        animation: bg-pan-bottom 30s infinite alternate both;
}

@-webkit-keyframes bg-pan-bottom {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}
@keyframes bg-pan-bottom {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
	-webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* MODAL */
/* ===== Modal base ===== */
.modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items:center ;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
}

/* När modalen är öppen */
.modal.is-open {
    display: flex;
}

/* Själva rutan */
.modal .modal-content {
    max-height:600px;
    overflow-y: auto;
    overflow-x:hidden;
    width: 100%;
    max-width: 720px;
    background: #0f0f12;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    margin-top:-100px;
}

/* Lås scroll i bakgrunden när modal är öppen */
body.modal-open {
    overflow: hidden;
}

/* =========================
   MSGMODAL (modal ovanpå modal)
   ========================= */
.msgmodal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,0.72);
    z-index: 10050; /* Högre än .modal (9999) */
}

.msgmodal.is-open {
    display: flex;
}

.msgmodal .msgmodal-content {
    width: 100%;
    max-width: 560px;
    background: #0f0f12;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    max-height: 70vh;
    overflow: auto;
    position: relative;
}

.msgmodal .msgmodal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.msgmodal .msgmodal-text {
    opacity: 0.9;
    line-height: 1.4;
    margin-bottom: 16px;
}

.msgmodal .msgmodal-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
}

.msgmodal label {
    font-size: 12px;
    opacity: 0.8;
}

.msgmodal input[type="text"],
.msgmodal input[type="date"],
.msgmodal input[type="number"],
.msgmodal select,
.msgmodal textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    outline: none;
}

.msgmodal textarea {
    min-height: 90px;
    resize: vertical;
}

.msgmodal .msgmodal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.msgmodal .btn-danger {
    background: #b71c1c;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
}

.msgmodal .btn-secondary {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
}

.msgmodal .btn-primary {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
}

.msgmodal .msgmodal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}

/* MAIN ELEMENTS */

.page-header {
    width:100%;
    font-size:30px;
    font-weight: 600;
    text-align: center;
}

.page-controw {
    width:80%;
    max-width:1000px;
    margin:0 auto;
    display: flex;
    justify-content: center;
}

/* ACCOUNT ELEMENTS */

.account-loginbox{
    width:100%;
    max-width:500px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
}

.account-loginhead{
    width:100%;
    font-size:17px;
    font-weight:500;
    text-align:center;
}

.account-loginrow2{
    width:100%;
    display:flex;
    align-items: start;
    gap:5px;
    margin-bottom:10px;
    margin-top:15px;
}

.account-loginrow{
    width:100%;
    display:flex;
    gap:5px;
    align-items:center;
    border:2px solid transparent;
    padding:8px;
    box-sizing:border-box;
    background:rgba(255,255,255,.05);
    border-radius:6px;
    margin-bottom:6px;
}

.account-loginrow input{
    width:100%;
    background:none;
    border:none;
    outline:none;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:500;
    color:#ffffff;
}

.account-loginrow:hover{
    border-color:var(--blue);
}

.account-loginrow:focus-within{
    border-color:var(--blue);
}

.account-loginrow svg{
    width:24px;
    height:24px;
    color:#fff;
    fill:#fff;
}

.account-btn{
    width:100%;
    padding:8px;
    box-sizing:border-box;
    border-radius:8px;
    background:rgba(0,0,0,.4);
    text-align:center;
    transition:all .1s;
    cursor:pointer;
    user-select:none;
}

.account-btn:hover{
    background:var(--blue);
}

.account-btn2{
    width:100%;
    padding:12px;
    box-sizing:border-box;
    border-radius:8px;
    background:#0e0e13;
    text-align:center;
    transition:all .1s;
    cursor:pointer;
    user-select:none;
    border:none;
    cursor:pointer;
    color:var(--light);
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 0 0.0625em 0 rgba(0,0,0,0.6);
    box-shadow:
    inset 0 0.0625em 0 0 rgba(255,255,255,0.08),
    0 0.0625em 0 0 #111,
    0 0.125em 0 0 #101010,
    0 0.25em 0 0 #0e0e0e,
    0 0.3125em 0 0 #0c0c0c,
    0 0.375em 0 0 #0a0a0a,
    0 0.425em 0 0 #080808,
    0 0.425em 0.5em 0 rgba(0,0,0,0.9);
}

.account-btn2:hover{
    background:var(--blue);
}

.account-loginbox2 {
    width:95%;
    margin:0 auto;
    max-width:1000px;
    display: flex;
    align-items: center;
    background:#0e0e13;
    border:2px solid rgba(255,255,255,0.2);
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 54px 55px, rgba(0, 0, 0, 0.24) 0px -12px 30px, rgba(0, 0, 0, 0.24) 0px 4px 6px, rgba(0, 0, 0, 0.34) 0px 12px 13px, rgba(0, 0, 0, 0.18) 0px -3px 5px;
}

.account-loginbox2-left {
    width:55%;
    display: flex;
    flex-direction: column;
    padding:30px;
    box-sizing: border-box;
    background:url(../img/background_login.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    height:100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right:1px solid rgba(255,255,255,0.2);
}

.account-loginbox2-left h1 {
    font-size:30px;
    font-weight: 600;
    display: block;
}

.account-loginbox2-left-text {
    width:100%;
    display: flex;
    font-size:15px;
    font-weight: 500;
}

.account-loginbox2-left-list {
    width:100%;
    display: flex;
    flex-direction: column;
    gap:8px;
    padding:20px;
    box-sizing: border-box;
}

.account-loginbox2-left-listitem {
    width:100%;
    display: flex;
    gap:10px;
    font-size:18px;
    font-weight: 600;
}

.account-loginbox2-left-listitem svg {
    width:30px;
    height:30px;
    fill:var(--light);
    color:var(--light);
}

.account-loginbox2-right {
    width:45%;
    display: flex;
    padding:30px;
    box-sizing: border-box;
}

.account-loginbox2 a {
    color:var(--light);
    text-decoration: underline;
}

.account-loginbox2 a:hover {
    color:var(--blue);
}

.underlink a {
    color:var(--light);
    text-decoration: underline;
}

.underlink a:hover {
    color:var(--blue);
}

/* TOGGLE BUTTON */

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #adb5bd;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.27em;
  bottom: 0.25em;
  background-color: #adb5bd;
  transition: .4s;
}

input:checked + .slider {
  background-color: #007bff;
  border: 1px solid #007bff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
  transform: translateX(1.4em);
  background-color: #fff;
}

.pagemain {
    width:80%;
    max-width:1100px;
    margin:0 auto;
}

.pagehead {
    width:100%;
    font-size:28px;
    font-weight:600;
    color:var(--light);
    text-align: center;
}

.missingserver {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.missingserver a {
    font-size:15px;
    font-weight: 600;
    color:var(--light);
    text-decoration: underline;
}

.missingserver a:hover {
    color:var(--blue);
}