/*
    CSS normalize V1.0
    with <3 by Matteo Manià
    -----------------------------------
    In the root, you can change the default values.
    And then, all the color will change (ex. body, section, titles).
    -----------------------------------
    > Disclaimer: ***NORMALIZE.css ARE NOT RESET.css. THIS IS A 
    PERSONALIZED LAYOUT, THE CONCEPT IS AS STUDIED AS FRAMEWORK.***
    -----------------------------------
    MIT license 2022 all right deserved.
*/

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

/* defaul colors */
/* primary colors: white, black and blue. */
:root {
    /* all colors */
    --txt-primary: black;
    --txt-secondary: #393939;
    --txt-muted: #999;
    --txt-link: #288bd7;
    --txt-linkHover: #519fdb;

    --bg-dark: #202020;
    --bg-white: #fefefe;
    --bg-gray: #a0a0a0;

    --section-primary: #f4f4f4;
    --section-secondary: #539eff;

    --danger: #f34f4f;
    --warning: #d4d462;
    --info: #459efd;

    --border: 2px solid #444;
    --border-radius: 6px;

    /*paddings*/
    --pad-box: 1rem;
    --pad-mini: .75rem;
    --pad-medium: 2rem;
    --pad-big: 3rem;
    --pad-aside: 4rem;

    /*fonts*/
    --fs-1: 3.0rem;
    --fs-2: 2.2rem;
    --fs-3: 1.65rem;
    --fs-4: 1.2rem;
    --fs-5: 0.75rem;

    /* transitons */
    --transition-fast: 250ms;
    --transition-normal: 500ms;
    --transition-slow: 800ms;
    --ease: ease;
    --ease-in: ease-in;
    --ease-in-out: ease-in-out;
    --cube-bezier-exponential: cubic-bezier(0.65, 0, 0, 1.03);
    --cube-bezier-quadratic: cubic-bezier(0.44, 0.34, 0.18, 0.93);
    --cube-bezier-oneShoot: cubic-bezier(0.25, .5, 0.11, 1.025);
}

html, body {
    margin: 0;
    padding: 0;
    font-stretch: normal;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--txt-primary);
    min-height: 100vh;
}

