body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
  font-family: 'Arial', sans-serif;
}

.container {
  width: 50vw;
  position: relative;
  cursor: pointer;
}

.logo {
  width: 100%;
}

.hover-info {
  display: block; /* Make it visible by default */
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  width: 13vw; /* Adjusted to fit the email */
  height: 1.5vw;
  text-align: center;
  font-size: 1.5vw;
  color: white; /* Making text color white */
  font-family: 'Tourney'; /* Using Tourney font */
}

.smaller {
  font-size: calc(1.5vw * 0.78574036); /* 0,78574036% smaller */
  color: white; /* Making "@" character black */
}

@media screen and (max-width: 600px) { /* Adjust 600px to your preferred mobile breakpoint if needed */
  .hover-info {
      display: block;      /* Ensure it's always visible */
      position: relative;  /* Override the absolute position */
      top: 4vw;           /* Spacing from the logo. Adjust as needed */
      left: 0;             /* Reset left position */
      width: 50vw;
      height: 5vw;
      background: transparent;    /* Remove background if you don't want it on mobile */
      color: white;        /* Adjust text color if needed */
      font-size: 3vw;     /* Adjust font size if needed */
      left: 50%; /* Center it horizontally */
      transform: translateX(-50%); /* Adjust for its own width to actually center it */
  }
}