@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
body{
    width: 100%;
    height: 100%;
    background-color: black!important;
    font-family: 'Press Start 2P', cursive !important;
    text-align: center;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: transparent;
    transition: background-color 1.0s ease-in-out;
    z-index: 1;
    text-decoration: none;
  }
  
  .menu-toggle {
    display: none;
    cursor: pointer;
    padding: 10px;
  }
  
  .menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
    transition: transform 0.4s ease-in-out;
  }
  
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  
  nav {
    padding: 0;
    margin: 5px;
    width: auto;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: right;
  }
  
  li {
    display: inline-block;
    margin-right: 20px;
  }
  
  li a {
    display: block;
    color: #fff !important;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none !important;
  }
  
  /* Pro menší zařízení */
  @media only screen and (max-width: 768px) {
    .menu-toggle {
      display: block;
    }
  
    nav {
      display: none;
    }
  
    nav.active {
      display: block;
      width: 100%; 
    }
  
    ul {
      float: none;
      text-align: center; 
      background-color: black; 
      padding: 0% !important;
    }
  
    li {
      display: block;
      margin: 10px 0;
    }
  }
  
  header.scroll {
    background-color: black !important;
  }
  
  

  .wallp{
    position: relative;
    z-index: -2 !important;
 }
 .wallp video{
    width: 90%;
 }
 h1{
    padding-top: 20%;
    z-index: 6 !important;
 }


 /*Odkazy*/
 .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;
    text-align: center;
    padding: 15% 20px; 
  }

  .card {
    background-color: #333 !important;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin: 50px; 
    box-shadow:
    10px 0 #333, -10px 0 #333, 0 -10px #333, 0 10px #333,
    0 0 0 12px gray, 0 8px 0 8px lightgray, 0 -8px 0 8px gray,
    8px 0 0 8px lightgray, -8px 0 0 8px gray; 
    border-radius: 0% !important;
  }

  .card::before,
  .card::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #333;
  }

  .card::before {
    top: -3px;
    left: -3px;
  }

  .card::after {
    bottom: -3px;
    right: -3px;
  }

  .card-header {
    font-size: 16px !important;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
  }

  .card-image {
    width: 100%; 
    height: auto;
    margin-bottom: 20px; 
  }

  @media only screen and (max-width: 1024px) {
    .card {
      width: calc(50% - 40px); 
    }
  }

  @media only screen and (max-width: 768px) {
    .card {
      width: calc(100% - 40px); 
    }
  }
   /*Button*/
   .button-container {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%,0%);
  }
  
  .btn {
    margin-top: 5%;
    font-size: 1.2em;
    font-family: 'Press Start 2P', cursive !important;
    color: #fff !important;
    width: 130px;
    height: 50px;
    background: gray;
    border: 0px;
    position: relative;
    box-shadow: 
      inset -4px 2px 1px 1px grey,
      inset -4px -2px 1px 1px lightgray,
      inset 4px 0px 1px 1px lightgray;   
  }
  
  .btn:hover {
    cursor: pointer;
    background-color: lightgray;
    color: black !important;
  }
  
  .btn:active {
    top: 5px;
    box-shadow: 
      -4px 2px 1px 1px grey,
      -4px -2px 1px 1px lightgray,
      4px 0px 1px 1px lightgray; 
  }
  
  .btn::after {
    content: '';
    background: black;
    position: absolute;
    left: -2.5%;
    top: 0;
    width: 105%;
    height: 100%;
    z-index: -1;
  }
  
  .btn::before {
    content: '';
    background: black;
    position: absolute;
    left: 0;
    top: -5%;
    width: 100%;
    height: 113%;
    z-index: -1;
  }
  /*Footer*/
  footer {
    z-index: 1;
    background-color: #333;
    padding-bottom: 3%;
  }
  
  .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px; /* Adjust as needed */
  }
  
  .img-a {
    padding: 0 10px; /* Add horizontal padding to images */
  }
  .row{
    justify-content: center;
    align-items: center;
  }

  .reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }



  /*media player*/
  .popup{
    position: fixed;
    top: -100vh;
    left: 0;
    z-index: 9999999;
    background: rgba(0,0,0, 0.75);
    width: 100vw;
    height: 100vh;
    opacity: 0;
  
      -webkit-transition: opacity  0.35s ease;
      -moz-transition: opacity 0.35s ease;
      -o-transition: opacity 0.35s ease;
      transition: opacity 0.35s ease;
  }
  .popup .popUpContainer{
    width: 100%;
    max-width: 500px;
    position: fixed; /* To avoid scroll to target */
    left: 50%;
    top: -100vh;
      -webkit-transition: top  0.35s ease;
      -moz-transition: top 0.35s ease;
      -o-transition: top 0.35s ease;
      transition: top 0.35s ease;
  
    /* Trick to properly center the element by using negative 
    1/2 length of element as margin left and top */
    margin-left: -250px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-radius: 2px;
    z-index: 9999999; 
  }
  .popup h2{
    padding: 0.5em;
    text-align: center;
    color: #444444;
    margin: 0;
  }
  .popup img{
    width: 100%;
    display: block;
  }
  /* The cancel button on popup dialog */
  .popup a.closePopUp{
    font-family: 'Press Start 2P', cursive !important;
    color: #e74c3c;
    position: absolute;
    top: 0.2em;
    right: 0.375em;
    margin: 0;
    padding: 5px;
    font-weight: bold;
    font-size: 1.5em;
    text-decoration: none;
  }
  /* The cancel button on popup dialog */
  .popup a:hover{
    color: #c0392b;
  }
  /* When popup is targeted, by clicking on link with #popup in HTML */
  .popup:target{
    opacity: 1;
    top: 0;
  }
  .popup .closePopUpOutSide{
    position: absolute;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 9999991; 
  }
  .popup:target .popUpContainer{
    top: 50px;
      -webkit-transition: top  0.35s ease;
      -moz-transition: top 0.35s ease;
      -o-transition: top 0.35s ease;
      transition: top 0.35s ease;
  }
  
  @media  (max-width: 796px) {
    .popup .popUpContainer{
      width: 90%;
      max-width: none;
      left: 5%;
      margin-left: 0;
    }
    .popup ul{
      padding: 0 1em 0 1em;
    }
    .popup:target .popUpContainer{
      top: 25px;
      -webkit-transition: top  0.35s ease;
      -moz-transition: top 0.35s ease;
      -o-transition: top 0.35s ease;
      transition: top 0.35s ease;
    }
  }
  .music{
    background-color: #ffffff;
  }
  .music .box{
    position: relative;
    width: 100;
  }
  .music .box img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }