@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'europhonicregular';
    src: url('../Fonts/europhonic-webfont.woff2') format('woff2'),
         url('../Fonts/europhonic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: 'edoregular';
        src: url('../Fonts/edo-webfont.woff') format('woff');             
        font-weight: normal;
        font-style: normal;
    }

:root {
    --color1: #1F1D26;
    --color2: #59222C;
    --color3: #A60815;
    --color4: #F29F05;
    --color5: #F2DCDC;
    --colorbg-button: rgba(140,28,3,0.6);
  }

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}



body {
        font-family: "oswald", sans-serif; 
}
video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    }

h2 {
    text-align: center;
    font-size: 5vh;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    color: var(--color2);
    text-shadow: 1px 2px 3px var(--color5);
    user-select: none;
  }

  h3 {
    text-align: center;
    font-size: 4vh;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    color:var(--color2);
    text-shadow: 1px 2px 3px var(--color5);
    user-select: none;
    mix-blend-mode: difference;
    animation: move linear infinite 7s;
  }
  img { 
    display: flex;
    position: absolute;
    top: 15%;
    left:50%;
    transform: translatex(-50%);

  }

  .button1 {
    position: absolute;
    text-align: center;
    min-width: 350px;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1.5rem 2.5rem;
    text-transform: uppercase;
    /* background: radial-gradient(circle, var(--color1) 0%, var(--color2) 100%); */
    background: rgba(37, 27, 18, 0.2);
    border-radius: 20px 0px 20px 0px;
    font-size: 4vh;
    box-shadow: 0 0 6px var(--color5);
    cursor: pointer;
    display: flex;
    transition: 0.2s ease-in-out;
  }
  .text1 {
    text-decoration: none;
    margin: 0;
    font-weight: bold;
    transform: translateX(14px);
    transition: 0.2s ease;
    color: var(--color2);
    text-shadow: 1px 2px 6px var(--color5);
  
  }
  .fa-solid {
    opacity: 0;
    font-size: 5vh;
    transform: translateX(-30px);
    transform: translateY(10px);
    transition: 0.2s ease;
    color: var(--color1);
    text-shadow: 1px 2px 6px var(--color2);
  }
  
  .button1:hover .fa-solid {
    opacity: 1;
    transform: translateX(15px);
    transform: translateY(10px);
    color: var(--color1);
    text-shadow: 1px 2px 6px var(--color2);
  }

  .button1:hover .text1 {
    transform: translateX(-10px);
    color:var(--color1);
    text-shadow: 1px 2px 6px var(--color2);
  }

  .button1:hover {
    filter: brightness(120%);
    background: radial-gradient(circle, rgba(89,34,44,0.7) 0%, rgba(242,220,220,0.7));
    opacity: 1;
  }

  .button1:hover {
    transform: scale(1.4) translateX(-35%);
    z-index: 10;
  }

  @keyframes move {
    0% {transform: translate(-100%, -0%) translateX(-50%);}
    /* 25% {transform: translate(0%, 100%) translateX(-50%);}  */
    50% {transform: translate(100%, 0%) translateX(-50%);}
    75% {transform: translate(0%, -100%) translateX(-50%);} 
    100% {transform: translate(-100%, 0%) translateX(-50%);}
    }
    @media screen and (max-width: 1850px) {
        h1 {
          font-size: 15vh;
        }
      }
      @media screen and (max-width: 1750px) {
        h1 {
          font-size: 14vh;
        }
      }
      @media screen and (max-width: 1635px) {
        h1 {
          font-size: 13vh;
        }
      }
      @media screen and (max-width: 1580px) {
        h1 {
          font-size: 12vh;
        }
      }
      @media screen and (max-width: 1590px) {
        h1 {
          font-size: 11vh;
        }
        .button1{
          font-size: 3vh;
          min-width: 280px;
          max-width: 80%;
        }
        .button1:hover .fa-solid, .button2:hover .fa-brands {
          transform: translateY(3px);
          font-size: 4vh;
        }
      }
      @media screen and (max-width: 1310px) {
        h1 {
          font-size: 10vh;
        }
        .button2, .button1{
          left: 50%;
        }
        .button1 {
          bottom: 20%;
          max-width: 80%;
        }
        
      }
     
      @media screen and (max-width: 980px) {
        
        h2 {
          font-size: 3vh;
        }
        h3 {
          font-size: 2vh;
        }
      }
      @media screen and (max-width: 860px) {
       
        .button1{
          font-size: 2.5vh;
          min-width: 280px;
          max-width: 80%;
          padding: 1rem 1.5rem;
        }
        .text1, .button1:hover .text1{
          transform: translateY(10px);
        }
        .button1:hover .text1{
          font-size: 3vh;
          transform: translateY(0px);
        }
      }
      @media screen and (max-width: 785px) {
        .button1 {
          min-width: 280px;
          padding: 0.5rem 0.75rem;
        }
        .button1:hover .text1{
          font-size: 3vh;
          transform: translateY(6px);
        }
      }
      @media screen and (max-width: 700px) {
        .button1 {
          min-width: 280px;
          padding: 0.5rem 0.75rem;
        }
        .button1:hover .text1{
          font-size: 3vh;
          transform: translateY(6px);
        }
      }
      @media screen and (max-width:640px) {
        img {
            max-width: 400px;
        }
        .button1 {
          min-width: 280px;
          max-width: 80%;
          padding: 1rem 1.5rem;
        }
        .button1:hover .text1{
          font-size: 2.1vh;
          transform: translateY(6px);
        }
      }