* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include paddings and borders in element sizes */
}

@font-face {
    font-family: 'InterDisplay';
    src: url('fonts/InterDisplay-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles for the loading screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F8FBF8;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    z-index: 9999; /* Ensure the loading screen is above everything else */
    opacity: 1; /* Initial opacity */
}

#loading-text {
    color: #2E2930;
    font-size: 128px;
    margin: 10px; /* 10 pixels margin */
}

/* Disable automatic formatting of phone numbers on iOS */
a[href^="tel"] {
    color: inherit; /* Inherit text color */
    text-decoration: none; /* Remove underline */
}

/* Disable link formatting for all devices */
a {
    color: inherit; /* Inherit text color */
    text-decoration: none; /* Remove underline */
    -webkit-tap-highlight-color: transparent; /* Disable highlight color on mobile devices */
}

/* Disable auto-formatting of phone numbers on iOS */
html {
    -webkit-touch-callout: none; /* Disable the popup menu on long press */
}

body {
    height: calc(var(--vh, 1vh) * 100); /* Body height considering the browser panel */

    user-select: none; /* For most browsers */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */

    background-color: #F8FBF8;
    font-family: 'InterDisplay', sans-serif;
    font-size: 13px; /* Text size */
    color: #2E2930;
    /* height: 100vh; /* Page height according to browser height */
    width: 100vw; /* Page width according to browser width */
    overflow-x: hidden; /* Disable horizontal scrolling */
    -webkit-font-smoothing: antialiased; /* Improve font rendering */
    -moz-osx-font-smoothing: grayscale;  /* Improve font rendering in macOS */
}

header {
    color: #F8FBF8;
    position: fixed; /* Absolute position for the header */
    top: 0;
    left: 0;
    width: 100%; /* Header occupies the full width of the screen */
    z-index: 10; /* Header will be above all other elements */
    display: flex;
    align-items: flex-start; /* Align to the top edge */
    mix-blend-mode: difference;
}

.header-left, .header-center, .header-right {
    flex: 1; /* Each div takes equal space */
    padding: 10px; /* Add a small inner padding for elements */
    white-space: nowrap; /* Prevent text from wrapping to another line */
    mix-blend-mode: difference;
}

.header-left a, .header-right a, .header-center a {
    color: inherit; /* Inherit color from the parent element */
    text-decoration: none; /* Remove underline */
}

.header-left {
    display: flex;
    justify-content: flex-start; /* Align content to the left edge */
    text-align: left; /* Text is aligned to the left */
}

.header-center {
    display: flex;
    flex-direction: column; /* Align text vertically */
    align-items: center; /* Center text */
}

.header-right {
    display: flex;
    justify-content: flex-end; /* Align content to the right edge */
    text-align: right; /* Text is aligned to the right */
}

.header-center p {
    margin: 0; /* Margin between text blocks is 0 pixels */
}

.image-container {
    display: flex;
    justify-content: center; /* Centering horizontally */
    align-items: center; /* Centering vertically */
    height: 100%; /* Container height according to browser height */
    width: 100%; /* Container width according to browser width */
    position: fixed; /* Use fixed positioning so the container doesn't shift */
    top: 0; /* Position at the top of the window */
    left: 0; /* Position at the left of the window */
    padding: 10px;
    pointer-events: none; /* Ignore mouse events for the container */
    overflow: hidden;
}

.image-container img {
    display: block;
    position: absolute;
    max-width: 100px; /* Maximum width of the image */
    max-height: 100px; /* Maximum height of the image */
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    display: block; /* Remove extra spaces below the image */
    pointer-events: none; /* Allow interaction with images */
}

/* Add this CSS to style the information */
.info-container {
    line-height: 100%;
    display: flex;
    flex-direction: column; /* Arrange divs in a column */
    align-items: center; /* Center the container horizontally */
    justify-content: flex-start; /* Center the container vertically */
    width: 100%;
    height: 100%;
    padding-top: 200px; /* 200px top padding */
}

@media (max-width: 500px) {
    .info-container {
        padding-top: 140px; /* Top padding for small screens */
    }
}

.info-box {
    display: flex;
    justify-content: center; /* Center content inside info-box */
    width: 100%; /* Set width to 100% for info-box */
    padding: 20px 0px; /* Margin between blocks */
    color: #F8FBF8;
    mix-blend-mode: difference;
}

.info-box div {
    margin: 0 5px; /* 5px margin on the left and right */
}

.info-left, .info-right {
    width: 260px; /* Fixed width of 260px for div */
}

.info-left {
    text-align: right; /* Align text to the right */
}

.info-right {
    text-align: left; /* Align text to the left */
}

#specific-info-right p:nth-child(2) {
    margin: 5px 0; /* 5 pixels margin above and below for the central paragraph */
}

.project-page {
    cursor: pointer; /* Set cursor to pointer for the project page */
}

.project-container {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%; /* Full height of the screen */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#project-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Maintains the aspect ratio of the image */
}

.navigation {
    position: absolute;
    bottom: 10px; /* Margin from the bottom of the screen */
    width: 100%;
    color: #2E2930;
    display: flex;
    justify-content: space-between;
    padding: 0 10px; /* Side padding */
}

.nav-button {
    flex: 1;
    cursor: pointer;
    color: #F8FBF8;
    mix-blend-mode: difference;
}

#previous {
    text-align: left; /* Aligns text to the left in the previous button */
}

#next {
    text-align: right; /* Aligns text to the right in the next button */
}

.image-number {
    flex: 1;
    text-align: center;
    color: #F8FBF8;
    mix-blend-mode: difference;
}

img {
    user-select: none; /* Disable selection of text and images */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */
}