@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0");

html {
    --background: white;
    --background-accent: hsl(0, 0%, 95%);
    --background-accent-hover: hsl(0, 0%, 97%);
    --background-highlight: hsl(0, 0%, 90%);
}

* {
    box-sizing: border-box;
}

html,body,main {
    padding: 0;
    margin: 0;

    width: 100%;
}

span,p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

.material-symbols-rounded {
    user-select: none;
}

.row {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    
    &.beside {
        justify-content: start;
    }

    &.center {
        justify-content: center;
    }

    &.wrappable {
        flex-wrap: wrap;
    }
}

.button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    user-select: none;


    width: max-content;
    padding: .5rem;

    border-radius: .5rem;
    background-color: var(--background-accent);
    transition: 250ms backround-color;

    &:hover {
        cursor: pointer;
        background-color: var(--background-accent-hover);
    }
}