/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */

body {
  background-color: #222f37;
  color: white;
  width: 100%;
  height: 100vh;
}

.MainContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Links {
  display: flex;
  padding: 0 1rem;
  height: 3.5rem;
  align-items: center;
}

.Link {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: 1rem;
  text-decoration: none;
  color: #ddd;

  margin: 1rem;
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid transparent;
}

.Link:hover,
.Link:active {
  color: white;
  border-color: #ddd;
}

.Name {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: 5rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #ddd;

  height: calc(20vh + 5rem);
  flex-shrink: 1;
  min-height: 5rem;
  display: flex;
  align-items: flex-end;
  margin-bottom: 3rem;

  -webkit-animation: fadeIn 300ms ease-in 100ms both;
  animation: fadeIn 300ms ease-in 100ms both;
}

.Role {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  color: #ddd;
  text-align: center;
  white-space: nowrap;

  -webkit-animation: fadeIn 300ms ease-in 200ms both;
  animation: fadeIn 300ms ease-in 200ms both;
}

.Description {
  font-weight: 300;
  line-height: 2em;
  white-space: pre-wrap;
  text-align: center;

  width: 80%;
  max-width: 45rem;
  margin: 2rem auto 3rem auto;

  -webkit-animation: fadeIn 300ms ease-in 300ms both;
  animation: fadeIn 300ms ease-in 300ms both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.CatContainer {
  width: 100%;
  height: 66px;
  overflow: hidden;
  flex-shrink: 0;
}

.Cat {
  width: 133px;
  height: 66px;
  margin-left: -133px;
  background-image : url('../img/cat2.png');
  cursor: pointer;

  -webkit-animation: moveY 600ms steps(12) 5s infinite, moveX 20s linear 5s infinite, flip 20s steps(2) 5s infinite;
  animation: moveY 600ms steps(12) 5s infinite, moveX 20s linear 5s infinite, flip 20s steps(2) 5s infinite;
}

@keyframes moveY {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: -789px;
  }
}

@keyframes moveX {
  0% {
    margin-left: -133px;
  }
  25% {
    margin-left: calc(100% + 133px);
  }
  50% {
    margin-left: calc(100% + 133px);
    
  }
  75% {
    margin-left: -133px;
  }
  100% {
    margin-left: -133px;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

#OpenProjectsButton {
  text-decoration: none;
  color: #ddd;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: 1.3rem;

  width: 15rem;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  border: 1px solid #555;
  margin: 4rem auto 2rem auto;

  -webkit-animation: fadeIn 300ms ease-in 400ms both;
  animation: fadeIn 300ms ease-in 400ms both;

  transition: border-color 300ms ease-in;
}

#OpenProjectsButton:hover,
#OpenProjectsButton:active {
  border-color: #ddd;
}


@media(max-width: 38rem) {
  .Name {
    font-size: 2.5rem;
  }

  .Role {
    font-size: 1rem;
    color: #aaa;
    border-color: #777;
  }
}

@media(max-height: 44rem) {
  .CatContainer {
    display: none;
  }

  #OpenProjectsButton {
    margin-top: 0;
  }
}