@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');


html {
    font-size: 62.5%; /* 62.5% of 16px = 10px */

}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.25;
  font-family: sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

html, body {
overflow:hidden;
    }

body {
    font-family: 'Open Sans', sans-serif;
}

.background-image {
    background: url('bg-tiny.webp') no-repeat center center;
      background-size: cover;
      
}
.background-image-big {
      background:url('bg.webp') no-repeat center center;
      background-size: cover;
      width:100vw;
    height:100vh;
      position:fixed;
    top:0;
    left:0;
}
.background-blur {
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px); /* For Safari */
      background-color: rgba(0, 0, 0, 0.2); /* Optional tint */
}
section.main.title {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100vw;
    height:100vh;
    overflow:auto;
    padding-bottom:8rem;
    position:fixed;
    top:0;
    left:0;
    
}

section.main.title.screen-height-short {
    padding-top:8rem;
    justify-content:flex-start;
}
.wrapper {
    max-width:110rem;
}


.title h1 {
    font-family: 'Montserrat', sans-serif;
    font-size:7rem;
    font-weight:700;
    color:white;
    margin-bottom:3rem;

}
.title h1 strong {
    text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: currentColor;
    text-decoration-thickness: from-font;
    text-underline-offset: 1rem;
    font-weight:900;
}

.title h1 .wave {
    display: inline-block;
  transform-origin: 70% 70%;
}

.title h1:hover .wave {
  animation: wave-animation 1s infinite;
}

@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.title .sub-title {
    color:white;
    font-size:2rem;
    font-weight:600;
    margin-bottom:2rem;
}

.title .sub-title span {
    font-size:2.3rem;
}

.title .stars {
    color:white;
    font-size:2rem;
    display:flex;
    gap:1rem;
    margin-bottom:6rem;
}

.title .socials {
    display:flex;
    gap:3rem;
    color:white;
    font-size:5rem;
}
.title .socials a {
    padding:0 1rem;
    border-radius:1rem;
    transition: background 0.3s ease;
}
.title .socials a:hover {
    background:rgba(255, 255, 255, .2);
}

.wave {
    display: inline-block;
  transform-origin: 70% 70%;
}



@media screen and (max-width:1140px) {
    .wrapper {
    max-width:100%;
    padding:0 2rem;
}
}

@media screen and (max-width:1024px) {
    html {
    font-size: 8px; /* 50% of the base */
  }
}

 
@media screen and (max-width:768px) {
.title h1 {
    font-size:6rem;
}
}