@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat.ttf);
}

html, body {
    font-family: Montserrat;
    height: 100%;
    color: #eeeeee;
    background-color: #241f31;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #171421;
    display: flex;
    justify-content: center;
}

.content {
    display: flex;
    flex: 1;
}

#container {
    display: flex;
    flex: 1;
}

#easel {
    height: 512px;
    width: 512px;
    margin: 64px;
    border: solid 1px;
    display: flex;
    align-self: center;
}

#canvas {
    height: 512px;
    width: 512px;
    background-color: #ffffff;
    display: grid;
}

.pixel.border {
    border: solid 1px #9c9c9c;
}

.menu {
    min-width: 180px;
    background-color: #171421;
    margin: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex: 0;
}

.tools {
    display: flex;
    flex: 0;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px;
}

#fillbtn {
    cursor: not-allowed;
}

.colors {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dropdown {
    position: relative;
    display: inline-block;
}  

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #241f31;
    border: solid 1px black;
    border-radius: 12px;
    min-width: 120px;
    overflow: auto;
    z-index: 1;
}

.dropdown-content a {
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown a:hover {
    background-color: #514b5f;
}

.show {
    display: block;
}

button {
    height: 64px;
    width: 64px;
    margin: 4px;
    background-color: #ffffff;
    border: solid 2px #3B3B3B;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background-color: #b9b9b9;
}

button:active {
    background-color: #9c9c9c;
}

button.active {
    background-color: #9c9c9c;
}

#color, #bgcolor {
    height: 64px;
    width: 64px;
    border: 0px;
    padding: 0px;
    cursor: pointer;
}

.extra-tools {
    margin: 8px;
    display: flex;
    justify-content: center;
}

.footer {
    background-color: #171421;
    display: flex;
    justify-content: center;
}

#github {
    margin: 8px;
}