* {
    
    margin:                     0px;
    padding:                    0px;
}

html, body {
    
    width:                      100%;
    height:                     100%;
    
    background-color:           #1a2b40;
    color:                      #ffffff;
}

main {
    
    width:                      100%;
    height:                     100%;
    
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    align-items:                center;
}

header {
    
    position:                   fixed;
    right:                      0px;
    top:                        0px;
    z-index:                    10;
    
    width:                      48px;
    height:                     48px;
    border-bottom-left-radius:  12px;
    
    background-color:           #0f141b;
    color:                      #ffffff;
}

.hamburger {
    
    margin-bottom:              2px;
    
    width:                      100%;
    height:                     100%;
    
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    align-items:                center;
}

.hamburger-slice {
    
    margin:                     3px;
    
    width:                      75%;
    height:                     6px;
    
    background-color:           #ffffff;
    border-radius:              2.5px;
}

.pixel-output {
    
    width:                      100%;
    height:                     100%;
}

#config-button {
    
    cursor:                     pointer;
    
}

.pixel-output {
    
    z-index:                    2;
    width:                      60vw;
    max-height:                 90vh;
    
    /*So it's always a 16/9 aspect ratio */
    height:                     calc(60vw*0.5625);
    background-color:           #000000;
    box-shadow:                 0px 0px 8px 8px #0f141b55;
}

#output-title {
    
    padding-bottom:             20px;
    
    font-size:                  32px;
    font-weight:                1000;
}

#configurator-modal {
    
    position:                   fixed;
    right:                      0px;
    top:                        0px;
    display:                    none;
    z-index:                    4;
    
    width:                      100%;
    height:                     100%;
}

#configurator-modal-background {
    
    position:                   fixed;
    right:                      0px;
    top:                        0px;
    z-index:                    5;
    
    width:                      100%;
    height:                     100%;
    
    background-color:           #0f141bb0;
}

#configurator-modal-foreground {
    
    position:                   fixed;
    right:                      0px;
    top:                        0px;
    z-index:                    6;
    
    width:                      100%;
    height:                     100%;
}