:root {
    --primary-color: #eeeeee;
    --secondary-color: #f5f7f8a7;
    --bg-color: linear-gradient(0deg,#151515, 85%,#f5f7f8a7);
    --background-blend-mode: screen;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    transition-duration: 200ms;
}

body {
    background: var(--bg-color);
    color: var(--primary-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 14px;

}

header, main, footer {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    text-decoration: none;
    border-radius: 5px;
}

header a:hover {
    opacity: 0.8;
}

header a {
    cursor: pointer;
}

#header-logo {
    display: flex;
    margin-right: auto;
    max-width: 70px;
}

#logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    text-decoration: none;
    border-radius: 5px;
}
nav {
    color: var(--secondary-color);
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 50px;
}

nav a:hover {
    opacity: 0.8;
}

nav a {
    cursor: pointer;
}

.name-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.image-container {
    text-align: center;
}

.profile-image {
    max-width: 40%;
    border-radius: 100%;
    overflow: hidden;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    border: rgb(255, 255, 255) 3px solid;
}

main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.media-container {
    display: inline-flex;
    justify-content: center;
    gap: 20px;
}

.media-container a {
    display: inline-flex;           /* Makes the link a flexbox */
    align-items: center;            /* Center the icon vertically */
    justify-content: center;        /* Center it horizontally */
    width: 60px;                    /* Give a solid clickable area */
    height: 20px;
    text-decoration: none;          /* Remove underline */
    border-radius: 50%;             /* Circle shape (optional) */
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    z-index: 10;

}

.media-container a:hover {
    opacity: 0.8;
}

.media-container a {
    cursor: pointer;
}

.about-me-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#about-me {
    border-bottom: solid;
    padding-bottom: 10px;
}

.experience-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#experience {
    border-bottom: solid;
    padding-bottom: 10px;
}

.education-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#education {
    border-bottom: solid;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.technical-skills-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#technical-skills {
    border-bottom: solid;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.languages-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#languages {
    border-bottom: solid;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

#language-list {
   padding-left: 20px;
}

.spacing {
    padding-bottom: 10px;
}

#english {
    padding-bottom: 4px;
}
.little-spacing {
    padding-bottom: 5px;
}

.projects-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-links {
    display: flex;
    gap: 20px;
}

#projects {
    border-bottom: solid;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.vegii-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

p a {
    text-decoration: none;
    color: var(--secondary-color);
}

p a:hover {
    opacity: 0.8;
}

p img {
    filter: grayscale(100%);
}

.aboutme-pictures {
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    border: rgb(255, 255, 255) 2px solid;
    filter: grayscale(100%);
}

.aboutme-text {
    text-align: left;
}

h4 {
    padding-bottom: 10px;
}

#vegii {
    border-radius: 30px;
    border: rgb(255, 255, 255) 2px solid;
}

#vegii-spacing {
    padding-top: 5px;
}

#mondainai {
   border-radius: 30px;
   border: rgb(255, 255, 255) 2px solid; 
}

#mondainai-spacing {
    padding-top: 10px;
}

#projectsenpai {
   border-radius: 30px;
   border: rgb(255, 255, 255) 2px solid;
}

#projectsenpai-spacing {
    padding-top: 10px;
}