@import url("https://fonts.googleapis.com/css?family=Varela+Round");
:root{
    --current-viewport: 1440px;
    --background: #191919;
    --foreground1: #1e1e1e;
    --foreground2: #222;
    --foreground3: #272727;
    --foreground4: #2a2a2a;
    --foreground5: #fff;
    --primary: #eb4076;
    --primary-subtle: #f579a0;
    --primary-intense: #ff0f5d;
    --secondary: #ffbe3d;
    --secondary-subtle: #ffd685;
    --secondary-intense: #ffad0a;
    --tertiary: #18b1db;
    --tertiary-subtle: #5cd0ef;
    --tertiary-intense: #0dcbff;
    --perfect-color: #ffbe3d;
    --good-color: #4bdb74;
    --meh-color: #aaf;
    --miss-color: #db4b4b;
    --online-color: #61ff3d;
    --afk-color: #ffbe3d;
    --dnd-color: #ff3d3d;
    --offline-color: #000;
    --following-color: #0b3d00;
    --followed-color: #18b1db;
    --friends-color: #f579a0;
    --difficulty-easy: #18b1db;
    --difficulty-normal: #3ad03f;
    --difficulty-hard: #ffad0a;
    --difficulty-insane: #eb4076;
    
}
.background{
    color:var(--background)!important
}
.foreground1{
    color:var(--foreground1)!important
}
.foreground2{
    color:var(--foreground2)!important
}
.foreground3{
    color:var(--foreground3)!important
}
.foreground4{
    color:var(--foreground4)!important
}
.foreground5{
    color:var(--foreground5)!important
}
.primary{
    color:var(--primary)!important
}
.primary-subtle{
    color:var(--primary-subtle)!important
}
.primary-intense{
    color:var(--primary-intense)!important
}
.secondary{
    color:var(--secondary)!important
}
.secondary-subtle{
    color:var(--secondary-subtle)!important
}
.secondary-intense{
    color:var(--secondary-intense)!important
}
.tertiary{
    color:var(--tertiary)!important
}
.tertiary-subtle{
    color:var(--tertiary-subtle)!important
}
.tertiary-intense{
    color:var(--tertiary-intense)!important
}
.perfect-color{
    color:var(--perfect-color)!important
}
.good-color{
    color:var(--good-color)!important
}
.meh-color{
    color:var(--meh-color)!important
}
.miss-color{
    color:var(--miss-color)!important
}
.online-color{
    color:var(--online-color)!important
}
.afk-color{
    color:var(--afk-color)!important
}
.dnd-color{
    color:var(--dnd-color)!important
}
.offline-color{
    color:var(--offline-color)!important
}
.following-color{
    color:var(--following-color)!important
}
.followed-color{
    color:var(--followed-color)!important
}
.friends-color{
    color:var(--friends-color)!important
}
.difficulty-easy{
    color:var(--difficulty-easy)!important
}
.difficulty-normal{
    color:var(--difficulty-normal)!important
}
.difficulty-hard{
    color:var(--difficulty-hard)!important
}
.difficulty-insane{
    color:var(--difficulty-insane)!important
}
a{
    color:var(--current-scheme);
    text-decoration:none;
    transition:all .1s ease-out
}
a :hover{
    opacity:0.7;
    text-decoration:underline
}
.centered.flex{
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center
}
.centered.text{
    text-align:center
}
.two-column{
    display:flex;
    flex-direction:row;
    justify-content:space-around
}
.two-column div{
    width:-webkit-fill-available;
    width:-moz-fit-content
}
.two-column div:first-child{
    margin-right:.5em
}
.two-column div:last-child{
    margin-left:.5em
}
:root{
    --current-viewport: 1440px;
    --background: #191919;
    --foreground1: #1e1e1e;
    --foreground2: #222;
    --foreground3: #272727;
    --foreground4: #2a2a2a;
    --foreground5: #fff;
    --primary: #eb4076;
    --primary-subtle: #f579a0;
    --primary-intense: #ff0f5d;
    --secondary: #ffbe3d;
    --secondary-subtle: #ffd685;
    --secondary-intense: #ffad0a;
    --tertiary: #18b1db;
    --tertiary-subtle: #5cd0ef;
    --tertiary-intense: #0dcbff;
    --perfect-color: #ffbe3d;
    --good-color: #4bdb74;
    --meh-color: #aaf;
    --miss-color: #db4b4b;
    --online-color: #61ff3d;
    --afk-color: #ffbe3d;
    --dnd-color: #ff3d3d;
    --offline-color: #000;
    --following-color: #0b3d00;
    --followed-color: #18b1db;
    --friends-color: #f579a0;
    --difficulty-easy: #18b1db;
    --difficulty-normal: #3ad03f;
    --difficulty-hard: #ffad0a;
    --difficulty-insane: #eb4076
}
@media (max-width: 1440px){
    :root{
        --current-viewport: 100%
    }
    .heading{
        border-radius:0 !important
    }
    .main{
        border-radius:0 !important
    }
}
@media (max-width: 800px){
    .download-table .row{
        flex-direction:column;
        align-items:center
    }
    .download-table .row span{
        margin:0 !important
    }
    .download-table .row .buttons{
        width:100% !important;
        margin-top:0.2em
    }
}
body{
    background-color:#191919;
    margin:0;
    font-family:'Varela Round';
    color:white
}
button,input[type="submit"],input[type="reset"]{
    background:none;
    color:inherit;
    border:none;
    padding:0;
    font:inherit;
    cursor:pointer;
    outline:inherit
}
footer{
    width:100%;
    text-align:center;
    align-items:center;
    position:fixed;
    bottom:0;
    background-color:var(--foreground2);
    z-index:500
}
footer .upper{
    padding:.5em
}
footer .upper a{
    color:white !important;
    margin:0 1em;
    opacity:1;
    transition:0.2s ease-out
}
footer .upper a:hover{
    opacity:0.6
}
footer .lower{
    color:var(--current-scheme);
    font-size:11px;
    height:0;
    transition:.2s ease-out;
    opacity:0
}
footer:hover .lower{
    height:1em;
    margin-bottom:.5em;
    margin-top:-.5em;
    opacity:.3
}
.main-container{
    margin-top:70px;
    display:flex;
    flex-direction:column;
    align-items:center
}
.main-container .heading{
    position:relative;
    margin-top:10px;
    width:var(--current-viewport);
    overflow:hidden;
    border-bottom:5px solid var(--current-scheme);
    border-radius:1em 1em 0 0;
    display:flex;
    flex-direction:column;
    align-items:center
}
.main-container .heading #kc-header-wrapper{
    position: relative;
    width:100%;
    height: 100%;
    z-index:-1;
    background-size:cover;
    background-position:center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    background-image:url('https://deltada.sh/assets/headings/default.png');
}
.main-container .heading #kc-header-wrapper::before{
    content:"";
    width:100%;
    height:100%;
    background:#191919;
    opacity:0.4;
    position: absolute;
    z-index: -1;
}
.main-container .heading #kc-header-wrapper span{
    font-size:45px;
}
.main-container .main{
    padding:20px 45px;
    width:calc(var(--current-viewport) - 90px);
    background:#222;
    border-radius:0 0 1em 1em;
    margin-bottom:40px;
    line-height:1.5;
    font-size:18px
}
.segment{
    position:relative;
    background:var(--foreground4);
    margin:1em 0;
    padding:1em;
    border-radius:0.5em;
    max-width: 500px;
    margin: auto;

}
.segment>h1:first-child,.segment>h2:first-child,.segment>h3:first-child{
    margin-top:0
}
.segment>h1:last-child,.segment>h2:last-child,.segment>h3:last-child{
    margin-bottom:0
}
.divider{
    margin:1em 0;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white
}
.divider::before,.divider::after{
    content:"";
    display:block;
    height:1px;
    opacity:0.2;
    background:currentColor;
    border-radius:500rem;
    width:inherit;
    margin:0 5px
}
.divider:empty{
    margin:1em 5px;
    width:calc(100% - 10px)
}
.divider:empty::before,.divider:empty::after{
    margin:0
}
.download-table{
    display:flex;
    flex-direction:column
}
.download-table .row{
    display:flex;
    justify-content:space-between;
    margin:.2em;
    background:var(--background);
    border-radius:.3em;
    padding:.5em
}
.download-table .row span{
    display:flex;
    align-content:center;
    align-items:center;
    margin-left:2em
}
.download-table .row .buttons{
    display:flex;
    width:50%
}
#recommanded_dl{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center
}
.buttons .button{
    margin:0 .2em
}

