html {
    font-size: 62.5%;
}

html[data-theme="light"] * {
    background: #ffffff;
    color: #000000;
}

html[data-theme="dark"] * {
    background: #121212;
    color: #ffffff;
}

* {
    font-size: 1.7rem;
    font-family: monospace;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    outline: none;
    line-height: 2rem;
    background: none;
    list-style: none;
    text-decoration: none;
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
}

:disabled {
    opacity: .5;
}

::selection{
    background: light-dark(#333, #ccc);
}

body {
    padding: 20px;
    overflow: hidden;
    min-width: 360px;
}

h1 {
    cursor: default;
    font-size: 3rem;
    margin: 0 -5px 15px;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 100px;

    * {
        cursor: pointer;
        white-space: nowrap;
    }

    label {
        display: none;
    }

    #recording {
        color: red;

        span {
            color: red;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.container {
    display: flex;
    height: 100vh;
    gap: 12px;
}

aside {
    min-width: 240px;

    ul li {
        white-space: nowrap;
        max-width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

main {
    flex: 1;
}

textarea {
    padding-bottom: 100%;
    resize: none;
    width: 100%;
    height: 100%;
}

@media (max-width:800px) {
    nav {
        #share {
            display: none;
        }

        label {
            display: inline;
        }
    }

    aside {
        position: absolute;
        height: 100%;
        background: light-dark(white, #121212);
    }

    #menuControl:checked~.container aside {
        max-width: 0;
        visibility: hidden;
    }
}