@font-face {
    font-family: "gothic";
    src: url('./fonts/Monumental.ttf');
}

@font-face {
    font-family: "goldf";
    src: url('./fonts/Goldman-Regular.ttf');
 }

body {
    margin: 0;
    background-color: #1a1a1a;
}

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainnadpis {
    transition: all 0.3s ease;
}

.mainnadpis.shrink {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.mainnadpis h1 {
    font-family: gothic;
    font-size: 150px;
    color: white;
    margin: 0;
    transition: all 0.3s ease;
}

.regnadpis h1, .resultnadpis h1, .txt h1{
    font-family: gothic;
    margin-top: -10px;
    font-size: 120px;
    color: white;
    text-align: center;
    align-items: center;
}

a {
    text-decoration: none;
}

.mainnadpis.shrink h1 {
    font-size: 50px;
}

.scroll-btn {
    color: white;
    opacity: 80%;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.scroll-btn.hidden {
    opacity: 0;
    visibility: hidden;
}

.scroll:hover {
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.maintime{
    margin-top: -20px;
}


/* Společné styly pro divy */
.div2, .div3, .div4, .div5 {
    position: relative; /* důležité pro pseudo-element */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: goldf;
    background-color: #1a1a1a;
    color: white;
    font-size: 28px;
    height: 100vh;
    text-align: center;
    flex-direction: column;
    z-index: 0;
}

/* DIV2 - kalendář */
.div2::before {
    content: "";
    position: absolute;
    top: 25%; left: 25%;
    width: 50%; height: 50%;
    background-image: url('./img/ico/calendar.png'); 
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    opacity: 5%;
    z-index: 0;
}

/* DIV3 - jiný obrázek */
.div3::before {
    content: "";
    position: absolute;
    top: 25%; left: 25%;
    width: 50%; height: 50%;
    background-image: url('./img/ico/gamestyle.png'); /* jiný obrázek */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    opacity: 5%;
    z-index: 0;
}

/* DIV4 - jiný obrázek */
.div4::before {
    content: "";
    position: absolute;
    top: 25%; left: 25%;
    width: 50%; height: 50%;
    background-image: url('./img/ico/location.png'); /* třetí obrázek */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    opacity: 5%;
    z-index: 0;
}

/* text nad pozadím */
.div2 .bunka1, .div3 .bunka2, .div4 .bunka3 {
    position: relative; /* nad pseudo-elementem */
    z-index: 1;
}

.registration {
    position: relative;
    text-align: center; /* Umožní centrování tlačítka */
    margin-top: -15vh;
    z-index: 5;
}

.registration-btn {
    font-family: goldf;
    background: #ff9966;
    background: linear-gradient(332deg,rgba(255, 153, 102, 1) 0%, rgba(255, 153, 28, 1) 67%);
    color: white; /* Bíla barva textu */
    padding: 15px 32px; /* Vnitřní okraje (padding) */
    font-size: 28px; /* Velikost písma */
    border: none; /* Odstraní rámeček */
    border-radius: 15px; /* Zaoblení rohů tlačítka */
    cursor: pointer; /* Ukazatel myši jako ruka */
    text-align: center; /* Text bude vycentrován */
    text-decoration: none; /* Zajistí, že text nebude podtržený */
    transition: background-color 0.3s; /* Plynulý přechod pro změnu barvy */
    
}

.registration-btn:hover {
    background: #ffbf9f;
    background: linear-gradient(332deg,rgb(255, 177, 139) 0%, rgb(255, 168, 61) 67%);
}

.footer {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
    padding: 5px 0; 
    font-size: 15px;
    color: grey;
    opacity: 20%;
    font-family: Arial, Helvetica, sans-serif;
  }

  .second {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}


/* MENU */
.navhome {
    position: fixed;
    top: 0;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 99;
}

.navreg {
    top: 0;
    width: 100%;
    z-index: 99;
}

.navhome.show {
    transform: translateY(0);
}

#menuToggle{
    display: block;
    position: relative;
    margin-top: 50px;
    margin-left: 50px;
    z-index: 1000;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a{
    text-decoration: none;
    color: white;
    transition: color 0.3 ease;
}

#menuToggle a:hover{
    color: #F7B32B; 
}

#menuToggle input{
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

#menuToggle span{
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: white;
    border-radius: 3px;
    z-index: 1;
    transform: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child{
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
   transform-origin: 0% 100%;
 }
 
 #menuToggle input:checked ~ span {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #F7B32B;
 }

 #menuToggle input:checked ~ span:nth-last-child(3) {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }

 #menuToggle input:checked ~ span:nth-last-child(2) {
   transform: rotate(-45deg) translate(0, -1px);
 } 

 #menu {
   position: absolute;
   width: 300px;
   margin: -100px 0 0 -50px;
   padding: 50px;
   padding-top: 125px;
   background: #404040;
   background: linear-gradient(210deg,rgba(64, 64, 64, 1) 0%, rgba(26, 26, 26, 1) 100%);
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   border-bottom-right-radius: 50px;
 }

 #menu li{
    padding: 10px 0;
    font-size: 23px;
    font-family: goldf;
 }

 #menu li:hover{
    transition: 100ms;
 }

 #menuToggle input:checked ~ ul{
   transform: none;
 }

 .photo-container {
    display: flex; /* Fotky vedle sebe */
    gap: 40px; /* Mezera mezi obrázky */
    justify-content: center; /* Zarovnání na střed */
    align-items: center;
    margin-top: 30px;
    height: 100vh;
  }
  
  .photo {
    width: auto; /* Nastavte požadovanou šířku obrázku */
    height: 70vh; /* Automaticky přizpůsobí výšku podle šířky */
    filter: grayscale(100%); /* Obrázek je černobílý */
    border-radius: 10px; /* Zakulacené rohy (volitelné) */
    transition: filter 0.5s ease; /* Plynulý přechod k barvám */
  }
  
  .photo:hover {
    filter: grayscale(30%); /* Obrázek je barevný při hoveru */
    }

    #contacts h2{
        font-family: goldf;
        font-size: 60px;
        justify-content: center; /* Horizontální zarovnání */
        align-items: center;     /* Vertikální zarovnání */
        text-align: center;
     }
     #contacts p{
        font-family: goldf;
        font-size: 28px;
        color:white;
        text-align: center;
     }
  
     .parent3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin-bottom: 20vh;
        }
        
        .div7 { grid-area: 1 / 1 / 2 / 2; }
        .div8 { grid-area: 1 / 2 / 2 / 3; }
  
     .div7, .div8 {
          justify-content: center; /* Horizontální zarovnání */
          align-items: center;     /* Vertikální zarovnání */
          text-align: center;
        }
     
     .div7 h2, .div8 h2 {
        color: white;
        margin-bottom: 20px;
     }
  
     .div7{
        color: white;
     }

