body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
}

.top-bar {
    position: absolute;
    z-index: 3;
    display:flex;
    background-color: rgb(37, 37, 37);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    width:100vw;
    color:white;

    button {
        color:white;
        background-color: rgba(0,0,0,0);
        border: 0px solid;
        font-size: 18px;
    }

    button:active {
        background-color: rgba(255, 255, 255, 0.38);
        color: rgb(133, 225, 242);
    }

    .top-bar-options {
        display:flex;
        flex-direction:column;
        background-color: rgb(37, 37, 37);
        position:absolute;
        top:100%;
        border: 2px solid rgba(255, 255, 255, 0.041);
        border-radius: 5px;

        button {
            font-size: 15px;
            text-align: left;
        }
    }
}
.right-bar {
    position: absolute;
    right:0px;
    height:100vh;
    z-index: 2;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    background-color: rgba(83, 83, 83, 0.342);
    color:white;
    padding-left:10px;

    div input {
        accent-color: rgb(133, 225, 242);
    }

    .preview {
        width:50px;
        height:50px;
        background-color:white;
        z-index: 1;
        border-radius: 5px;;
    }
    
}


.left-bar {
    position: absolute;
    left:0px;
    height:100vh;
    z-index: 2;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:10px;
    background-color: rgba(173, 11, 11, 0);
    color:white;

    button {
        color:white;
        background-color: rgb(10, 10, 10);
        width: 50px;
        height:50px;
        border: 0px solid;
        border-radius: 100pc;
        align-content: center;
        justify-content: center;
        box-shadow: 0px 5px 5px -1px black;
    }

    button:active {
        background-color: rgb(41, 41, 41);
        color: rgb(133, 225, 242);
    }
}

.canvas-background {
    background-color: rgb(16,16,16);
    height: 100vh;
    width: 100vw;
    margin: 0px;
    z-index: 0;
}


#canvas-render {
    position: absolute;
    background-color:rgb(0, 0, 0);
    width:500px;
    height:500px;
    image-rendering:pixelated;
}

.color-picker {
    background-color: rgb(21, 21, 21);
    display:flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    border-radius: 0px 15px 0px 0px;
    color:white;
    z-index: 1;
    font-weight: 300;

    hr {
        width:100%;
        border: 1px solid rgb(38, 38, 38);
    }

    button {
        background-color: rgba(0,0,0,0);
        border: 0px;
        color:white;
    }

    .popup-colorpicker {
        width:100%;
        display:flex;
        flex-direction:row;
        align-items: center;
        font-weight: 600;
        p {margin:0px;}
    }
    .color-settings{
        display:flex;
        flex-direction:column;
        align-items: center;
    }
}

.material-symbols-outlined {
    font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}