body {
    background-color: #0d0d24;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    font-family: "Courier New", Courier, monospace;
}
#main {
    max-width: 800px;
    height: 80vh;
    overflow-y: auto;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
    margin-top: 2rem;
    background-color: #5400b4;
    border: 4px dashed goldenrod;
    padding: 1rem 1rem;
}
a {
    font-weight: bold;
    text-decoration: underline;
    color: goldenrod;
}
input[type="text"],
input[type="number"],
input[type="password"] {
    padding: 0.25rem;
    border: 2px solid goldenrod;
    background-color: #300066;
    font-family: inherit;
    color: #fff;
    outline: goldenrod;
}
input[type="text"]::placeholder {
    font-style: italic;
}
select {
    padding: 0.25rem;
    border: 2px solid goldenrod;
    background-color: #300066;
    font-family: inherit;
    color: #fff;
}
button {
    padding: 0.5rem;
    border: 2px solid goldenrod;
    background-color: #300066;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
}

.foot {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    text-align: center;
    color: #fff;
    font-size: 0.75rem;
}
#top {
    background-color: #300066;
    padding: 1rem 1rem;
    box-sizing: border-box;
    border: 2px solid goldenrod;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#top > h1 {
    font-size: 3rem;
}
#top > p {
    font-style: italic;
}
#steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.step {
    flex: 1;
    padding: 1rem;
    border: 2px dashed goldenrod;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.step-active {
    border: 2px solid goldenrod;
    background-color: #65418d;
}
.step-done {
    border: 2px solid goldenrod;
}
#middle {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-setting {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.setup-buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}
#custom-css-p {
    display: none;
}
textarea {
    display: none;
    height: 300px;
    resize: vertical;
}
#restricted-word {
    width: 200px;
}
#add-restricted-word {
    width: fit-content;
}
.restrictedwords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.restricted-word-item {
    border: 2px solid goldenrod;
    background-color: #300066;
    padding-left: 0.5rem;
}
.restricted-word-item button {
    margin-left: 0.5rem;
}
#signs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sign {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px dashed goldenrod;
    background-color: #300066;
    box-sizing: border-box;
}
.sign-name {
    font-weight: bold;
    color: goldenrod;
}
.sign-time {
    font-style: italic;
    color: gray;
}
#inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}