*{
    --text: #d4fdd1;
    --background: #031d01;
    --primary: #7ff973;
    --secondary: #078e95;
    --accent: #2e9ef6;
    
    --text: #dceffd;
    --background: #010a13;
    --primary: #73baf6;
    --secondary: #2b0a9c;
    --accent: #812bf2;
    
    --text: #d3e7fb;
    --background: #01060a;
    --primary: #89c1f3;
    --secondary: #6d10a1;
    --accent: #e02aea;
}

html{
    background-color: var(--background);
    display: grid;
    place-items: center;
    
}

.container{
    width: 600px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    border-radius: 10px;

    margin-top: 100px;

    /* outline: 1px solid red; */

    position: relative;
}

.canvas{
    width: 400px;
    height: 400px;
    /* border: 2px solid white; */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    /* border-radius: 10px; */
    overflow: hidden;
}

.pixel{
    height: 20px;
    width: 20px;
    margin: 0;
    background-color: rgb(211, 211, 211);
}

.colors{
    width: 120px;
    height: 404px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    /* outline: 1px solid red; */
}

.color{
    width: 50px;
    height: 50px;

    /* outline: 2px solid white; */
    border-radius: 10px;
}

.color:nth-child(1){
    background-color: #000000;
}
.color:nth-child(2){
    background-color: #FFFFFF;
}
.color:nth-child(3){
    background-color: #FF0000;
}
.color:nth-child(4){
    background-color: #00FF00;
}
.color:nth-child(5){
    background-color: #0000FF;
}
.color:nth-child(6){
    background-color: #FFFF00;
}
.color:nth-child(7){
    background-color: #A52A2A;
}
.color:nth-child(8){
    background-color: #808080;
}
.color:nth-child(9){
    background-image: url(eraser-svgrepo-com.svg);
    background-position: center;
    background-size: contain;
}
.color:nth-child(10){
    background-image: url(refresh_FILL0_wght400_GRAD0_opsz24.svg);
    background-position: center;
    background-size: contain;
    position: relative;
}
.color:nth-child(11){
    background-image: url(cloud_upload_FILL0_wght400_GRAD0_opsz24.svg);
    background-position: center;
    background-size: contain;
    position: relative;
}
.color:nth-child(12){
    background-image: url(cloud_download_FILL0_wght400_GRAD0_opsz24.svg);
    background-position: center;
    background-size: contain;
    position: relative;
}

.color:nth-child(10)::after{
    content: 'RESET';
    position: absolute;
    bottom: -4px;
    text-align: center;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: xx-small;
    font-weight: bolder;
}
.color:nth-child(11)::after{
    content: 'SAVE';
    position: absolute;
    bottom: -4px;
    text-align: center;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: xx-small;
    font-weight: bolder;
}
.color:nth-child(12)::after{
    content: 'LOAD';
    position: absolute;
    bottom: -4px;
    text-align: center;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: xx-small;
    font-weight: bolder;
}
.active{
    width: 55px;
    height: 55px;
    margin: -2.5px;
}
.buttons{
    position: absolute;
    bottom: 10px;
    height: 30px;
    width: 200px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    /* background-color: red; */
}
.exportButton{
    height: 35px;
    width: 50px;
    width: 60px;

    border: 0;
    outline: 0;

    background-color: var(--accent);
    color: var(--text);

    font-weight: bolder;
    font-size: small;
    border-radius: 5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    cursor: pointer;
}
.exportCodeButton{
    height: 35px;
    width: 60px;

    border: 0;
    outline: 0;

    background-color: var(--accent);
    color: var(--text);

    font-weight: bolder;
    font-size: small;
    border-radius: 5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    cursor: pointer;
}
.importCodeButton{
    height: 35px;
    width: 60px;

    border: 0;
    outline: 0;

    background-color: var(--accent);
    color: var(--text);

    font-weight: bolder;
    font-size: small;
    border-radius: 5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    cursor: pointer;
}

.container h2{
    position: absolute;
    top: -20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: xx-large;
}

.raster{
    outline: .5px solid;
}

.rasterContainer{
    height: 30px;
    position: absolute;
    bottom: 6px;
    left: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
}