* {
    margin:0;

    scrollbar-color: rgba(25, 78, 79, 0.5) rgba(17, 50, 66, 0.25);
    scrollbar-width: thin;
}

:root {
    --background-color: #132936;
    --text-color: #faebd7;
    --legend-color: #e2c3a7;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

header {
    margin-top: 1.5rem;
    text-align: center;
}

header h1 {
    text-wrap: nowrap;
    padding-bottom: 1rem;
    text-decoration: underline #faead680;
    cursor: default;
}
header a, #content a {
    color: #c6b49c;
}

button {
    background-color: rgba(0, 0, 0, 0);
    color: var(--text-color);
    border: 2px solid var(--text-color);
    padding: 0.75rem 1rem;
    border-radius: 5px;

    cursor: pointer; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

button:hover {
    border-style: groove;
}

select {
    background-color: var(--background-color);
    color:#e8c496;
    font-size: .8rem;
    border: 2px solid #e0c8a9;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    margin-bottom: 0.75rem;
    cursor: pointer; 
}

main {
    margin: calc(1.5rem + 2vw) auto;
    width: 75vw;
    text-align: center;
    align-items: center;
}

fieldset {
    background-color: #13232d;
    padding: 1rem;
    border: 2px solid #e4ae72;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#content_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: calc(.25rem + 0.5vh);
    margin-bottom: calc(.25rem + 1vh);
}

#content_buttons button {
    margin: 0 1rem;
    padding: 0.5rem 0.85rem;
}
textarea {
    width: 85%;
    height: 5rem;
    resize: none;
    background-color: #10242c;
    color: var(--text-color);
    border: 2px solid #e4ae72;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    scrollbar-color: rgba(19, 97, 98, 0.5) rgba(17, 50, 66, 0.25);
    scrollbar-width: thin;
}
#json_source{
    height: calc(10rem + 1vh);
    resize: vertical;
}
pre {
    color: var(--text-color);
    padding: 0.75rem 1rem;
}
legend {
    color: var(--legend-color);
    font-size: 1.25rem;
    transform: translateY(-3.5px);
    font-weight: bold;

    text-wrap: nowrap;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

legend::before {
    content: "\2027\16EB\2022\25CF\0020";
    color: var(--legend-color);
    font-size: 1.25rem;
    font-weight: bold;
} 

legend::after {
    content: "\0020\25CF\2022\16EB\2027";
    color: var(--legend-color);
    font-size: 1.25rem;
    font-weight: bold;
}  
footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    padding-bottom: 1rem;
}
.owner {
    cursor: default;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.owner u{
    cursor: progress;
}

@media (max-width: 645px) {
    * {
        scrollbar-width: none;
    }
    #content_buttons {
        flex-direction: column;
    }
    #content_buttons button {
        margin: 0.5rem auto;
        margin-top: calc(.125rem + 0.25vw);
        margin-bottom: calc(.125rem + 0.25vw);
    }
}