#kc-content{
    position:relative;
    background:var(--foreground4);
    margin:1em 0;
    padding:1em;
    border-radius:0.5em;
    max-width:500px;
    margin:1em auto
}
#kc-content .field{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:.5em
}

#kc-content .field > * {
    width: 100%;
}
#kc-content .field input[type="text"],#kc-content .field input[type="password"]{
    transition:.1s all;
    background:var(--foreground2);
    border:2px solid var(--foreground1);
    padding:0.5em;
    width:-webkit-fill-available;
    width:-moz-available;
    color:white;
    margin-top:.5em;
    border-radius:.5em;
    font-size:15px
}
#kc-content .field input[type="text"]:focus,#kc-content .field input[type="text"]:focus-visible,#kc-content .field input[type="password"]:focus,#kc-content .field input[type="password"]:focus-visible{
    border-color:var(--current-scheme);
    outline:none
}
#kc-content .submit{
    margin:.5em;
    text-align:right
}
div.alerts-container{
    width:-webkit-fill-available;
    width:-moz-available;
    padding:0 2em;
    position:relative
}
div.alerts-container.floating{
    position:fixed;
    top:70px;
    background:var(--foreground4);
    border-radius:0 0 10px 10px;
    box-shadow:0 0 11px #00000085;
    transform:translate(-50%, 0);
    left:50%
}
div.alerts-container a#close{
    position:absolute;
    right:.5em;
    top:.3em;
    font-size:1.4em;
    color:white;
    cursor:pointer;
    transition:all .1s
}
div.alerts-container a#close:hover{
    color:var(--current-scheme)
}
div.alerts-container div.alert{
    margin:1em 0;
    padding:.5em 1em;
    border-radius:5px;
    position:relative
}
div.alerts-container div.alert i{
    margin-right:.5em
}
div.alerts-container div.error{
    background:#5c001e;
    border:2px solid #ff0f5d
}
div.alerts-container div.warning{
    background:#573a00;
    border:2px solid #ffad0a
}
div.alerts-container div.info{
    background:#00465a;
    border:2px solid #0dcbff
}
div.alerts-container div.success{
    background:#114713;
    border:2px solid #3ad03f
}
.grouped-fields {
width: 100%;
}

.button{
    position:relative;
    border:.17em solid currentColor!important;
    padding:.5em 1em!important;
    border-radius:0.5em;
    width:40%;
    text-align:center;
    transition:.1s;
    width: auto;
}

#kc-form-buttons{
    display:flex;
    margin-top:1em!important;
    align-items: flex-end!important;
    justify-content: flex-end!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}
.button i{
    margin-right:0.5em
}
.button:hover{
    color:white !important
}
.button::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background-color:currentColor;
    top:0;
    opacity:0.15;
    left:0
}

#input-error {
    color: var(--secondary);
    margin-left: 1em;
}

#kc-registration {
    text-align: right;
    margin-right:0.5em;
}

.html-scheme-primary {
    --current-scheme: var(--primary);
}

.html-scheme-secondary {
    --current-scheme: var(--secondary);
}

.html-scheme-tertiary {
    --current-scheme: var(--tertiary);
}