/* REGISTRACE*/

.parent {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 30px;
    z-index: 99;
    }
    
    .reg1 { grid-area: 1 / 1 / 2 / 2; }
    .reg2 { grid-area: 1 / 2 / 2 / 3; }
    .reg3 { grid-area: 2 / 1 / 3 / 2; }
    .reg4 { grid-area: 2 / 2 / 3 / 3; }
    .reg5 { grid-area: 3 / 1 / 4 / 2; }
    .reg6 { grid-area: 3 / 2 / 4 / 3; }
    .reg7 { grid-area: 4 / 1 / 5 / 2; }
    .reg8 { grid-area: 4 / 2 / 5 / 3; }    

.reg1, .reg3, .reg5, .reg7{
    text-align: right;   
}
.reg2, .reg3, .reg5{
    float: left;
}
.reg9{
    position: relative;
    width: 100%;
    text-align: center;
    align-items: center;
    z-index: 99;
}

input, textarea{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-size: 20px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: rgba(128, 128, 128, 0.5);
    color: #F7B32B;
    border: white 1px solid;

 }
 
 input:focus, textarea:focus {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgba(128, 128, 128, 0.3);
    box-shadow: 30px 20px 20px rgba(0, 0, 0, 0.5); 
    transform: scaleX(1.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
 }

 .buttonsend{
    margin-top: 120px;
    font-family: goldf;
    background: #ff9966;
    background: linear-gradient(332deg,rgba(255, 153, 102, 1) 0%, rgba(255, 153, 28, 1) 67%);
    color: white; /* Bíla barva textu */
    padding: 15px 60px; /* Vnitřní okraje (padding) */
    font-size: 18px; /* Velikost písma */
    border: none; /* Odstraní rámeček */
    border-radius: 15px; /* Zaoblení rohů tlačítka */
    cursor: pointer; /* Ukazatel myši jako ruka */
    text-align: center; /* Text bude vycentrován */
    text-decoration: none; /* Zajistí, že text nebude podtržený */
    transition: background-color 0.3s; /* Plynulý přechod pro změnu barvy */
 }


 form::before {
    content: "";
    position: absolute;
    top: 20%; left: 15%;
    width: 70%; height: 70%;
    background-image: url('./img/ico/registration.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    opacity: 5%;
    z-index: 0;
}

.regcomplete, .thanks{
    position: relative;
    font-family: goldf;
    text-align: center;
    color: white;
    font-size: 24px;
    z-index: 99;
}

.regtime{
    margin: 0;
}

.regtext::before {
    content: "";
    position: absolute;
    top: 25%; left: 25%;
    width: 50%; height: 50%;
    background-image: url('./img/ico/heart.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    opacity: 5%;
    z-index: 0;
}

.thanks{
    margin-top: 200px;
}


/*RESULTS*/
#searchInput{
    display: block;
    margin: 10px auto;
    padding: 10px;
    width: 50%;
    font-size: 16px;
    color: white;
 }
 /* #playerTable{
    display: flex;
    justify-content: center;
    align-items: center;
 } */
 
 table {
    position: relative;
    width: 70%;
    border-collapse: collapse;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;   
    margin-bottom: 40px;
 }
 
 th, td {
    border: 2px solid #2b2b2b;
    padding: 10px;
    text-align: center;
    color: white; 
 }
 
 th{
    font-family: goldf;
    background-color: rgba(128, 128, 128, 0.274);   
 }
 
 td{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .legenda{
    font-family: goldf;
    color: white;
    text-align: center;
    margin-top: 30px;
 }

 /* RULES */

 .txt{
    position: absolute;
    text-align: center;
    align-items: center;
 }

 .txt h1{
    font-family: gothic;
    font-size: 120px;
    color: white;
 }

 .txt a{
   color: white;
   font-size: 30px;
   font-family: goldf;
 }

 .txt p{
    font-family: goldf;
    font-size: 20px;
    padding: 20px 60px 40px 60px;
    color: white;
 }

 .center-text-prava h1{
   white-space: nowrap;
   animation: scroll-text2 50s linear infinite;
   font-size: 20em;
   color: grey;
   font-family: tag2;
   opacity: 15%;
   width: 100%;
   margin-top: -150px;
}
.center-text-prava span{
   margin-right: 40px;
}

/* Styl scrollovací lišty */
::-webkit-scrollbar {
    width: 12px; /* Šířka lišty */
    background-color: #1C1C1C;
 }
 
 /* Styl posuvníku (thumb) */
 ::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, rgba(230,166,39,1) 0%, rgba(237,168,28,1) 50%, rgba(228,152,0,1) 100%);
 }
 
 /* Styl tlačítek nahoře a dole */
 ::-webkit-scrollbar-button {
    background-color: #1C1C1C; /* Barva tlačítek */
    width: 0;
    height: 0;
 }


 @media (max-width: 768px) {

    .mainnadpis h1{
        font-size: 60px;
    }

    .hero{
        height: 98vh;
    }

    .main{
        display: block;
        height: 100vh;
    }

    .photo-container {
      overflow-x: auto;
      flex-direction: row;
      gap: 20px;
      height: auto;
      padding: 20px;
  
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
  
      justify-content: flex-start;
  
      /* SCHOVÁNÍ SCROLLBARU */
      scrollbar-width: none;      /* Firefox */
      -ms-overflow-style: none;   /* starý Edge/IE */
    }
  
    .photo-container::-webkit-scrollbar {
      display: none;              /* Chrome, Safari, iOS */
    }
  
    .photo {
      flex: 0 0 auto;
      width: 70vw;
      height: 760px;
  
      scroll-snap-align: start;
    }

    .div2, .div3, .div4, .div5 {
        height: 30vh;
    }

    .registration{
        margin-bottom: 150px;
    }

    .parent3 {
        display: block;
        margin-bottom: 100px;
      }
  
  }