#btn {
    border: none;
    font-family: "MS PGothic", system-ui;
    width: 160px;
    height: 40px;
    border-radius: 3px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color-2);
    color: var(--text-color);
}

#btn:hover {
    cursor: pointer;
    filter: brightness(1.2);
}


.center-container {
    flex-direction: column;
    align-items: center;
}

.center-container button {
    border: none;
    font-family: "MS PGothic", system-ui;
    width: 160px;
    height: 40px;
    border-radius: 3px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color-2);
    color: var(--text-color);
}

.center-container button:hover {
    cursor: pointer;
    background-color: var(--box-background-color-2);
}


#color-theme-buttons, #filtering-buttons {
    flex-direction: row;
    gap: 10px;
}


/* CSS file or <style> tag in HTML */

/* default colors, useful if somehow the theme doesn't get set */
:root {
    --color1: rgb(18, 97, 75);
    --color2: rgb(50, 142, 110);
    --color3: rgb(103, 174, 110);
    --color4: rgb(144, 198, 124);
    --color5: rgb(225, 238, 188);
}

/* css variables for green theme */
.green {
    --color1: rgb(18, 97, 75);
    --color2: rgb(50, 142, 110);
    --color3: rgb(103, 174, 110);
    --color4: rgb(144, 198, 124);
    --color5: rgb(225, 238, 188);
}

/* css variables for blue theme */
.blue {
    --color1: rgb(18, 36, 97);
    --color2: rgb(50, 71, 142);
    --color3: rgb(93, 144, 176);
    --color4: rgb(124, 190, 198);
    --color5: rgb(188, 235, 238);
}

#theme-box {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

#theme-box div {
    width: 100px;
    height: 100px;
    border-radius: 3px;
}

/* each box's background color is a variable, so it can change dynamically */
#theme-box :nth-child(1) {
    background-color: var(--color1);
}

#theme-box :nth-child(2) {
    background-color: var(--color2);
}

#theme-box :nth-child(3) {
    background-color: var(--color3);
}

#theme-box :nth-child(4) {
    background-color: var(--color4);
}

#theme-box :nth-child(5) {
    background-color: var(--color5);
}

.gallery {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery img {
    width: 100px;
    height: 100px;
    border-radius: 3px;
}