*{
    box-sizing: border-box;
}


@font-face { 
    font-family: 'MyCustomFont'; 
    src: url('/assets/fonts/font.woff') format('woff'),
         url('/assets/fonts/font.woff2') format('woff2');  
         font-weight: normal; 
         font-style: normal; 
} 
         
body, html{ 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'MyCustomFont';
    color: #FFFFFF;
    font-size: 24px;
    cursor: default;
}

/*background slideshow*/
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 10s ease-in-out;
}

/*cursor arrow*/
body.left-cursor {
    cursor: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2750%27 height=%2750%27%3E%3Ctext x=%270%27 y=%2745%27 font-size=%2750%27 fill=%27%23FFFFFF%27 font-weight=%27bold%27%3E%26lt%3B%3C/text%3E%3C/svg%3E'), auto;
}

body.right-cursor {
    cursor: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2750%27 height=%2750%27%3E%3Ctext x=%270%27 y=%2745%27 font-size=%2750%27 fill=%27%23FFFFFF%27 font-weight=%27bold%27%3E%26gt%3B%3C/text%3E%3C/svg%3E'), auto;
}

header { 
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 10dvh;
    background: transparent;
    user-select: none;
}

header:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="9.5" fill="white" stroke="none"/></svg>'), auto;
}

.logo-icon {
    margin-left: 0.9rem;
    width: 5rem;
    height: 5rem;
    cursor: pointer;
}

.logo-icon:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="19" fill="white" opacity="0.5"/></svg>'), auto;
}


/* Hamburger menu */
.input-toggler {
    display: none;
}

.menu-toggler:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="19" fill="white" opacity="0.5"/></svg>'), auto;
}

.menu-toggler {
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    width: 30px;
    height: 25px;
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggler span {
    display: block;
    width: 1.6rem;
    height: 2px;
    background: #FFFFFF;
    transition: all 0.3s ease-in-out;
}

/* Transform toggler lines to an "X" when active */
.input-toggler:checked + .menu-toggler span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.input-toggler:checked + .menu-toggler span:nth-child(2) {
    opacity: 0;
}

.input-toggler:checked + .menu-toggler span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

/* Overlay menu styles */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111111;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Show overlay menu when toggler is checked */
.input-toggler:checked ~ .overlay-menu {
    display: flex;
}

/* Navigation styles */
nav {
    position: absolute;
}

.nav ul {
    text-align: center;
}

.nav ul li {
    margin: 20px 0;
    list-style: none;
}

.nav ul li a {
    color: #fff;
    font-size: 2em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-media-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    top: 17rem;
    width: 100%;
    height: 10dvh;
}

.social-media-container a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 18px;
}

footer { 
    position: fixed; 
    width: 50%; 
    height: 12dvh;
    bottom: 0; 
    left: 0; 
    background: transparent;
    padding: 0 0 20px 30px; 
    text-align: start;
}