@charset "UTF-8";

@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-VariableFont_opsz,wght.ttf");
}

:root {
    --black: #010326;
    --blue: #244BBF;
    --light-blue: #88A2F2;
    --gray: #5e5c5c;

    --extra-large: 80px;
    --large: 50px;
    --medium: 30px;
    --small: 24px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 50% 50%;
    background-color: var(--black);
}

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

header {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    grid-column-start: 1;
    grid-column-end: 3;
}

aside {
    flex-direction: column;
    gap: 30px;
    background-color: white;
    border-radius: 32px;
    padding: 30px 50px;
    max-width: 20vw;
    height: fit-content;
}

.icon-aside {
    width: 45px;
    height: 45px;
    margin: 20px;
}

#profile-image {
    margin: 10px;
    width: 70%;
}

h3 {
    font-family: Inter, sans-serif;
    font-weight: bold;
    color: var(--blue);
    font-size: var(--medium);
    margin: 10px;
}

p {
    font-family: Inter, sans-serif;
    color: var(--gray);
    font-size: var(--small);
    margin: 10px;
    text-align: center;
}

#menu {
    background-color: var(--blue);
    border-radius: 24px;
    padding: 10px 50px;
    max-width: fit-content;
    gap: 30px;
}

.icon {
    width: 32px;
    height: 32px;
}

#content {
    width: 100%;
}

main {
    flex-direction: column;
    margin-top: 0;
    width: fit-content;
    grid-area: 2 / 2 / 3 / 2;
}

#main-center {
    flex-direction: column;
    grid-area: 3 / 1 / 4 / 2;
    width: 100vw;
}

#main-center section {
    width: 100% !important;
    justify-content: center;
    text-align: center;
    padding: 0 10%;
    box-sizing: border-box;
}

#main-center section h1 {
    text-align: center;
}

section {
    flex-direction: column;
    align-items: flex-start !important;
    width: 37vw;
    margin-top: 20px;
}

h1 {
    font-family: Inter, sans-serif;
    font-weight: bold;
    color: white;
    font-size: var(--extra-large);
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 20px;
}

h2 {
    font-family: Inter, sans-serif;
    color: var(--light-blue);
    font-weight: normal;
    font-size: var(--medium);
}

span {
    color: var(--light-blue);
    font-size: var(--large);
}

#skills-container {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    grid-template-rows: repeat(3, auto);
    margin-top: 7%;
}

.skill-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.skill-box img {
    border-radius: 8px;
    height: 80px;
}

.skill-box h2 {
    font-weight: bold;
    font-size: var(--medium);
}

.skill-box span {
    font-weight: normal;
    color: white;
    font-size: var(--small);
    width: 100%;
}

.project-box {
    width: 100%;
    min-width: fit-content;
    border: solid var(--light-blue) 2px;
    border-radius: 18px;
    padding: 10px 20px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.project-box h2 {
    border-bottom: solid transparent 2px;
    transition: .5s;
}

.project-box:hover h2 {
    border-bottom: solid var(--light-blue) 2px;
}

#contact h2 {
    padding: 0 10%;
}

#contact-button {
    text-decoration: none;
    padding: 0px 50px;
    background-color: var(--blue);
    box-sizing: border-box;
    border-radius: 24px;
    margin: 30px;
    border: solid var(--blue) 3px;
    transition: .5s;
}

#contact-button:hover {
    background-color: transparent;
}

#contact-button img {
    margin: 10px;
}

#contact-button h2 {
    padding: 0;
    margin: 0;
    color: white;
    white-space: preserve nowrap;
}

footer {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-top: 10%;
}