/* Resetting default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif; /* Placeholder font */
    background: white;
}

/* Video Background Container */
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffffb3;
}

/* Video Background */
#video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/* Text [multimedia production] */
.top-left-text {
    position: absolute;
    top: 3vh;
    left: 3vw;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2vw;
    color: #ffffffb3;
}

/* Typography Elements */
.typography {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffffb3;
}

/* h1 = annika */
.typography h1 {
    font-family: 'Racing Sans One', cursive;
    font-size: 12vw;
    margin-bottom: 1vh;
}

.typography h1 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.typography h1 a:hover {
    color: #fdd656;
}

/* h2 = hi this website presents */
.typography h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 2vw;
    margin-bottom: -6vh; /* Adjusted margin to bring it closer to the h1 */
}

/* handwritten-bottom-right = have a very sunny day */
.handwritten-bottom-right {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #ffffffb3;
    position: absolute;
    top: 19vh; /* Adjust the distance from the bottom */
    right: 1vw; /* Adjust the horizontal position */
    font-size: 1.2vw; /* Adjust font size as needed */
}

/* Side Menu */
.side-menu {
    position: absolute;
    bottom: 9vh;
    right: 3vw;
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Increased gap between menu points */
}

.menu-link {
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 2vw;
    font-weight: bolder;
    transition: color 0.3s ease;
    text-align: right; /* Align text to the right */
    padding: 0.5vh 1vw; /* Added padding around menu points */
}

.menu-link:hover {
    color: #fdd656;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .top-left-text {
        font-size: 4vw; /* Increased font size for better readability on smaller screens */
    }
    .typography h1 {
        font-size: 20vw;
    }
    .typography h2 {
        font-size: 4vw;
    }
    .handwritten-bottom-right {
        font-size: 3vw; /* Increased font size for better readability on smaller screens */
    }
    .menu-link {
        font-size: 4vw;
    }
}

@media (max-width: 480px) {
    .top-left-text {
        font-size: 5vw; /* Further increased font size for the smallest screens */
    }
    .typography h1 {
        font-size: 25vw;
    }
    .typography h2 {
        font-size: 5vw;
    }
    .handwritten-bottom-right {
        font-size: 4vw; /* Further increased font size for the smallest screens */
    }
    .menu-link {
        font-size: 5vw;
    }
}