@font-face {
    font-family: 'CircularStd-Book';
    src: url('../font/CircularStd-Book.eot'); /* IE9 Compat Modes */
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/CircularStd-Book.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CircularStd-Book.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CircularStd-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../font/CircularStd-Book.svg#svgFontName') format('svg'); /* Legacy iOS */
               font-weight: normal;
           font-style: normal;
  }
  
@font-face {
    font-family: 'CircularStd-Light';
    src: url('../font/CircularStd-Light.eot'); /* IE9 Compat Modes */
    src: url('../font/CircularStd-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/CircularStd-Light.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CircularStd-Light.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CircularStd-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../../font/CircularStd-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
               font-weight: light;
           font-style: light;
  }

@font-face {
    font-family: 'Fox';
    src: url('../font/Fox.eot');
    src: url('../font/Fox.eot?#iefix') format('embedded-opentype'),
        url('../font/Fox.woff2') format('woff2'),
        url('../font/Fox.woff') format('woff'),
        url('../font/Fox.ttf') format('truetype'),
        url('../font/Fox.svg#Fox') format('svg');
  }

body {
    margin: 0;
    padding: 0;
    font-family: CircularStd-Book;
 }

a {
   color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: inherit;
  text-decoration-thickness: 0.09em;
}

a:hover {
   opacity: 0.8;
}
 
 .background-image {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/background-ht25.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
 }

  .background-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #0B1D33;
   background: radial-gradient(circle,rgba(11, 29, 51, 0) 0%, rgba(11, 29, 51, 0) 27%, rgba(11, 29, 51, 0.62) 100%);
 }

 .background-image::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
background: #8B683C;
background: radial-gradient(circle,rgba(139, 104, 60, 0.23) 0%, rgba(139, 104, 60, 0) 42%, rgba(139, 104, 60, 0) 100%);
 }

 .logo-container {
   display: flex;
   justify-content: center; 
   align-items: center; 
   height: 100svh;
   min-height: -webkit-fill-available;
 }
 
 .logo {
    width: 150px;
    height: 150px;
 }
 
 .corner {
    position: absolute;
    font-size: 3vmax;
    color: #fff;
    padding: 10px;
 }

 .max30 {
    max-width: 50%;
    hyphens: auto;
 }
 
 .top-left {
    top: 1%;
    left: 2%;
    font-family: Fox !important;
    font-size: 16.2vw;
    line-height: 10vw;
    text-shadow: -1px -1px 9px rgba(0,0,0,0.21);
    letter-spacing: 0.5px;
 }
 
 .top-right {
    top: 2%;
    right: 2%;
 }
 
 .bottom-left {
    bottom: 2%;
    left: 2%;
 }

 .bottom-right {
    bottom: 2%;
    right: 2%;
 }

 .bottom-middle {
    bottom: 2%;
    font-size: 3vmax;
    left: 50%;
    transform: translateX(-50%);  
 }
 
 .corner.bottom-middle a {
    margin-left: 10px;
    color: #fff;
}

.corner.bottom-middle a:first-child {
   margin-left: 0;
   color: #fff;
}

.corner.bottom-middle a:hover {
    color: #f0f0f0;
}

@media (orientation: portrait) {
   .max30 {
      max-width: 100%;
      hyphens: auto;
   }

   .top-left {
      font-size: 25vw;
      line-height: 15vw;
   }

   .top-right {
      bottom: 10%;
      right: 2%;
      top: unset;
   }

   .bottom-left {
      bottom: 2%;
      right: 2%;
      left: unset;
   }

   .bottom-right {
      bottom: 6%;
   }

   .bottom-middle {
      left: 2%;
      transform: none;  
      bottom: 1.5%;
   }
}