main {
    color: var(--txt-primary);
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

embed, iframe, video {
    border: 0
}

img {
    image-rendering: optimizeQuality;
    height: auto;
    max-width: 100%;
    background-size: cover;
    border-style: none;
}

h1 {
    font-size: 3.5em
}

h2 {
    font-size: 2.5em
}

h3 {
    font-size: 2em
}

h4 {
    font-size: 1.5em
}

h5 {
    font-size: 1em
}

p {
    font-size: var(--fs-4);
    color: var(--bg-gray);
}

h1, h2, h3, h4, h5, h6, span, article, section {
    color: var(--txt-primary);
    font-family: inherit;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
}

p {
    font-weight: 400
}

a {
    color: var(--txt-link);
    font-size: var(--fs-4);
    text-decoration: none;
    background-color: transparent;
}

ul, ol {
    list-style: none
}

li {
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
}

a {
    background-color: transparent
}

a:hover,
a:focus {
    color: inherit;
    text-decoration: underline;
}

section {
    color: var(--bg-dark);
    background-color: inherit;
    margin: 0 0;
}

hr {
    height: 0;
    overflow: visible;
}

pre {
    font-size: 1em
}

b, s, strong {
    font-weight: bold
}

code, kbd, samp, area, map {
    font-family: monospace;
    font-size: 1em
}

small {
    font-size: calc((100% - 25%))
}

sub {
    bottom: -.275em
}

sup {
    top: -.525em;
}

button, input {
    line-height: 1.175;
    overflow: visible;
}

button, select {
    text-transform: none
}

/*Padding Firefox.*/
fieldset {
    padding: 0.35em 0.75em 0.625em
}

legend {
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    white-space: normal;
    /* 1 */
    color: inherit;
    /* 2 */
    padding: 0
}

progress {
    vertical-align: baseline;
    vertical-align: -webkit-baseline-middle;
}

textarea {
    overflow: auto
}

[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline-offset: -1px;
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

/* some custom classes */
.btn {
    background-color: var(--txt-link);
    border: var(--section-secondary);
    border-radius: var(--border-radius);
    color: var(--white);
    padding: var(--pad-mini) var(--pad-medium);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    font-size: 1.1rem;
    transition: none;
    cursor: pointer;
    appearance: none;
        -webkit-appearance: none;
            -moz-appearance: none;
}

.btn:active:not(.btn.active), .btn:focus:not(.btn.active) {
    outline: none !important;
    border: none !important;
}

.btn:hover:not(.btn.active), .btn:focus-within:not(.btn.active) {
    opacity: .90;
}

.active {
    background-color: var(--txt-link);
    border: var(--section-secondary);
    border-radius: var(--border-radius);
    color: var(--white);
    padding: var(--pad-mini) var(--pad-medium);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    font-size: 1.1rem;
    transition: none;
}

.active:hover, .active:focus, .active:is(:active) {
    cursor: pointer;
    background-color: var(--txt-linkHover);
    transform: scale(1.02);
    outline: 1px #fff;
}

.disabled {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: .875;
    user-select: none !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
}

.no-underline {
    text-decoration: none !important;
    text-transform: none !important;
}

.underline {
    text-decoration: underline !important;
    text-transform: inherit !important;
}

.br-radius {
    border-radius: var(--border-radius)
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: calc((100% - 33.333%));
    padding: 2px 16px;
    margin: 0 auto !important;
    flex-grow: 1;
    transition: var(--transition-normal) var(--cube-bezier-oneShoot);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.card-footer {
    border-top: 1px solid rgba(218, 218, 218, 0.97)
}

.center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.grid {
    display: grid;
    place-content: center;
    place-items: center;
    grid-template: minmax(1fr);
}

/* margins */
.my-auto {
    margin: auto 0
}

.mx-auto {
    margin: 0 auto
}

.m-auto {
    margin: auto
}

.mx-default {
    margin: 0 1rem
}

.my-default {
    margin: 1rem 0
}

/* paddings */
.pad {
    padding: var(--pad-box)
}

.pad-mini {
    padding: var(--pad-mini)
}

.pad-medium {
    padding: var(--pad-medium)
}

.pad-big {
    padding: var(--pad-big)
}

.pad-extra {
    padding: var(--pad-aside)
}

/* sections */
.section {
    color: var(--txt-primary);
    background-color: var(--section-primary);
}

.section-secondary {
    background-color: var(--bg-white)
}

.section-small {
    min-height: 33vh
}

.section-medium {
    min-height: 66vh
}

.section-big {
    min-height: 100vh
}

/* flexbox */
.flex {
    display: flex
}

.flex-grow {
    /* normalize */
    flex-grow: 1 / 1
}

.flex-shrink {
    flex-shrink: 1 / 1
}

/* lists */
.list {
    list-style: decimal
}

.list.ordered {
    list-style: decimal-leading-zero
}

.table {
    display: grid;
    grid-template: minmax(1fr 1fr 1fr);
    max-width: 100%;
    border: 1px solid var(--bg-dark);
}

/* some classes for links, button and input */
.is-danger, .is-link, .is-warning {
    color: var(--bg-white)
}

.is-danger {
    background-color: var(--danger) !important
}

.is-link {
    background-color: var(--info) !important
}

.is-warning {
    background-color: var(--warning) !important
}

/* col & row */
.row, .column {
    display: flex
}

.row {
    flex-direction: row
}

.column {
    flex-direction: column
}

/* transitions */
.ease {
    transition: var(--ease)
}

.ease-in {
    transition: var(--ease-in)
}

.ease-in-out {
    transition: var(--ease-in-out)
}

.cubic-bezier {
    transition: var(--cube-bezier-exponential)
}

.cubic-bezier-quadratic {
    transition: var(--cube-bezier-quadratic)
}

.cubic-bezier-shoot {
    transition: var(--cube-bezier-oneShoot)
}

/* end all custom classes */


/*tables*/
dd, blockquote {
    margin-left: 40px
}

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

q, q::before, .q::after {
    content: '';
    clear: both;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: -.1em;
}

address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
}

:where(audio, canvas, iframe, img, svg, video) {
    image-rendering: optimizeQuality;
    vertical-align: middle;
}

:where(progress) {
    vertical-align: baseline
}

label {
    color: var(--txt-secondary);
    margin: 1em 0;
}

input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
    background: var(--bg-white);
    background-clip: padding-box;
    border: var(--border);
    border-radius: var(--border-radius);
    color: var(--txt-secondary);
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    padding: var(--pad-mini) var(--pad-medium);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
    max-width: 100%;
    display: flex;
    appearance: none;
    -webkit-appearance: none;
}

input[type=color] {
    background-color: var(--bg-white);
    display: inline-block;
    vertical-align: middle;
}

input:not([type]),
input[type=color] {
    border: var(--border);
    border-radius: var(--border-radius);
}

input:not([type]) {
    background: var(--bg-white);
    color: var(--txt-secondary);
    display: block;
    padding: var(--pad-mini) var(--pad-medium);
    text-align: left;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}

input:not([type]):focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
    background-color: var(--bg-white);
    border-color: var(--txt-link);
    box-shadow: 0 0 0 .4rem rgba(17, 47, 95, 0.2);
    outline: 0;
}

