* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 10px 30px;
    font-family: 'Press Start 2P', 'Space Grotesk', sans-serif;
    font-size: 1rem;
    line-height: 25px;
    background-color: #7C7C7C;
    color: #232D22;
    display: flex;
    justify-content: center;
}
h1 {
    font-weight:bold;
    font-size: 1.6rem;
    padding-left: 10px;
    margin: 0;
}
a, span {
    color: #232D22;
}
a.blu3 {
    color: #1E9CED;
}
/* Basic flex container structure */

.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.top-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.center-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.right-box {
    display: flex;
    flex: 1;
    gap: 30px;
    flex-direction: column;
}
.border{
    box-shadow:   -10px 0 0 0 #232D22,
                 10px 0 0 0 #232D22,
                 0 -10px 0 0 #232D22,
                 0 10px 0 0 #232D22;
}
/* --------------------------------- */

.sketch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 500px;
    height: 500px;
    background-color: white;
}
.tools {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    width: 500px;
    flex-direction: column;
    justify-content: space-between;
    background-color: #BCBCBC;
}
input.input-box {
    font-family:inherit;
    font-size: 1.2rem;
    padding-left: 10px;
    border-style: none;
    height: 50px;
    width: 200px;
    color: #232D22;
    box-shadow:   -10px 0 0 0 #232D22,
                 10px 0 0 0 #232D22,
                 0 -10px 0 0 #232D22,
                 0 10px 0 0 #232D22;
}
.message {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #232D22;
    opacity: 0.3;
    white-space: break-spaces;
}

::placeholder {
    opacity: 0.3;
}
input:focus {
    outline: none;
}
.guide {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
    max-width: 1030px;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #fff;
}
.guide-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 1rem;
}
.icon {
    font-size: 1.5rem;
    color: #91CC42;
}
.tool {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1E9CED;
    color: #fff;
    font-weight:700;
    font-size: 1.2rem;
    height: 50px;
    width: 200px;
    cursor: pointer;
    box-shadow: -10px 0 0 0 #232D22, -6px -6px 0 0 #232d224c inset,
                10px 0 0 0 #232D22,
                0 -10px 0 0 #232D22,
                0 10px 0 0 #232D22;
}
.btn:hover {
    background-color: #0F8DE0;
}
.btn:active {
    box-shadow: -10px 0 0 0 #232D22, 6px 6px 0 0 #232d224c inset,
                10px 0 0 0 #232D22,
                0 -10px 0 0 #232D22,
                0 10px 0 0 #232D22;
}
.newGrid {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #91CC42;
    color: #fff;
    font-weight:700;
    font-size: 1.2rem;
    height: 50px;
    width: 200px;
    cursor: pointer;
    box-shadow: -10px 0 0 0 #232D22, -6px -6px 0 0 #232d224c inset,
                10px 0 0 0 #232D22,
                0 -10px 0 0 #232D22,
                0 10px 0 0 #232D22;
}
.newGrid:hover {
    background-color: #75C442;
}
.newGrid:active {
    box-shadow: -10px 0 0 0 #232D22, 6px 6px 0 0 #232d224c inset,
                10px 0 0 0 #232D22,
                0 -10px 0 0 #232D22,
                0 10px 0 0 #232D22;
}
#eraseBtn {
    background-color: #E86E55;
}
#eraseBtn:hover {
    background-color: #d24134;
}
.title, .credits {
    /* flex: 1; */
    width: 500px;
}
.top-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: #F7D41F;
}
.canvas-square {
    flex: 1;
    aspect-ratio: 1/1;
    border: solid 1px rgb(233, 233, 233);
    background-color: #fff;
}
.row {
    display: flex;
    flex: 1;
    width: 100%;
}

div.canvas-square:hover {
    background-color: rgb(223, 223, 223);
}

/* Resposive mobile */

@media (max-width: 1000px) {

.main-container {
    align-items: center;
}
.top-box, .center-box {
    display: block;
}
.sketch {
    width: 350px;
    height: 350px;
    margin-bottom: 30px;
}
.tools {
    width: 350px;
    flex-direction: column-reverse;
}
input.input-box {
    font-size: 0.9rem;
    width: 130px;
    height: 50px;
}
.btn, .newGrid {
    font-size: 0.9rem;
    width: 130px;
    height: 50px; 
}
.title, .credits, .guide {
    width: 350px;
}
.message {
    font-size: 0.8rem;
}
h1 {
    font-size: 1.4rem;
}
.title {
    margin: 0 0 30px 0;
}
}