button {
    background: none;
    border: none;
    outline: none;
    color: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    /* cursor: default; */
    cursor: pointer;
    font-family: 'Dosis', sans-serif;
}

:root {
    font-family: 'Dosis', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    max-width: 100dvw;
    max-height: 100dvh;
    overflow: hidden;

    background-color: #ACCBEA;
}

.adlmap {
    position: fixed;
    right: 0;
    top: 0;
    /* width: 100vw; */
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    aspect-ratio: 648 / 995;
}

@media screen and (max-width: 600px) {
    .desktop {
        display: none;
    }

    :root {
        --lcwidth: 80vw;
        --lcheight: 95dvh;
    }
}

@media screen and (min-width: 600px) {
    .mobile {
        display: none;
    }

    :root {
        --lcwidth: 40vw;
        --lcheight: 90dvh;
    }
}

@media screen and (max-width: 36vw) {
    .adlmap {
        right: 50%;
        translate: 50% 0;
    }
}

.login-container {
    position: fixed;
    left: 10vw;
    top: calc(50dvh - var(--lcheight) / 2);
    width: var(--lcwidth);
    height: var(--lcheight);
    max-height: var(--lcheight);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #535353;
    border-radius: 15px;
    color: white;
    overflow-y: scroll;
}

.user-login-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    padding-left: 1vw;
    padding-right: 1vw;
    width: 100%;
    opacity: 1;
    transition-duration: 0.4s;
    /* justify-content: left; */
    cursor: pointer;
}

.user-login-container:hover {
    opacity: 0.7;
    transition-duration: 0.4s;
}

.user-login {
    justify-self: center;
    width: 85%;
    height: 90%;
    border-radius: 5px;
    /* text-align: center; */
    text-align: left;
    align-self: center;
    vertical-align: middle;
    align-content: center;
    align-items: center;

    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-indent: 2vw;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    /* background: #f1f1f1;  */
    opacity: 0;
    border-radius: 15px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
    transition-duration: 0.3s;
    border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
    transition-duration: 0.3s;
}

p {
    display: inline;
    margin: 0;
    padding: 0;
}

.admintag, .tltag, .participatingtag, .nptag {
    border-radius: 5px;
    /* padding: 0.3vh 0.3vw; */
    padding: max(1.5px, 0.3vh) max(2px, 0.3vw);
    justify-self: left;
}

.admintag {
    background-color: #ff7f7f;
}

.tltag {
    background-color: #d9d04e;
}

.participatingtag {
    background-color: #377737;
}

.nptag {
    background-color: #6d0000;
}

.credits-and-thanks {
    color: white;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    justify-self: center;
    justify-content: center;
    text-align: center;
}

.credits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.55em 1.5em;
}

.credits-grid * {
    background-color: rgba(50, 50, 50, 0.1);
    border-radius: 0.5em;
    padding: 0.5em;
    color: white;
    width: 100%;
}

.bottom-button {
    width: 100%; 
    text-align: center;
    background-color: lightskyblue;
    padding: 0 2dvh;
    border-radius: 1dvh;
}

i { opacity: 0.525; color: lightgrey; }