/* Font stuff */
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
/* Font stuff */

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END OF CSS RESET */

/* Defaults */
:root {
    --color-primary: #000;
    --color-secondary: #fff;
    --color-tertiary: #e92e19;
    --color-quaternary: #ee897d;
    --color-quinary: #bfbfbf;
}

html {
    font-family: 'Neucha', Arial, sans-serif;
    font-size: 16px;
    background-color: var(--color-secondary);
    scroll-behavior: smooth;
    color: var(--color-primary);
}

ul {
    margin-left: 1rem;
}

ul li {
    list-style: disc;
    margin-left: 1.25rem;
}

header,
footer {
    color: var(--color-secondary);
    background-color: var(--color-primary);
    min-height: 5rem;
}

.header-copy,
.footer-copy {
    display: inline-block;
    color: var(--color-secondary);
    margin: 2rem;
    line-height: 1.25;
}

.header-copy {
    font-size: 1.25rem;
}

header div.header-copy {
    cursor: pointer;
}

.copyright {
    margin-top: 1rem;
}

a:link {
    color: var(--color-tertiary);
    transition: 0.2s;
}

a:visited {
    color: var(--color-tertiary);
}

a:hover {
    color: var(--color-quaternary);
}

a:active {
    color: var(--color-secondary);
}

main {
    margin: 2rem;
}

.page-top__h1 {
    display: inline-block;
    color: var(--color-primary);
    font-size: 2rem;
    margin: 0.5rem 0;
}

.form,
.output__text,
.output__text div,
.output__text p,
.output__text li {
    margin: 0.75rem 0;
    animation: fade-in 2s;
}

.form__question {
    line-height: 4;
}

.txt-three-quarters {
    font-size: 0.75em;
}

.fraction {
    margin: 1rem auto;
}

.fraction__numerator,
.fraction__denominator {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.fraction__numerator {
    grid-template-areas: "numerator-label numerator-input numerator-input";
}

.numerator__label {
    grid-area: numerator-label;
    margin: auto;
}

.numerator__input {
    grid-area: numerator-input;
}

.fraction__vinculum {
    border: 0;
    border-top: 2px solid var(--color-primary);
}

.fraction__denominator {
    grid-template-areas: "denominator-label denominator-input denominator-input";
}

.denominator__label {
    grid-area: denominator-label;
    margin: auto;
}

.denominator__input {
    grid-area: denominator-input;
}

.numerator__input,
.denominator__input {
    border: none;
    border-radius: 0.25rem;
    border: 0.125em solid var(--color-primary);
    width: 75%;
    min-width: 5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    text-align: center;
}

[id^="btn"] {
    display: inline-block;
    font-family: 'Neucha', Arial, sans-serif;
    font-size: 1rem;
    border: 0.125rem solid var(--color-primary);
    border-radius: 0.5rem;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 0.5rem 1rem;
    margin: 0.15rem;
    cursor: pointer;
    transition: 0.2s;
}

[id^="btn"]:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

[id^="btn"]:active {
    color: var(--color-quinary);
}

.page-top__btn-random {
    background-color: var(--color-tertiary);
    color: var(--color-secondary);
    border: 0.125rem solid var(--color-tertiary);
}

.page-top__btn-random:hover {
    background-color: var(--color-secondary);
    color: var(--color-tertiary);
}

.page-top__btn-random:active {
    color: var(--color-quaternary);
}

.page-top__btn-random_disabled,
.page-top__btn-reload_disabled,
.page-top__btn-colour_disabled {
    cursor: not-allowed;
    background-color: var(--color-secondary);
    color: var(--color-quinary);
    border-color: var(--color-quinary);
}

.page-top__btn-random_disabled:hover,
.page-top__btn-reload_disabled:hover,
.page-top__btn-colour_disabled:hover {
    background-color: var(--color-secondary);
    color: var(--color-quinary);
}

div.output__dots-container {
    margin: 1rem 0;
    background-color: var(--color-secondary);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    border-radius: 0.5rem;
    padding: 1rem;
}

.btn-colour__on,
.btn-colour__off {
    text-transform: uppercase;
}

[class^="dot"] {
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    margin: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    animation: fade-in 2s;
}

.dot-hit {
    background-color: var(--color-tertiary);
    border: 2px solid var(--color-tertiary);
}

.scroll-to-top-btn {
    text-align: center;
    font-size: large;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    height: 3rem;
    width: 3rem;
    color: var(--color-secondary);
    background-color: var(--color-tertiary);
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s;
}

.scroll-to-top-btn:hover {
    background-color: var(--color-quaternary);
}

.text-tertiary-color {
    color: var(--color-tertiary);
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (min-width: 576px) {
    html {
        font-size: 1.25rem;
    }

    main {
        width: 75%;
        margin: 2rem auto;
    }

    .colour-toggle__legend {
        margin-top: 0;
    }
}

@media screen and (min-width: 992px) {
    main {
        text-align: center;
        min-height: 25rem;
    }

    .fraction {
        margin: 1rem auto;
        width: 50%;
    }

    div.output__dots-container {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .scroll-to-top-btn {
        opacity: 1;
    }
}