input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus {
    outline: 1px thin var(--txt-linkHover);
}

input:not([type])[disabled],
input[type=color][disabled],
input[type=date][disabled],
input[type=datetime-local][disabled],
input[type=datetime][disabled],
input[type=email][disabled],
input[type=month][disabled],
input[type=number][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=text][disabled],
input[type=time][disabled],
input[type=url][disabled],
input[type=week][disabled],
select[disabled],
textarea[disabled] {
    background-color: var(--dividers);
    color: var(--section-secondary);
    cursor: not-allowed;
    opacity: 1;
}

input:focus:invalid,
select:focus:invalid,
textarea:focus:invalid {
    border-color: var(--danger);
    color: var(--danger);
}

input[type=checkbox]:focus:invalid:focus,
input[type=file]:focus:invalid:focus,
input[type=radio]:focus:invalid:focus {
    outline-color: var(--danger);
}

select {
    border: var(--border);
    vertical-align: sub;
}

select:not([size]):not([multiple]) {
    height: calc(2.25rem + 10px)
}

select[multiple] {
    height: auto
}

/*  
*   Upload buttons, 
*   Remove inner padding, 
*   adjust height
*   style (Chrome, Safari and Edge)
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

::-webkit-search-decoration {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

::-webkit-file-upload-button {
    font: inherit;
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
}

/*forms actions*/
label {
    display: inline-block;
    line-height: 2;
}

fieldset {
    border: 0;
    margin: 0;
}

fieldset, legend {
    padding: var(--pad-mini 0)
}

legend {
    font-size: var(--fs-2);
    color: var(--txt-muted);
    min-width: 100%;
}

textarea {
    overflow: auto;
    resize: vertical;
    flex-direction: column;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    display: inline;
    padding: 0;
}

button,
input[type=button], input[type=reset], input[type=submit] {
    background-color: var(--bg-gray);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--bg-white);
    display: inline-block;
    font-size: var(--fs-3);
    padding: var(--pad-mini) var(--pad-mini);
    text-align: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
}

button::-moz-focus-inner,
input[type=button]::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=submit]::-moz-focus-inner {
    padding: 0;
}

input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background-color: var(--bg-gray);
    border-color: var(--bg-dark);
    color: var(--section-primary);
}

.btn.active:focus,
input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus {
    box-shadow: 0 0 0 .4rem rgba(62, 131, 241, 0.2);
    outline: 0
}

button:disabled,
input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled {
    background-color: var(--bg-gray);
    color: var(--bg-white);
    border-color: var(--bg-dark);
    opacity: .8;
    cursor: not-allowed
}