@font-face {
   font-family: "HossRound-Medium";
   src: url("/assets/fonts/HossRound-Medium.woff2") format("woff2"), url("/assets/fonts/HossRound-Medium.woff") format("woff");
   font-weight: 300;
   font-style: normal;
}
@font-face {
   font-family: "HossRound-MediumItalic";
   src: url("/assets/fonts/HossRound-MediumItalic.woff2") format("woff2"), url("/assets/fonts/HossRound-MediumItalic.woff") format("woff");
   font-weight: 300;
   font-style: italic;
}

@font-face {
   font-family: "HossRound-Black";
   src: url("/assets/fonts/HossRound-Black.woff2") format("woff2"), url("/assets/fonts/HossRound-Black.woff") format("woff");
   font-weight: 900;
   font-style: normal;
}

@font-face {
   font-family: "HossRound-BlackItalic";
   src: url("/assets/fonts/HossRound-BlackItalic.woff2") format("woff2"), url("/assets/fonts/HossRound-BlackItalic.woff") format("woff");
   font-weight: 900;
   font-style: normal;
}

html,
body {
   font-size: 62.5%;
   font-family: "HossRound-Medium", Arial, Helvetica, sans-serif;
   width: 100vw;
   height: 100vh;
   line-height: 1.1;
   letter-spacing: 0.06rem;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-font-smoothing: auto;
   box-sizing: border-box;
   /* cursor: none; */
   background-color: white;
}

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

.logo {
   font-family: "HossRound-Black", Arial, Helvetica, sans-serif;
   font-weight: 900;
   font-feature-settings: "ss03" 1;
}

div.cursor {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 10px;
   height: 10px;
   background-color: black;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width 0.5s, height 0.5s;
   z-index: 1000;
}

canvas {
   position: fixed;
   overflow: hidden;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 1;
}
header {
   display: grid;
   grid-template: repeat(1, 1fr) / repeat(2, 1fr);
   /* padding: 0.6rem; */
   height: 100%;
   width: 100%;

   /* background: linear-gradient(180deg, rgb(255, 255, 255), rgb(255, 255, 255, 0) 30%); */
   z-index: 10;
   position: absolute;
}

.texto {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   user-select: none;
   inset: 0;
   z-index: 10;
   font-size: 2.5rem;
   color: #002fa7;
   background: linear-gradient(180deg, rgb(255, 255, 255), rgb(255, 255, 255, 0) 30%);
   /* color: white;
   mix-blend-mode: difference; */
}
.texto p,
h1 {
   padding: 0.6rem;
}
.texto a {
   color: #002fa7;
}
.texto a:hover {
   text-decoration: none;
}

@media screen and (max-width: 500px) {
   header {
      grid-template: repeat(2, 1fr) / repeat(1, 1fr);
   }
   .texto {
      background: linear-gradient(180deg, rgb(255, 255, 255), rgb(255, 255, 255, 0) 70%);
   }
}