@import url("data.css");
@import url("animations.css");
@import url("button.css");
@import url("input.css");
@import url("output.css");
@import url("list.css");

body {
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    margin: 0;
    background-color: var(--main-bg-color);
    animation-duration: var(--main-out-duration);
    color: var(--main-font-color);
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--main-font-size);
    font-weight: var(--main-font-weight);
}

*, *::before, *::after {
    box-sizing: border-box;
}

main {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    align-content: start;
    justify-items: center;
    row-gap: calc(2 * var(--main-gap));
    padding-top: calc(6 * var(--main-gap));
}

pre {
    font-family: inherit;
    margin: 0;
}

svg {
    fill: var(--main-font-color);
    transition: fill var(--main-out-duration);
    width: 1em;
    height: 1em;
}

.digit {
    color: var(--input-digit-color);
}

header {
    display: grid;
    justify-items: center;
}

.title-box {
    display: flex;
    align-items: center;
    column-gap: calc(var(--main-gap) / 2);
}

.logo {
    width: 1em;
}

.title {
    text-shadow: 0 0 var(--main-text-shadow) var(--main-theme-color);
}

.buttons-box {
    justify-self: start;
    display: flex;
}

footer {
    font-size: x-small;
    justify-self: center;
}