/* Imported font */
@font-face {
    font-family: myFont;
    src: url(garet.ttf);
}

/* General settings  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: myFont;
}

body {
    background-color: black;
    color: white;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Centering main tab */
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    height: 70vh;
    text-align: center;
    padding-top: 50px; /* Adjust for navbar height */
    align-items: center;
}

/* Font sizes for main tab */
h1 {
    font-size: 3em;
    font-weight: 1500;
    align-items: center;
}

h2 {
    font-size: 1.3em;
    align-items: center;
}
 

h3 {
    font-size: 1.3em;
    background: -webkit-linear-gradient(left, #9C83FF, #FF9051);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    background-clip: text;
}

/* For older versions of Internet Explorer */
@supports (-ms-ime-align: auto) {
    .element {
      background: none;
      color: #000; /* Fallback color */
    }
  }

/* Button styles */
.button-container {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.button {
    padding: 10px 16px;
    font-weight: 500;
    border: none;
    border-radius: 980px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.button img {
    width: 20px;
    height: 20px;
}

.orange-button {
    background-color: #ff8c00;
    color: #000000;
}

.orange-button:hover {
    transform: scale(1.15);
}

.pink-button {
    background-color: rgb(176, 65, 176);
    color: #FFFFFF;
}

.pink-button:hover {
    transform: scale(1.15);
}

/* Navbar */
.dot {
    height: 12px;
    width: 12px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
}

.navbar {
    overflow: hidden;
    background-color: black;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 0.7px solid #333333;
}

.navbar a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 22px;
    text-decoration: none;
    font-size: 14px;
}

.navbar a:hover {
    background: #ddd;
    color: black;
}

.navbar l {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 22px;
    text-decoration: none;
    font-size: 14px;
}

.navbar l-rechts {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 0px 5px;
    text-decoration: none;
    font-size: 14px;
}

.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.navbar .menu-icon {
    display: none;
}

.chevron-down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.chevron-down img {
    width: 40px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/*About Me Section*/
.about-section {
    color: black;
    min-height: 100vh;
    background-color: #f8ede4;
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    margin: 0 50px; /* Margin on the sides for mobile */
    text-align: center; /* Center text for mobile */
}

.profile-pic {
    flex: 0 0 auto;
}

.profile-pic img {
    width: 350px; /* Adjust the size as needed */
    border-radius: 50%; /* Make the image circular */
}

.about-section h2 {
    flex: 1;
    text-align: center;
    font-size: 2.5rem;
}

.about-text p {
    flex: 1;
    font-size: 15px; /* Default size for mobile */
    text-align: justify;
    position: relative;
}

.black-button {
    display: inline-block;
    margin-top: 20px;
    background-color: black;
    padding: 15px 32px;
    border: none;
    border-radius: 2px;
    color: white;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.black-button:hover {
    transform: scale(1.15);
}

/*Project Section*/
.projects-section {
    min-height: 100vh;
    padding: 50px 20px;
    background-color: black; /* Set background color to black */
    text-align: center;
}

.projects-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: white; /* Ensure the heading text is white */
}

.projects-section h4 {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10px;
    color: black; /* Ensure the heading text is white */
}

.project-tile p{
    font-size: 0.7em;
    text-align: justify;

}

#projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Adjust the gap between project tiles */
}

.project-tile {
    background-color: #f8ede4; /* Darker background for project tiles */
    border: 1px solid #555; /* Adjust border color for better contrast */
    border-radius: 8px;
    padding: 20px;
    width: 250px; /* Adjust the width as needed */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    color: black; /* Ensure text inside project tiles is white */
}

.project-tile:hover {
    transform: scale(1.05);
}

.project-img {
    margin-bottom: 10px;
}

.project-img i {
    font-size: 40px; /* Adjust the icon size as needed */
    color: white; /* Ensure icons are white */
}


.contact-section {
    text-align: center;
    margin-top: 30px;
}

.icon-container {
    display: flex;
    justify-content: center;
    gap: 50px; /* Adjust the gap as needed */
    flex-wrap: nowrap; /* Prevent wrapping */
    margin: 30px; /* Add some space between the title and icons */
}

.icon-container a img {
    width: 30px; /* Ensure all icons have the same size */
    height: 30px; /* Ensure all icons have the same size */
    margin: 0; /* Remove any extra margin */
    padding: 0; /* Remove any extra padding */
}



/* Responsive text and buttons */
@media screen and (min-width: 640px) {
    h1 {
        font-size: 3.9rem;
    }

    h2, h3 {
        font-size: 1.5rem;
    }

    .button {
        font-size: 1.3rem;
        font-weight: 500;
        padding: 8px 16px;
    }

    .button img {
        width: 16px;
        height: 16px;
    }
}

@media screen and (min-width: 1040px) {
    .about-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 150px; /* Margin on the sides for desktop */
        text-align: left; /* Align text to the left for desktop */
    }

    .profile-pic img {
        overflow: hidden;
        width: 380px; /* Adjust the size as needed for desktop */
        margin-right: 40px; /* Add margin to the right of the image */
    }

    .about-text p {
        font-size: 17px; /* Larger size for desktop */
        text-align: justify; /* Align text to the left for desktop */
    }

    .about-text h2 {
        font-size: 2rem; /* Larger size for desktop */
        text-align: justify; /* Align text to the left for desktop */
        margin: 0;
    }


    .about-text .button {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .icon-container {
        display: flex;
        justify-content: center;
        gap: 80px; /* Adjust the gap as needed */
        flex-wrap: nowrap; /* Prevent wrapping */
        margin: 40px; /* Add some space between the title and icons */
    }
    
    .icon-container a img {
        width: 40px; /* Ensure all icons have the same size */
        height: 40px; /* Ensure all icons have the same size */
        margin: 0; /* Remove any extra margin */
        padding: 0; /* Remove any extra padding */
    }
    
    .icon-container:hover{
        transform: scale(1.05);   
    }
}

@media screen and (max-width: 768px) {
    .navbar a {
        display: none;
    }

    .navbar .menu-icon {
        display: block;
        float: right;
        padding: 10px 42px;
        cursor: pointer;
        position: relative;
        width: 30px;
        height: 25px;
    }

    .navbar .menu-icon img {
        width: 30px;
        height: 30px;
    }

    .navbar-links {
        display: none;
        position: absolute;
        top: 50px; /* Adjust this value to match the height of your navbar */
        width: 100%;
        text-align: center;
        z-index: 1;
    }

    .navbar-links a {
        display: block;
        padding: 14px;
        text-decoration: none;
        color: #f2f2f2;
    }

    .navbar-links a:hover {
        background-color: #ddd;
        color: black;
    }

    .center {
        padding-top: 100px; /* Adjust for navbar height */
    }
}