@font-face {
  font-family: SpaceGrotesk;
  src: url(assets/SpaceGrotesk.ttf);
}

@keyframes screenload{
  from {opacity: 0;}
  to {opacity: 1;}
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "SpaceGrotesk", "Arial", san-serif;
  overflow:hidden;
  background-color:#190d1f;
}

body{
  animation-name: screenload;
  animation-duration: 2s;
}

h1, p{
  color:#e4f5fa;
}

h1{
  font-size: 2em;
  font-weight: 500;
}

p{
  font-size: 1em;
  font-weight: 100;
}

button{
  background: none;
  border:none;
  width:40px;
  height:40px;
  margin: 0 5px;
  opacity: 100%;
  transition: opacity 0.5s;
}

button img{
  height: 80%;
  opacity:100%;
}

button:hover{
  opacity: 60%;
  cursor:pointer;
}

header{
  position: fixed;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  background-color: #e4f5fa;
  width:100%;
  padding: 0 10px;
}

header p{
  color:#190d1f;
  font-size: 1em;
  font-weight: 500;
}

.headerItem{
  padding:5px;
  max-height:30px;
}

.headerItem:hover{
  opacity: 80%;
  cursor: pointer;
  text-decoration: underline;
}

.center{
  margin: 0;
  position: absolute;
  width: 100%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.middle{
  display: flex;
  justify-content: center;
  align-items: center;
}

.leftContent{
  transform: translateX(-50%);
}

.middleContent{
  max-width: 100px;
  transform: translateX(5%);
  align-self: center;
}

.middleContent img{
  width:100%;
}

.rightContent{
  transform: translateX(50%);
}

.greeting{
  position: relative;
  transform: translateY(175%);
  text-align: center;
}

.links{
  position: relative;
  transform: translateY(350%);
}

#leftText{
  text-align: right;
}

#rightText{
  text-align:left;
}

canvas {
  display: block;
}

@media screen and (max-width: 375px) {
  h1{
    font-size: 1.5em;
  }

  p{
    font-size: 1em;
  }

  .middleContent{
    max-width: 80px;
  }

  button{
    width:40px;
  }
  
}