/**
 * Copyright (c) 2021 Nadav Tasher
 * https://github.com/Webhood/Template/
 **/

html {
    /* Scrolling */
    overflow-x: hidden;
    overflow-y: scroll;
    /* Sizing */
    height: 100%;
    width: 100%;
    /* Background */
    background-color: var(--theme);
}

body {
    /* Alignment */
    margin: auto !important;
}

/* Base properties */

[text], [button], [input], p, button, input, div, body, html {
    /* Font */
    font-family: sans-serif;
    text-decoration: none;
    /* Transition and Outline */
    outline: none;
    transition-duration: 0.5s;
    /* Overflow */
    overflow-wrap: anywhere;
}

[button], [input], [pointer] {
    /* Cursor type */
    cursor: pointer;
}

/* Flex properties */

[text], [button], [input], p, button, input, div, body, html {
    display: flex;
    flex-direction: column;
}

/* Alignment properties */

[text], [button], [input], p, button, input {
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: stretch;
}

div, body, html {
    justify-content: center;
    align-content: center;
    align-items: stretch;
}

/* Padding & Margin properties */

[text], p {
    margin: 0.5vh;
    padding: 0.5vh;
}

[button], button {
    margin: 1vh;
    padding: 1vh;
}

[input], input {
    margin: 1vh;
    padding: 0.5vh;
}

div, body, html {
    padding: 0;
    margin: 0;
}

[coasted] {
    margin: 1vh;
    padding: 1vh;
}

/* Sizing properties */

[text], [button], [input], p, button, input, div, body, html {
    line-height: 100%;
    min-height: fit-content;
}

[button], [input], button, input {
    width: auto;
}

[input], input {
    min-width: 0;
}

[stretch] > *, [stretched] {
    width: fill-available;
    width: -moz-available;
    width: -webkit-fill-available;
}

/* Border properties */

[input], input {
    border-style: solid;
    border-width: 0.35vh 0;
    border-radius: 0.75vh;
}

[button], button {
    border-style: solid;
    border-width: 1px;
    border-radius: 0.75vh;
}

[coasted] {
    border-radius: 1vh;
}

/* Color properties */

[text], [button], [input], p, button, input {
    color: var(--text);
    background-color: transparent;
}

[input], input {
    border-top-color: var(--passive);
    border-bottom-color: var(--active);
    background-color: var(--passive);
}

[button], button {
    border-color: var(--text);
    background-color: var(--passive);
}

[button]:hover, button:hover {
    background-color: var(--active);
}

[coasted] {
    filter: drop-shadow(0 0 1vh var(--active));
    background-color: var(--passive);
}

/* Flex direction properties */

[row] {
    flex-direction: row;
}

[column] {
    flex-direction: column;
}

/* Text alignment properties */

[center] {
    text-align: center;
    text-align-last: center;
}

[left] {
    text-align: start;
    text-align-last: start;
}

[right] {
    text-align: end;
    text-align-last: end;
}

/* Text size properties */

[tiny] {
    font-size: 1.5vh;
}

[small] {
    font-size: 2vh;
}

[medium] {
    font-size: 2.5vh;
}

[large] {
    font-size: 4vh;
}

[huge] {
    font-size: 5.5vh;
}

[gigantic] {
    font-size: 6.5vh;
}

/* Animations */

[breathing] {
    animation: breathing 2s ease-in-out 0s infinite alternate both;
}

@keyframes breathing {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.025);
    }
}

[spinning] {
    animation: spinning 2s linear 0s infinite normal both;
}

@keyframes spinning {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Additional properties */

[hidden] {
    display: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
}