html, body{
    margin: 0;
    padding: 0;
    background-color: #0B192C;
}

:root{
    --cube-red: #C7242F;
    --cube-blue: #3579DE;
    --cube-orange:#F99F44;
    --cube-green:#2ABB2A;
    --cube-white:#F5F6F6;
    --cube-yellow:#FD0;
}

h1, p{
    color: #FF6500;
    text-align: center;
}

h1{
    font-family: monospace;
    font-size: 3vw;
    font-weight: 900;
}

p{
    max-width:50vw;
    padding-left: 25vw;
    font-size: 1vw;
    font-family: Arial, Helvetica, sans-serif;
}

#template{
    display: none;
}

#download{
    width: 10vw;
    height: 3vh;

    font-size:0.75vw;

    border-radius:100vw;

    position: absolute;

    left: 50%;
    top:95%;

    border:1px solid black;

    background-color: #1E3E62;
    color: #FF6500;
    
    transform: translate(-50%, -50%) scale(1);

    transition: 0.25s;
}

#download:hover{
    transform: translate(-50%, -50%) scale(1.1);
    transition: 0.1s;
}

#canvas{
    position:absolute;

    left:50%;

    transform: translateX(-50%);

    margin-top: 2.5vh;
}

.buttonContainer{
    display:flex;

    width:100vw;
    margin-top:2.5vh;

    justify-content: center;
    gap: 1vw;
}

.colorButton{
    width: 4vw;
    height: 4vw;

    border-radius: 0.25vw;

    cursor: pointer;
    transition: 0.25s;
}

.colorButton:hover{
    transform: scale(1.1);
    transition: 0.1s;
}

.white{
    background-color: var(--cube-white);
}


.red{
    background-color: var(--cube-red);
}

.blue{
    background-color: var(--cube-blue);
}

.orange{
    background-color: var(--cube-orange);
}

.green{
    background-color: var(--cube-green);
}

.yellow{
    background-color: var(--cube-yellow);
}