:root {
    --background_color: #cce9f3;
    --background-extra: #Fef5e7;
    --accent_light: #85c4e4;
    --accent_dark: #488db4;
    --text_blue: #022f56;
    --text_black: #07233e;

    --font_family_bold: 'Comfortaa-Bold', Arial, sans-serif;
    --font_family_regular: 'Comfortaa-Regular', Arial, sans-serif;
    --font_family_light: 'Comfortaa-Light', Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}


ul {
    list-style: none;
}

img {
    width: 100%;
}


/* colors */

body {
    font-family: var(--font_family_regular);
    background-color: var(--background-extra);
    color: var(--accent_dark);
}

header {
    background-color: var(--text_black);
}

.nav-link {
    color: white;
}

#about-me-container {
    background-color: var(--accent_dark);
    color: white;
}

#contact-form-container {
    background-color: var(--text_black);
    color: var(--background_color);
}

#projects-container {
    background-color: var(--accent_dark);
    color: white;
}

.project-example>a {
    color: var(--text_blue);
}

footer {
    background-color: var(--text_black);
    color: var(--background_color);
}

button {
    background-color: var(--accent_light);
    color: var(--text_black);
}

#hero-section>div>a {
    background-color: var(--accent_dark);
}

#hero-section>p>a {
    color: var(--text_blue);
}

#projects-list h3,
#projects-list p {
    color: var(--text_blue);
}

/* fonts */

@font-face {
    font-family: 'Comfortaa-Regular';
    src: url("fonts/Comfortaa-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Comfortaa-Bold';
    src: url('fonts/Comfortaa-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Comfortaa-Light';
    src: url('fonts/Comfortaa-Light.ttf') format('truetype');
}

#tech-stack,
.tech-list {
    font-family: var(--font_family_light);
}

/* text styling */

.link {
    text-decoration: none;
    color: white;
}

/* header styling */

header,
nav>ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header {
    padding: 10px;
}

nav>ul {
    gap: 10px;
}


#logo {
    max-width: 100px;
}

/* hero section styling */

#hero-section {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    font-size: larger;
    margin-bottom: 110px;
    margin-top: 50px;
    gap: 10px;
}

#hero-section>p>a {
    text-decoration: none;

}


#hero-section>div {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#hero-section>div>a {
    text-decoration: none;
    color: white;
    border: 1px solid var(--accent_dark);
    padding: 12px;
    border-radius: 50px;
    margin-top: 15px;
}

/* about me styling */

#about-me-container {
    padding: 35px;
    border: 1px solid var(--accent_dark);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    line-height: 25px;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 150px;
    margin-top: 50px;
    gap: 15px;
}

#tech-stack {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#tech-stack>li {
    display: flex;
    align-items: center;
    background-color: var(--text_black);
    padding: 10px;
    border: 1px solid var(--text_black);
    border-radius: 50px;
}

/* projects styling */

#projects-container {
    margin: auto;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 1300px;
    padding: 10px;
    padding-bottom: 20px;
    border: 1px solid var(--accent_dark);
    border-radius: 30px;
    margin-bottom: 200px;
}

#projects-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;

}

#projects-container>h1 {
    padding-bottom: 20px;
}

#projects-list>li {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--background_color);
    color: var(--accent_dark);
    border: 1px solid var(--background_color);
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

#projects-list>li>a {
    color: var(--text_black);
    text-decoration: none;
}

.tech-list {
    display: flex;
    gap: 10px;
    align-items: center;
}

.project-example {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-example>img {
    max-width: 350px;
}

.project-example>a {
    text-decoration: none;
}


.tech-list>li {
    background-color: var(--text_black);
    color: white;
    padding: 10px;
    border: 1px solid var(--text_black);
    border-radius: 50px;
}

.project-link {
    max-width: fit-content;
}

/* contact form styling */

#contact-form-container {
    margin-top: 50px;
    display: flex;
    padding: 20px;
    justify-content: center;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: space-between;
}

#form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

#contact-form-container>#contact-links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

input,
textarea {
    font-family: var(--font_family_light);
    padding: 5px;
}

button {
    border: 1px solid var(--accent_light);
    padding: 8px;
    border-radius: 10px;
    font-family: var(--font_family_regular);
}

/* footer styling */

footer {
    text-align: center;
}

#contact-links-container>div>div {
    gap: 5px;
}

.link img {
    max-width: 20px;
    max-height: 20px;
}



/* link, button and project example hover styling + animations */

.link {
    position: relative;
}

.link:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.link:hover:after {
    width: 100%;
    left: 0;
}

#hero-section>p>a {
    position: relative;
}

#hero-section>p>a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--text_black);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

#hero-section>p>a:hover:after {
    width: 100%;
    left: 0;
}

.project-link {
    position: relative;
}

.project-link::after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--text_black);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.project-link:hover::after {
    width: 100%;
    left: 0;
}

#hero-section>div>a {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#hero-section>div>a:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px;
    background-color: var(--text_blue);
}

button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px;
    background-color: var(--background_color);
    border-color: var(--background_color);
}

#projects-list>li,
#projects-list>figure {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#projects-list>li:hover,
.project-link>figure:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 12px;
}


/* sticky header */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

#projects-container,
#about-me-container,
#hero-section,
#contact-form-container {
    scroll-margin-top: 120px;
}

/* media queries */

@media (min-width: 768px) {
    #projects-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    #projects-list {
        grid-template-columns: repeat(3, 1fr);
    }
}