:root {
    --my-blue: rgb(47, 0, 255);
    --light-blue: rgb(25, 113, 255);
}

@media only screen and (max-width: 600px) {
    .contents {
        display: none;
    }
}

.mobile {
    display: block;
}

@media (min-width: 600px) {
    .mobile {
        display: none !important;
    }
}

body {
    background-color: rgb(77, 127, 254);
    font-family: "Silkscreen", sans-serif;
    color: white;
    text-align: center;
    margin: 20px;
    border: 5px rgb(95, 139, 253) dashed;
    padding-bottom: 20px;
}

h1 {
    font-family: "Jersey 10", sans-serif;
    font-size: 50px;
    margin: 10px;
}

button {
    font-family: "Pixelify Sans", sans-serif;
    font-size: large;
    padding: 5px 10px;
    border: var(--light-blue) 1px solid;
    background-color: var(--my-blue);
    color: white;
}

.active-button {
    background-color: rgb(220, 247, 16);
    color: rgb(47, 0, 255);
}

button:hover {
    background-color: var(--light-blue);
}

.slider-button {
    padding: 4px;
    width: 30px;
    height: 30px;
    background-color: rgb(5, 91, 212, 0.6);
    text-align: center;
}

.sketch {
    display: flex;
    align-items: center;
    justify-content: center;

}

.block {
    flex: auto;
    background-color: white;
    box-sizing: border-box;
}


.block-container {
    margin: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 500px;
    height: 500px;
}

.slider-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.block-container,
.colours,
.current-colour-box {
    border: 2px var(--my-blue) dashed;
    padding: 4px;
}

.colours {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.colours div {
    width: 20px;
    height: 20px;
    background-color: white;
    box-sizing: border-box;
    border: 2px white solid;
    cursor: crosshair;
}

.colours div:hover {
    filter: brightness(0.85);
}

.current-colour {
    width: 40px;
    height: 40px;
    border: 2px white solid;
    background-color: #160b00;
}

.picker {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.colours-box {
    display: flex;
    align-items: center;
    justify-content: center;
}