* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    scroll-snap-type: y mandatory;
}


section {
    height: 100vh;
    scroll-snap-align: start;
    text-align: center;
    position: relative;
    padding: 0 10% 0 10%;
    z-index: 1;
}

.full-height {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    transform: translateY(-50%);
    text-align: left;
    color: black;
    padding: 20px 20px;
    font-size: calc(3rem + 2vw);
    font-family: "Abhaya Libre";
    font-weight: 800;
    opacity: 0; /* Start invisible */
    transform: translateY(40px); /* Start below */
    transition:
        opacity 1.1s ease,
        transform 1.1s ease; /* Smooth transition */
}

h1.slide-title {
    font-size: calc(3rem + 2vw);
}

p.slide-paragraph {
    transform: translateY(-50%);
    text-align: left;
    color: black;
    font-family: "Abhaya Libre";
    font-weight: 400;
    font-size: calc(1rem + 2vw);
    opacity: 0; /* Start invisible */
    transform: translateY(40px); /* Start below */
    transition:
            opacity 1.1s ease,
            transform 1.1s ease; /* Smooth transition */
}

.logo {
    text-align: left;
    z-index: 100;
    padding: 20px 20px;
    font-family: "Abhaya Libre";
    font-weight: 800;
    font-size: 52px;
}

.image-container {
    position: absolute;
    right: 50px; /* Align image container to the right */
    top: 20%; /* Adjust vertical position */
    width: 400px; /* Make the container width twice as wide */
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%; /* Ensure images scale inside the container */
    opacity: 1; /* Start invisible */
    animation: fadeInOut 6s forwards; /* Animation for fading */
}
a.navbar-brand {
    font-size: calc(1rem + 2vw);
    font-family: "Abhaya Libre";
    font-weight: 800;
}

#navbar {
    position: fixed;
    background-color: transparent;
    top: 100px;
    right: 20px;
    z-index: 100;
}
a.nav-link, a.nav-link:hover {
    font-family: "Cutive Mono";
    font-size: 20px;
    color: #4d5154;
    font-weight: normal;
    transition: font-weight 0.5s;
    transition: color 0.5s;
}

.nav-link.active, .nav-link.active:hover {
    color: black;
    font-family: "Cutive Mono";
    font-weight: 600;
}

    /*li.circle a, li.circle a:link:hover, li.circle a:visited, li.circle a:visited:hover {*/
/*    display: block;*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    border-radius: 25px;*/
/*    background-color: #0000ff;*/
/*}*/

.img-squid {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 10s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.img-other {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    width: 75%; /* Ensure images scale inside the container */

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-3px, -6px) rotate(-1deg);
    }
    20% {
        transform: translate(-9px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(9px, 6px) rotate(0deg);
    }
    40% {
        transform: translate(3px, -3px) rotate(1deg);
    }
    50% {
        transform: translate(-3px, 6px) rotate(-1deg);
    }
    60% {
        transform: translate(-9px, 3px) rotate(0deg);
    }
    70% {
        transform: translate(9px, 3px) rotate(-1deg);
    }
    80% {
        transform: translate(-3px, -3px) rotate(1deg);
    }
    90% {
        transform: translate(3px, 6px) rotate(0deg);
    }
    100% {
        transform: translate(3px, -6px) rotate(-1deg);
    }
}

.top-menu {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    padding: 10px;
  }

.top-menu a {
color: black;
text-decoration: none;
padding: 5px;
}

/*Team section*/
div.team-member {
    background-color: transparent;
    border: none;
    align-content: center;
  }
  
p.team-member {
    margin: 2px;
    padding: 0px;
    margin-left: 20px;
    font-family: "Abhaya Libre";
    font-weight: 400;
    font-size: calc(0.5rem + 0.7vw);
    text-align: left;

}

h3.team-member {
    margin: 2px;
    padding: 0px;
    margin-left: 20px;
    font-family: "Abhaya Libre";
    font-weight: 400;
    font-size: calc(1rem + 2vw);
    text-align: left;

}

img.team-member {
width: 300px;
height: 300px;
border-radius: 50%;
clip-path: circle(100% at center);
}
  
  
/* Fade in and out animation */
@keyframes fadeInOut {
    0%,
    50% {
        opacity: 1; /* Fully visible */
    }
    51%,
    100% {
        opacity: 0; /* Fully invisible */
    }
}

/* abhaya-libre-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Abhaya Libre';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/abhaya-libre-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* abhaya-libre-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Abhaya Libre';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/abhaya-libre-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* abhaya-libre-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Abhaya Libre';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/abhaya-libre-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* abhaya-libre-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Abhaya Libre';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/abhaya-libre-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* abhaya-libre-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Abhaya Libre';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/abhaya-libre-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cutive-mono-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Cutive Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cutive-mono-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}