/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800&display=swap');

/* VARIABLES */

:root {

    /* Color Styles */
    --black: #000;
    --white: #fff;
    --gray: #58575a;

    /* Font Size Desktop */
    --header1: 64px;
    --header2: 48px;
    --header3: 42px;
    --header4: 36px;

    --text-big: 34px;
    --text-medium: 24px;
    --text-regular: 18px;
    --text-light: 13px;

    /* Font Weight */
    --font-bold: 700;
    --font-semibold: 600;
    --font-medium: 500;
    --font-regular: 400;
    --font-light: 300;
}

body{
    font-family: 'Poppins', sans-serif;
}

section{
    margin: 0 10rem;
}

/* NAVBAR */

.navbar {
    padding: 48px 0;
}
.navbar-brand {
    font-size: var(--text-big);
    font-weight: var(--font-regular);
}

a.nav-link {
    margin-right: 39px;
    font-size: var(--text-medium);
    font-weight: var(--font-regular);
    color: var(--black) !important;
}

/* HERO SECTION */
#hero{
height: 70vh;
}

#hero-text{
    margin-top: 4rem;
    padding-left: 2rem;
}

.text-label{
    font-size: var(--text-regular);
    font-weight: var(--font-regular);
    color: var(--gray);
}

.text-hero-bold{
    font-size: var(--header1);
    font-weight: var(--font-semibold);
}

.text-hero-regular{
    font-size: var(--text-big);
    font-weight: var(--font-medium);
    color: var(--gray);
}

.hero-btns{
margin-top: 1rem;
}

.btn{
    font-size: var(--text-light);
    font-weight: var(--font-semibold);
}

#cv-btn{
    color: var(--black);
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
}

#contact-btn{
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
    border: var(--gray) 0.1rem solid;
    background: rgb(53, 53, 53);
    color: var(--white);
}

#hero-img > img{
    display: flex;
    height: 400px;
    width: 400px;
    margin: auto 0;
    object-fit: cover;
    border-radius: 50%;
}

/* ABOUT SECTION */

#about-section{
    height: 100vh;
}

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

#about-small{
    font-size: var(--text-regular);
    font-weight: var(--font-regular);
    color: var(--gray);
}

.about-img >img {
    display: flex;
    height: 400px;
    width: 400px;
    margin: auto 0;
    object-fit: cover;
    border-radius: 25%;
}

#about-big{
    font-size: var(--header1);
    font-weight: var(--font-semibold);
}

.about-sqr{
    border: solid var(--gray) 0.1rem;
    border-radius: 2rem;
    text-align: center;
    padding: 1.5rem;
}

.about-subtitle{
    color: var(--black);
    font-size: var(--text-medium);
    font-weight: var(--font-semibold);
}

.about-detail{
    color: var(--gray);
    font-size: var(--text-regular);
    font-weight: var(--font-regular);
}

.about-explained{
    margin-top: 1.5rem;
    font-size: var(--text-regular);
    font-weight: var(--font-regular);
    color: var(--gray);
}

/* EXPERIENCE SECTION */

#experience-section{
    height: 100vh;
}

.experience-sqr{
    border: solid var(--gray) 0.1rem;
    border-radius: 2rem;
    padding: 1.5rem;
}

ul{
    padding: 0px;
}

li {
    list-style: none;
    padding: 20px;
    display: flex;
    align-items: center;
}

.experience-sqr-title{
    text-align: center;
    font-size: var(--text-medium);
    font-weight: var(--font-bold);
    color: var(--gray);
}

.skill-bold {
    font-weight: var(--font-bold);
}

/* PROJECTS SECTION */

#projects-section{
    height: 100vh;
}

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

.project-sqr{
    border: solid var(--gray) 0.1rem;
    border-radius: 2rem;
    padding: 1.5rem;
}

.project-img{
    border-radius: 2rem;
    width: 90%;
    height: 90%;
}

.project-title{
    margin-top: 1rem;
    font-size: var(--text-regular);
    font-weight: var(--font-semibold);
}

.project-btn{
    color: var(--black);
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
}

.project-btn:hover{
    background-color: var(--gray);
    color: var(--white);
}

/* CONTACT SECTION */

#contact-section{
    height: 80vh;
}

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

.contact-sqr{
    border: solid var(--gray) 0.1rem;
    border-radius: 2rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 20rem;
}

.contact-info{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.contact-info-text{
    font-size: var(--text-regular);
    text-decoration: none;
    color: var(--black);
}

/* FOOTER SECTION */

.nav-links-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem;
}

.nav-links {
    display: flex;
}

footer {
    margin: 0 1rem;
}

footer p {
    text-align: center;
}