/* Universal */

body {
    background-color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

div.header {
    margin: 6em auto 0;
    width: fit-content;
}
div.header h1 {
    color: #8e6;
    font-size: 3em;
}

div.main {
    border: #555 2px solid;
    border-radius: 8px;
    margin: 3em auto;
    width: 65%;
    padding: 2.5em 4em;
}

p {font-size: 1.2em;}

a {color: #4de}
a:hover {color: #6ff}

/* Index */

.btn-container {
    width: 100%;
}
.btn-container a {
    display: block;
    color: #fff;
    width: 85%;
    margin: 0.8em auto;
}
.btn-container button {
    width: 100%;
    padding: 0.6em;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.2em;
}
.btn-container button:hover {
    background-color: #555;
}

/* Fic Poisoner */

.form-container {
    width: 85%;
    margin: auto;
}
.dual-text {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.dual-text textarea {
    resize: none;
    width: 95%;
    margin: auto;
    height: 20em;
}

.code-example {
    background-color: #444;
    padding: 0.75em;
    border-radius: 4px;
}

.notice {
    font-weight: bold;
    color: #f55;
}

@media only screen and (max-width: 640px) {
    p {font-size: 1.05em;}
    .dual-text {grid-template-columns: 1fr;}
}