@font-face {
     font-family: NaturalHandwritten;
     src: url('Fonts/NaturalHandwritten.ttf');

 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoBold.otf') format('opentype');
     font-weight: bold;
     font-style: normal;
 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoBoldItalic.otf') format('opentype');
     font-weight: bold;
     font-style: italic;
 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoRegular.otf') format('opentype');
     font-weight: regular;
     font-style: normal;
 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoItalic.otf') format('opentype');
     font-weight: regular;
     font-style: italic;
 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoThin.otf') format('opentype');
     font-weight: thin;
     font-style: normal;
 }

 @font-face {
     font-family: 'Miraikato';
     src: url('Fonts/MiraikatoThinItalic.otf') format('opentype');
     font-weight: thin;
     font-style: italic;
 }

 :root {
    --color-light-blue: rgb(15, 84, 133);
    --color-dark-blue: rgb(8, 16, 28);
    --color-beige: rgb(255, 254, 241);
    --color-red: rgb(115, 113, 128);
    --overlay-dark-blue: rgba(57, 58, 59, 0.9);
}

 body {
     margin: 0;
     background-color: var(--color-dark-blue);
     text-align: center;
     color: var(--color-beige);
     font-family: Arial, Helvetica, sans-serif;
     line-height: 1.5;
 }

 #main-header {
     font-family: Miraikato;
     position: fixed;
     top: 0;
     height: 8vh;
     padding: 0.5vh;
     font-size: 6vh;
     font-weight: bold;
     width: 100%;
     z-index: 75;
     background-color: var(--color-dark-blue);
 }

 #navbar {
     position: fixed;
     display: flex;
     justify-content: center;
     top: 8vh;
     height: 6vh;
     width: 100%;
     z-index: 50;
     padding-bottom: 2vh;
     padding-top: 0;
     background-color: var(--color-dark-blue);
     transition: all 0.5s ease-in-out;
 }

 #navbar a {
     padding: 2vw;
     padding-top: 1vw;
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 3vh;
     font-weight: normal;
     color: var(--color-beige);
 }

 #navbar a:hover {
     color: var(--color-red);
 }

 .hidden {
     transition: all 0.5s ease-in-out;
     transform: translateY(-8vh);
 }

 .section-title {
     font-family: 'Miraikato';
     font-size: 5vh;
     font-weight: bold;
     height: 10vh;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .section {
     padding-bottom: 5vh;
     padding-top: 5vh;
 }

 #gallery {
     display: grid;
     grid-template-columns: repeat(3, minmax(30vw, 1fr));
     grid-auto-rows: minmax(30vw, auto);
     grid-gap: 2vw;
     position: relative;
     margin: 2vw;
 }

 .gallery-item {
     height: 30vw;
     width: 30vw;
     overflow: hidden;
     transition: all 0.5s ease-in-out;
 }

 .gallery-item:hover {
     transform: scale(1.1);
     transition: all 0.5s ease-in-out;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 1.5s ease-in-out;
 }

 .gallery-item:hover img {
     transform: scale(1.3);
     transition: all 1.5s ease-in-out;
 }

 .no-scroll {
     overflow: hidden;
 }

 #lightbox-overlay {
     position: fixed;
     top: 0;
     z-index: 100;
     width: 100vw;
     height: 100vh;
     background-color: var(--overlay-dark-blue);
     display: none;
 }

 #lightbox {
     position: fixed;
     top: 2.5vh;
     left: 2.5vw;
     width: 95vw;
     height: 75vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 #lightbox-main-image {
     height: 100%;
     width: auto;
 }

 #lightbox-thumbnails {
     position: fixed;
     bottom: 2.5vh;
     transition: all 0.3s ease-in-out;
     left: 20vw;
 }

 .lightbox-control {
     font-size: 5vh;
     color: var(--color-beige);
     background-color: var(--color-dark-blue);
     cursor: pointer;
     padding: 0.5vw;
     border-radius: 0.5vw;
     z-index: 200;
 }

 #lightbox-close {
     position: fixed;
     top: 2.5vh;
     right: 2.5vw;
 }

 #lightbox-next {
     position: fixed;
     bottom: 55%;
     right: 2.5vw;
 }

 #lightbox-previous {
     position: fixed;
     bottom: 55%;
     left: 2.5vw;
 }

 #animation-player {
     width: 90vw;
     height: 75vh;
     margin: auto;
     padding-bottom: 0.5vh;
     position: relative;
 }

 #animation-iframe {
     width: 100%;
     height: 100%;
 }

 #animation-iframe-buffer {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-color: var(--color-dark-blue);
     opacity: 0.5;
     z-index: -1;
 }

 #animation-previous {
     position: absolute;
     top: 50%;
     left: -3%;
     transform: translateY(-50%);
     font-size: 5vh;
     color: var(--color-beige);
     background-color: var(--color-dark-blue);
     cursor: pointer;
     padding: 0.5vw;
     border-radius: 0.5vw;
 }

 #animation-next {
     position: absolute;
     top: 50%;
     right: -3%;
     transform: translateY(-50%);
     font-size: 5vh;
     color: var(--color-beige);
     background-color: var(--color-dark-blue);
     cursor: pointer;
     padding: 0.5vw;
     border-radius: 0.5vw;
 }

 .thumbnails {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 2vh;
 }

 .thumbnail-holder {
     width: 20vw;
     height: 15vh;
     overflow: hidden;
     transition: all 0.5s ease-in-out;
     margin: 0.5vw;
     border-radius: 0.5vw;
     border: 3px solid rgba(0, 0, 0, 0);
 }

 .selected {
     border: 3px solid var(--color-red);
 }

 .thumbnail-holder:hover {
     transform: scale(1.1);
     transition: all 0.5s ease-in-out;
 }

 .thumbnail-holder img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 1.5s ease-in-out;
 }

 .thumbnail-holder:hover img {
     transform: scale(1.3);
     transition: all 1.5s ease-in-out;
 }

 #about {
     color: var(--color-dark-blue);
     background-color: var(--color-beige);
     padding-left: 20px;
     padding-right: 20px;
 }

 #contact {
     line-height: 2;
 }