@font-face {
    font-family: 'Atlas Grotesk Web';
    src: url('typeface/AtlasGrotesk-Regular-Web.woff2') format('woff2'),
        url('typeface/AtlasGrotesk-Regular-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

* {
    box-sizing: border-box;
    font-feature-settings: "liga", "kern";
    font-family: "Atlas Grotesk Web", Helvetica, Arial, sans-serif;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    background:black;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

a {
    color:blue;
}

main {
    position:relative;
    width:100%;
    display:flex;
    padding:0px;
    align-items:flex-start;
}

.left-column {
    flex:0 0 auto;
    max-width:30%;
    margin:30px 15px 30px 30px;
}

.right-column {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:30px 30px 30px 15px;
    height:100vh;
}

.title {
    background:rgb(0, 255, 0);
    margin:0px;
    padding:20px;
    font-size:16px;
    text-align:center;
    width:100%;
    text-transform:uppercase;
}

.pixel-instructions {
    margin:0;
    padding:20px;
    font-size:16px;
    text-align:left;
    width:100%;
    background:white;
    border:2px solid rgb(0, 255, 0);
    border-top:none;
}

.submission-input {
    display:flex;
    flex-direction:row;
    margin:20px 0 20px 0;
    
    border:2px solid rgb(0, 255, 0);
    background:white;
}

label {
    font-size:16px;
    background:rgb(0, 255, 0);
    padding:20px;
}

input {
    flex:1;
    border:none;
    text-decoration:none;
    font-size:16px;
    padding:20px;
}

.submit-button {
    background:blue;
    color:white;
    width:100%;
    margin-top:20px;
    padding:20px;
    font-size:16px;
    text-align:center;
    cursor:pointer;
    border:2px solid blue;
}

.submit-button:hover {
    border:2px solid white;
}

.pixel-boxes {
    display:flex;
    width:100%;
    gap:20px;
    padding:0;
}

.pixel-box {
    flex:1;
    position:relative;
}

.pixel-box-content {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}

.pixel-box-label {
    color:white;
    margin:0;
    padding:10px 0 0 0;
    font-size:12px;
    text-align:center;
}

.pixel-box-dropzone {
    width:100%;
    aspect-ratio:1;
    border:2px dotted white;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pixel-box-dropzone:hover {
    border-color:rgb(0, 255, 0);
}

.pixel-box-dropzone.drag-over {
    border:2px solid rgb(0, 255, 0);
}

.pixel-box-dropzone img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:absolute;
    top:0;
    left:0;
    image-rendering: pixelated;
}

.dropzone-text {
    color:rgba(200, 200, 200, 0.7);
    margin:0;
    font-size:12px;
    padding:4px;
    text-align:center;
    pointer-events:none;
    position:absolute;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pixel-box-dropzone.user-uploaded .dropzone-text {
    display:none;
}

#canvas-container {
    position:relative;
    width:100%;
    background:black;
    border:2px dotted white;
    flex:1;
    margin:20px 0 0 0;
}

canvas {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.error {
    background:red;
    width:100%;
    font-size:16px;
    color:white; 
    padding:20px;
    display:none;
}

.canvas-label {
    padding:10px;
    font-size:12px;
    width:100%;
    text-align:center;
    display:inline-block;
    margin:0;
    color:white;
}

@media (max-width: 900px) {
    main {
        flex-direction:column;
    }
    
    .left-column {
        max-width:100%;
        order:1;
        margin:0 15px 10px 15px;
    }
    
    .right-column {
        order:2;
        width:100%;
        padding:15px;
        height:auto;
    }
    
    #canvas-container {
        min-height:400px;
        flex:0 0 auto;
    }
}