body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}



body {
    background: #181818;
    color: #ffffff;
    font-family: 'Rubik', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

a {
    text-decoration: none;
}


.element {
    background: #181818cb;
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    border: solid 1px #6f6f6fff;
    border-radius: 4px;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px) saturate(0%);
    text-shadow: 2px 2px #000000;
}

.button {
    color: #ffffff;
    text-decoration: none;
    background: #181818;
    padding: 5px;
    box-sizing: border-box;
    border: solid 1px #6f6f6fff;
    border-radius: 4px;
    min-width: 120px;
    text-align: center;
    cursor: pointer;
}

    .button:hover {
        border: solid 1px #ffffff;
    }

    .button.disabled {
        pointer-events: none;
        color: #808080ff;
    }


    
#infobox .button {
    margin: 5px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

#ui {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    position: absolute;
    bottom: 5px;
    width: calc(100vw - 10px);
    height: 42px;
    margin: 5px;
    z-index: 9000;
    border:none;
}

#infobox {
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    width: 100vw;
    max-width: 500px;
    min-height: 280px;
    z-index: 9001;
    left: calc(50% - 250px);
    top: calc(50% - 180px);
    display: flex;
    flex-direction: column;
}

    #infobox:not(.hidden) {
        animation: bounceInDown 1s forwards;
    }

    #infobox.hidden {
        animation: bounceOutUp 1s forwards;
    }


    @media (max-width: 500px) {
        #infobox {
            left: 10px;
            width: calc(100vw - 30px);
        }
    }

    #infobox div {
        margin-bottom: 20px;
    }

    #infobox .content {
        margin-left: 20px;
        margin-right: 20px;
    }

    h2 {
        color: #ffd800;
    }


@media (max-width: 768px) {

    .desktop {
        background: #ff00ff;
        display:none;
    }

    .button {
        min-width: 30px;
    }
}