img {
    pointer-events: none;
}

a,
a:link,
a:visited,
a:hover {
    text-decoration: none;
    color: inherit;
}

.comfortaa {
    font-family: "comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

h1 {
    color: #3f3f3f;
    font-family: Baskerville;
    font-size: 45pt;
    font-weight: 300;
    text-align: center;
    margin-top: 0;
    margin-bottom: 215px;
    text-decoration: underline;
}

h2 {
    font-size: 30pt;
    color: #3f3f3f;
    margin: 25px;
}

h3 {
    color: #3f3f3f;
    font-family: Baskerville;
    font-weight: 300;

    margin: 0;
    padding: 0;


    font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
    line-height: 1; /* Adjust line spacing for readability */
    text-align: center; /* Center align text horizontally */
    display: flex; /* Use flex for vertical centering */
    justify-content: center; /* Horizontally center text */
    height: auto; /* Ensure the container height is used */
    margin: 0; /* Remove default margins */
  }




  p {
    padding: 0; /* Remove default padding */
    color: #3f3f3f;
    font-family: "comfortaa", sans-serif;
    font-weight: 300;
    text-align: center;
    margin: 0;

    font-size: 13pt; /* Font size */
    line-height: 1.25; /* Prevent overlapping */
    max-width: 100%; /* Avoid overflow */
    overflow-wrap: break-word; /* Ensure words break properly */

  }


body {
    position: static;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #073a67;
}
.header-top {
        position: sticky;
    display: block;
    top: 0px;
    z-index: 10;
    background-color: #159be9;
    height: 10px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
header {
    position: sticky;
    display: block;
    top: 10px;
    z-index: 10;
    background-color: #cdcdcd;
    height: 90px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.header-left,
.header-middle,
.header-right {
    background: transparent;
    box-sizing: border-box;
    height: 100px;
}

.header-left {
    float: left;
    width: 20%;
    font-size: 50pt;

}

.header-middle {
    display: inline-block;
    width: 60%;
    padding-top: 10px;
    
}

.header-right {
    float: right;
    width: 20%;
}

.logo {
    height: 50px;
    width: 50px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* NavBar */
.navbar {
    display: block;
    position: sticky;
    top: 110px;
    box-sizing: border-box;
    background: transparent;
    height: 50px;
    width: 100%;
    text-align: center;
    margin: 0;
    z-index: 1001;
    box-shadow: inset 2000px 2000px 2000px rgba(21, 155, 233, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.menuicon {
    font-family: comfortaa;
    font-weight: 300;

    display: none;
    visibility: hidden;
    font-size: 0;
    font-size: 30px;
}

.menu a {
    list-style: none;
    display: inline-block;
    font-family: comfortaa;
    font-weight: 300;

    padding: 15px 25px 0px 25px;
    font-size: 20px;
}

.menu a:link {
    color: #ebebeb;
}

.menu a:hover {
    color: #3f3f3f;
}

.menu a:visited {
    text-decoration: none;
    color: #ebebeb;
}






.top-deck {
    display: flex;
    position: relative;
    object-position: center;
    box-sizing: border-box;
    justify-content: center;
    height: 100%;
    width: 80%;
    z-index: 0;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #cdcdcd;
    border-left: solid 5px #ebebeb;
    border-right: solid 5px #ebebeb;
}


.top-deck-profile {
    display: flex;
    position: relative;
    object-position: center;
    box-sizing: border-box;
    justify-content: center;
    height: 100%;
    width: 80%;
    z-index: 0;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #cdcdcd;
    border-left: solid 5px #ebebeb;
    border-right: solid 5px #ebebeb;
}


/* Text overlay */
.intro {
    display: inline;
    justify-content: center;
    position: absolute;
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 10%;
    margin-right: 10%;
    height: 300px;
    width: 80%;

    padding: 50px;
    z-index: 4;
    background: transparent;
    background: rgba(205, 205, 205, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    text-align: center;
    border-radius: 25px;
    

        /* Drop shadow */
    box-shadow: 0 0 20px rgba(0, 0, 0, .6);


    
}

.intro-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 25%;
    margin-right: 25%;
    height: 600px;
    width: 600px;
    padding: 50px;
    z-index: 4;
    background: rgba(205, 205, 205, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    text-align: center;
    border-radius: 25px;


        /* Drop shadow */
    box-shadow: 0 0 20px rgba(0, 0, 0, .6);

}

/* Background image */
.intro-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;

    
}

/* Background image */
.intro-container-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 700px;
}

/* Adjust the intro-background-image */
.intro-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}



/* Create a container for intro-image with a smaller size */
.intro-image {
    position: absolute;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    height: 300px;
    z-index: 2;
    overflow: hidden;
    border-radius: 25px;
box-sizing:border-box;


}

/* Adjust the image inside the container */
.intro-image img {
    position: absolute;
    top: -35px;

    left: -12.5%;
    width: 125%;
    height: 125%;
    object-fit: cover;
    z-index: 3;


}

/* Create a container for intro-image with a smaller size */
.intro-image-profile {
    position: absolute;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 25%;
    margin-right: 25%;
    height: 600px;
    width: 600px;
    z-index: 2;
    overflow: hidden;
    border-radius: 25px;
box-sizing:border-box;
}

/* Adjust the image inside the container */
.intro-image-profile img {
    position: absolute;
    top: -50px;

    left: -225px;
    width: auto;
    height: 700px;
    object-fit: cover;
    z-index: 3;


}









/* gallery */
.break {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    height: 5px;
    width: 80%;
    z-index: 0;
    margin-left: 10%;
    margin-right: 10%;
    top: 0;
    background-color: #ebebeb;
}

.gallery {
    display: flex;
    position: relative;
    object-position: center;
    box-sizing: border-box;
    justify-content: center;
    height: 100%;
    width: 80%;
    z-index: 0;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #cdcdcd;
    border-left: solid 5px #ebebeb;
    border-right: solid 5px #ebebeb;

}

.gallery-profile {
    display: flex;
    position: relative;
    object-position: center;
    box-sizing: border-box;
    justify-content: center;
    height: 100%;
    width: 80%;
    z-index: 0;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #cdcdcd;
    border-left: solid 5px #ebebeb;
    border-right: solid 5px #ebebeb;

}

.glass {
    position: absolute;
    z-index: 5;
    top: 0px;
    box-sizing: border-box;
    background: transparent;
    height: 600px;
    width: 100%;
    text-align: center;
    margin: 0;
    background: rgba(205, 205, 205, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;

}

.fig-container {
    display: inline;
    justify-content: center;
    position: absolute;
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 25%;
    margin-right: 25%;
    height: 500px;
    z-index: 4;
    background: transparent;
    background: rgba(205, 205, 205, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    text-align: center;
    border-radius: 25px;

        /* Drop shadow */
    box-shadow: 0 0 20px rgba(0, 0, 0, .6);


}

.fig-container-profile {
    display: inline;
    justify-content: center;
    position: absolute;
    box-sizing: border-box;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-left: 25%;
    margin-right: 25%;
    height: 400px;
    z-index: 4;
    background: transparent;
    background: rgba(205, 205, 205, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    text-align: center;
    border-radius: 25px;
    object-fit: cover;



}

.figure {
    width: auto;
    height: 400px;

}

.figure-profile {
    width: 100%;
    height: 100%;

}

.figcaption {
    display: block;
    position: absolute;
    color: #3f3f3f;
    font-family: comfortaa;
    font-size: 13pt;
    font-weight: 300;
    z-index: 5;
    background-color: transparent;
    line-height: 1.5;
    box-sizing: border-box;
    margin-top: auto;
    height: 50px;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    bottom: 25px;
}

.image-container {
    display: inline;
    box-sizing: border-box;
    z-index: 3;
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: auto;
    object-fit: cover;
}

.image-container img {
    display: inline-block;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
}




.red-layer,
.cyan-layer,
.original-layer {
    position: absolute;
    object-fit: cover;
    display: flex;
    justify-content: center;
    width: 100px;
    height: auto;

    top: -50px;

 


}

.red-layer {
    filter: grayscale(100%) contrast(100%) sepia(100%) hue-rotate(-50deg) saturate(500%);
    opacity: 0.65;
    transform: translateX(-1%) rotate(1deg);
    z-index: 3;
}

.cyan-layer {
    filter: grayscale(100%) contrast(100%) sepia(100%) hue-rotate(180deg) saturate(500%);
    opacity: 0.5;
    transform: translateX(1%) rotate(-1deg);
    z-index: 4;
}

.original-layer {
    opacity: 0;
    transform: translateX(0);
    z-index: 2;
}