@import url("https://use.typekit.net/yup4bjk.css");


html, body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth; /* Smooth scrolling */
}

header, .profile, .Skill-Info, .contacting {
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#navbar {
    background-color: blue;
    display: flex;
    justify-content: space-evenly;
    overflow: hidden;
    position: sticky;
    top: 0;
    width: 100%;
    background-image: url("/PHOTOS/BACKGROUND/1080p_Wallpaper_blue.jpg");
    background-size: cover;
    box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    z-index: 1000; /* Keep it above other content */
}

main {
    scroll-snap-type: y mandatory; /* Enable vertical scroll snapping */
    overflow-y: scroll; /* Enable vertical scrolling */
    height: 100vh; /* Full viewport height */
}

h1, h2, h3 {
    font-family: neue-haas-unica, arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

h3 {
    font-size: 200%;
}

.profile p, .Skill-Description p, .contacting p {
    font-family: neue-haas-unica, arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 125%;
    text-align: justify;
}

.profile {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    flex-shrink: 0;
}

.profile img {
    max-height: 500px;
    width: auto;
    border-radius: 5px;
    margin: 0 20px;
    border: 5px solid #ffdca5;
    padding: 15px;
}

.profile div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 40%;
}

.profile p {
    margin: 20px 0;
}

.Skill-Info {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 0 20px 0;
    height: 100vh;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.Skill-Info h3 {
    margin-bottom: 20px;
}

.Skill-Description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 40%;
}

.Skill-Description img {
    max-height: 250px;
    height: auto;
    border-radius: 5px;
}

.Logo-Group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-shrink: 0;
}

.Logo-Column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Logo-Box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 125px;
    max-height: 125px;
    border: 5px solid #ffdca5;
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
    margin: 10px;
}

.Logo-Box img {
    max-height: 60px;
    width: auto;
    margin-bottom: 5px;
    object-fit: contain;
}

.Logo-Box p {
    margin: 0;
    text-align: center;
}

.contacting div{
    max-width: 40%;
    margin: auto;
}

/* Adjust layout for narrower windows */
@media (max-width: 770px) {
    .Skill-Info, .profile {
        flex-direction: column; /* Stack items vertically */
        height: auto; /* Adjust height to fit content */
    }

    .Skill-Description, .Logo-Group, .profile {
        max-width: 80%; /* Allow full width for each item */
        margin: 10px 0; /* Add some margin for spacing */
    }
}

/* Adjust layout for shorter windows */
@media (max-height: 600px) {
    .Skill-Info {
        height: auto; /* Adjust height to fit content */
    }

    .Skill-Description, .Logo-Group {
        max-width: 100%; /* Allow full width for each item */
        margin: 10px 0; /* Add some margin for spacing */
    }
}