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

/* VARIABLES */
:root{
    /* Color Hue */
    --minor-hue: 24deg;
    --major-hue: 209deg;
    --rest-hue: 0deg;

    /* HSL Color Mode */
    --major-color: hsl(var(--major-hue), 100%, 61%);
    --major-color-second: hsl(var(--major-hue), 64.85%, 64.71%);
    --major-color-lighter: hsl(var(--major-hue), 74.85%, 74.71%);
    --major-color-heaveier: hsl(var(--major-hue), 80%, 35%);

    --minor-color: hsl(var(--minor-hue), 100%, 50%);
    --minor-color-second: hsl(var(--minor-hue), 90%, 64.5%);
    --minor-color-light:hsl(var(--minor-hue), 55%, 85.5%);

    --body-color: hsl(var(--rest-hue), 0%, 92.16%);
    --container-color: hsl(var(--rest-hue), 0%, 75.29%);
    --container-color-second: hsl(var(--rest-hue), 0%, 50%);

    --container-color-dark: hsl(var(--rest-hue), 0%, 15.29%);
    --container-color-dark-second: hsl(var(--rest-hue), 0%, 35.29%);

    --text-color: hsl(var(--rest-hue), 5%, 0%);
    --title-color: hsl(var(--rest-hue), 5%, 5%);
    --input-color: hsl(var(--rest-hue), 15%, 10%);

    --text-color-light: hsl(var(--rest-hue), 100%, 100%);
    --title-color-light: hsl(var(--rest-hue), 100%, 95%);
    --input-color-light: hsl(var(--rest-hue), 90%, 100%);

    --border-color: hsl(var(--rest-hue), 60%, 99%);
    --scroll-bar-color: hsl(var(--major-hue), 12%, 90%);
    --scroll-thumb-color: hsl(var(--major-hue), 12%, 80%);

    /* Font and typography */
    --body-font: "Anta", sans-serif;  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --h4-font-size: 1rem;
    --normal-font-size: .9rem;
    --medium-font-size: .75rem;
    --small-font-size: .5rem;

    --header-height: 3rem;

    /* Font Weight */
    --font-thin: 100;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* Margins Bottom */
    /* .25rem = 4px, .5rem = 8px, .75rem = 12px */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /* z-index */
    --z-tooltop: 10;
    --z-fixed: 100;
    --z-modal: 1000;

    /* Border */
    --border-width: 1px;
    --border-width-bold: 3px;
    --border-radius: var(--mb-0-5);
}

/* GENERALS */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 16px;
    scroll-behavior: smooth;
}

body{
    margin: 0;

    font-family: var(--body-font);
    font-weight: var(--font-regular);
    font-size: var(--normal-font-size);
    font-style: normal;

    background-color: var(--body-color);
    color: var(--text-color);
    position: relative;
    min-height: 100vh;
}

h1{
    font-size: var(--h1-font-size);
}

h2{
    font-size: var(--h2-font-size);
}

h3{
    font-size: var(--h3-font-size);
}

h3{
    font-size: var(--h4-font-size);
}

h1,h2{
    color: var(--title-color);
    font-weight: var(--font-bold);
    margin-bottom: var(--mb-0-5);
}

h3,h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--mb-0-25);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

select,
input,
textarea{
    margin: var(--mb-0-5);
    padding: var(--mb-0-5);
    background: transparent;
    font-weight: var(--font-regular);
    transition: 0.5s all ease;
    font-family: inherit;
}

select,
input{
    border: none;
    border-bottom: solid var(--border-width) var(--container-color-dark);
}

textarea {
    border: var(--border-width) solid var(--container-color-dark);
}

textarea::placeholder,
input::placeholder {
    letter-spacing: 2px;
    font-size: var(--font-regular);
    font-weight: var(--font-thin);
}

textarea:focus,
input:focus {
    outline: none;
    background-color: var(--minor-color-second);
    color: var(--text-color-light);
    border-radius: var(--border-radius);
    transition: 0.5s all ease;
}

textarea:focus
, input:focus {
    border: var(--border-width-bold) solid var(--container-color-dark);
}

textarea:focus::placeholder,
input:focus::placeholder {
    opacity: 0;
}

/* Button */
button{
    margin: var(--mb-0-5);
    padding: var(--mb-0-5);
    font-family: inherit;
}

/* SCROLL BAR */
::-webkit-scrollbar{
    width: var(--mb-0-75);
    background-color: var(--scroll-bar-color);
    border-radius: var(--mb-0-5);
    transition: all .3s ease;
}

::-webkit-scrollbar-thumb{
    background-color: var(--scroll-thumb-color);
    border-radius: .5rem;
    transition: all .3s ease;
}

::-webkit-scrollbar-thumb:hover{
    background-color: var(--major-color-lighter);
}

.column {
    display: flex;
    flex-direction: column;
}

/* Header */
header{
	width: 100%;
	height: var(--header-height);

	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;

	background-color: var(--container-color-dark);
	color: var(--text-color-light);

	padding: 0 var(--mb-1);
	margin-bottom: var(--mb-1);
}

.header-content img{
    transition: all .5s ease;
}

.header-content img:hover{
    border-radius: var(--border-radius);
    transform: scale(1.05);
    transition: all .5s ease;
}

header img,
.header-content{
	height: calc(var(--header-height) - var(--mb-0-5));
}

.header-list{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: var(--mb-1);
}

.header-list li{
    height: 90%;
    display: flex;
    border-radius: var(--border-radius);
    transition: all .5s ease;
}

.header-list li:hover{
    background-color: var(--text-color-light);
    transition: all .5s ease;
}

.header-list li a{
	margin: 0 var(--mb-1);
	color: var(--text-color-light);
    align-self: center;
    transition: all .5s ease;
}

.header-list li:hover a{
    color: var(--text-color);
    transition: all .5s ease;
}

.header-profile{
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	margin-left: var(--mb-2);
}

.header-profile img{
	width: calc(var(--header-height) - var(--mb-0-5));
	overflow: hidden;
	border-radius: 50%;
	object-fit: cover;
	margin-left: var(--mb-0-75);
}

/* Main */
main{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

/* Footer */
footer{
	height: calc(var(--header-height) * 2);
	background-color: var(--container-color-dark);
	color: var(--text-color-light);
	text-align: center;
	padding: var(--mb-1);
	position: absolute;
	bottom: calc(var(--header-height) * -2 - var(--mb-2));
	width: 100%;
}