:root {
    --text: rgb(27, 27, 27);
    --header: rgb(27, 27, 27);

    --background: rgb(201, 201, 201);

    --font-body: 'Courier New', Courier, monospace;
    --font-header: 'Courier New', Courier, monospace;

    --button-border: black;
    --button-background: rgb(226, 226, 226);
    --button-shadow: 2px 2px 0px;
    --button-shadow-hover: 5px 5px 0px;

    --input-background: rgb(204, 204, 204);
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-body);
}

a {
    text-decoration: none;
}

/* TRANSITIONS */
/* --------------------------------------------------------------------------------------------- */

.transition-eio {
    transition: 0.2s ease-in-out;
}

/* ALIGNMENT */
/* --------------------------------------------------------------------------------------------- */

.center-page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* BORDER */
/* --------------------------------------------------------------------------------------------- */

.simple-border {
    border: 1px solid black
}

/* BUTTON */
/* --------------------------------------------------------------------------------------------- */

.basic-button {
    border: 1px solid var(--button-border);
    background-color: var(--button-background);
    filter: drop-shadow(var(--button-shadow) var(--button-border));

    font-family: var(--font-body);
    text-decoration: none;
    color: var(--text);

    padding: 3px;

    height: fit-content;
    margin-bottom: 15px;

    text-align: center;
    align-content: center;
}

.basic-button:hover {
    filter: drop-shadow(var(--button-shadow-hover) var(--button-border));
    scale: 1.007;

    background-color: rgb(207, 173, 173);
}

a.disabled, button.disabled {
    pointer-events: none;
    color: var(--button-background);
}

/* INPUT */
/* --------------------------------------------------------------------------------------------- */

.basic-input {
    border: 1px solid var(--button-border);
    background-color: var(--input-background);

    font-size: 0.8rem;
    padding: 3px;
}

/* CALCULATOR */
/* --------------------------------------------------------------------------------------------- */

.calculator {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 30px 30px 30px 30px;
    
    place-content: center;

    gap: 10px 10px;

    border: 1px solid var(--button-border);
    background-color: var(--button-background);
    filter: drop-shadow(var(--button-shadow) var(--button-border));
    
    padding: 15px;
    /* height: calc(30*5 + 10*4); */
    height: 225px;
    width: 450px;
}

.calculator .input {
    grid-column-start: 1;
    grid-column-end: 6;
}

.calculator .input input {
    width: 445px;
    height: 45px;

    text-align: end;

    font-size: 2rem;
}

.calculator .del {
    grid-row: 4 / span 2;
    height: 60px; /* a bit annoying tbh */
}

/* RANDOM WIKI */
/* --------------------------------------------------------------------------------------------- */

.article-page p {
    margin-bottom: 15px;
    padding: 2px;
}

/* CONVERT SPACE */
/* --------------------------------------------------------------------------------------------- */

.display-box {
    padding: 7px;
    overflow-y: auto;
    border: 1px solid var(--button-border);
    background-color: var(--button-background);
}

.display-code {
    padding: 7px;
    overflow-x: auto;
    border: 1px solid var(--button-border);
    background-color: var(--button-background);
    border-radius: 5px;
}

/* HEADER */
/* --------------------------------------------------------------------------------------------- */

.header {
    color: var(--header);
    font-family: var(--font-header);
    text-transform: capitalize;
}

/* WIDTH */
/* --------------------------------------------------------------------------------------------- */

.width-full {
    width: 100vw;
}

.width-800px {
    width: 800px;
}

.width-500px {
    width: 500px;
}

.width-100 {
    width: 100%;
}

/* HEIGHT */
/* --------------------------------------------------------------------------------------------- */

.height-full {
    height: 100vh;
}
/* 
.height-15px {
    height: 15px;
} */

.height-800px {
    height: 800px;
}

.height-500px {
    height: 500px;
}

.height-250px {
    height: 250px;
}

.height-100 {
    height: 100%;
}

.height-max-content {
    height: max-content;
}

/* DISPLAY */
/* --------------------------------------------------------------------------------------------- */

.display-flexbox {
    display: flexbox;
}

.display-block {
    display: block;
}

.display-hidden {
    display: hidden;
}

/* POSITION */
/* --------------------------------------------------------------------------------------------- */

.position-absolute {
    position: absolute;
}

.position-static {
    position: static;
}

.position-sticky {
    position: sticky;
}

/* MARGIN */
/* --------------------------------------------------------------------------------------------- */

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

.margin-top-15px {
    margin-top: 15px;
}

/* ALIGN */
/* --------------------------------------------------------------------------------------------- */

.text-align-center {
    text-align: center;
}

.justify-items-center {
    justify-items: center;
}