@font-face {
  font-family: 'GFS Neohellenic';
  src: url('/fonts/GFSNeohellenic-BoldItalic.woff2') format('woff2'),
    url('/fonts/GFSNeohellenic-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GFS Neohellenic';
  src: url('/fonts/GFSNeohellenic-Bold.woff2') format('woff2'),
    url('/fonts/GFSNeohellenic-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GFS Neohellenic';
  src: url('/fonts/GFSNeohellenic-Regular.woff2') format('woff2'),
    url('/fonts/GFSNeohellenic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GFS Neohellenic';
  src: url('/fonts/GFSNeohellenic-Italic.woff2') format('woff2'),
    url('/fonts/GFSNeohellenic-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@keyframes flyInLeft {
  0% {
    transform: translate(-50vw, 0);
  }

  20% {
    transform: translate(-50vw, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes flyInRight {
  0% {
    transform: translate(60vw, 0);
  }

  20% {
    transform: translate(60vw, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes flyInTop {
  0% {
    transform: translate(0, -50vh);
  }

  20% {
    transform: translate(0, -50vh);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes flyInBottom {
  0% {
    transform: translate(0, 55vh);
  }

  20% {
    transform: translate(0, 50vh);
  }

  100% {
    transform: translate(0, 0);
  }
}

body {
  font-family: 'GFS Neohellenic';
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden;
  overflow-y: hidden;

}

div.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg.logo {
  width: 10rem;
  height: 10rem;
  animation-name: flyInLeft;
  animation-duration: 3s;
  animation-timing-function: ease-out;
}

h1 {
  color: #658392;
  margin: 0;
  font-size: 6rem;
  font-weight: inherit;
  font-style: inherit;
  margin-bottom: 2rem;
}

h2 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: inherit;
  font-style: inherit;
  text-align: left;
  max-width: 27.6rem;
  padding-left: 2rem;
  padding-top: 1.3rem;
  animation-name: flyInRight;
  animation-duration: 3s;
  animation-timing-function: ease-out;

}



@media only screen and (max-width: 768px) {
  div.container {
    flex-direction: column;
  }

  svg.logo {
    animation-name: flyInTop;
  }

  h2 {
    padding-left: 0;
    padding-top: 2rem;
    text-align: center;
    font-style: 2rem;
    max-width: 90%;
    animation-name: flyInBottom;
  }
}