@font-face {
    font-family: Technoface;
    src: url(fonts/TechnoRace-Italic.ttf);
}

@font-face {
    font-family: Neo;
    src: url(fonts/GFSNeohellenicBold.ttf);
}

@font-face {
    font-family: H1;
    src: url(fonts/fonth1.ttf);
}

body {
    margin: 0;
    padding: 0;
    background-color:#0c0d19;
}

header {
    background: linear-gradient(to right, #7600AA, #00B2CB);
    padding: 0;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

h1 {
    font-family: "H1";
    font-size: 2.1rem;
    color: white;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.logo {
    width: 10vh;
    height: auto;
    margin-right: 1vw;
}

.menu {
    margin-right: 1.5vw;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: white;
}

.menu li {
    margin-left: 2vw;
    font-family: Neo;
    font-size: 2rem;
    text-align: center;
}

.menu a {
    text-decoration: none;
    color:white;

}
.menu a:hover {
    color: #bf00ff;
}

h1 a {
    text-decoration: none;
    color: white;
}

/*mobil verze*/
@media screen and (max-width: 930px) {

    *, 
    *::after, 
    *::before {
        box-sizing: border-box;
    }
    
    :root{
        --bar-width: 6vh;
        --bar-height: 0.8vh;
        --hamburger-gap: 1vh;
        --foreground: rgb(123, 218, 255);
        --hamburger-margin: 2.5vh;
        --animation-timing: 200ms ease-in-out;
        --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    }
    
    .hamburger-menu {
        --x-width: calc(var(--hamburger-height) * 1.41421356237);
        display: flex;
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        position: fixed;
        top: var(--hamburger-margin);
        right: 1%;
        z-index: 2;
        cursor: pointer;
        --foreground:rgb(255, 255, 255);
        margin-right: 5%;
        margin-top: 1%;
    }
    
    .hamburger-menu:has(input:checked) {
        --foreground: rgb(255, 255, 255);
    }
    
    .hamburger-menu:has(input:focus-visible)::before,
    .hamburger-menu:has(input:focus-visible)::after,
    .hamburger-menu input:focus-visible {
        border: 1px solid var(--background);
        box-shadow: 0 0 0 1px var(--foreground);
    }
    
    .hamburger-menu::before,
    .hamburger-menu::after,
    .hamburger-menu input {
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: var(--foreground);
        border-radius: 9999px;
        transform-origin: left center;
        transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
    }
    
    .hamburger-menu input {
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
        pointer-events: none;
    }
    
    .hamburger-menu:has(input:checked)::before {
        rotate: 45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / -2);
    }
    
    .hamburger-menu:has(input:checked)::after {
        rotate: -45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / 2);
    }
    
    .hamburger-menu input:checked {
        opacity: 0;
        width: 0;
    }
    
    .sidebar {
        padding: 0.5rem 1rem;
        padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
        background-color: var(--foreground);
        color: var(--background);
        max-width: 60%;
        min-width: 50%;
        max-height: 100%;
        min-height: 100%;
        margin-left: 49.9%;
        display: none;
        position: fixed;
    }
    
    .hamburger-menu:has(input:checked) + .sidebar {
        translate: 0;
        display:block
    }
    
    nav div {
        margin: 10%;
        padding: 3%;
        color:white;
        background-color: #2c2c2c8f;
        text-transform: uppercase;
        border-radius: 25px;
    }
    
    .menu-bar{
        text-align: center; 
        margin-top:25%;
        }
     .menu{
        display:none; 
        }
     .logo-container h1{
        display:none; 
        }
    
    
    .menu-item a{
       font-size:1.3rem;
       color:white;
       font-family:verdana;
       text-decoration: none; 
       }
    }

/*PC verze*/
@media screen and (min-width:930px) {
    
    .menu-mobil {
        display:none;
    }
    
    }