@font-face {
  font-family: 'basteleur';
  src: url('./fonts/basteleur-bold.ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'px';
  src: url('./fonts/px.ttf');
}

@font-face {
  font-family: 'ibm plex mono';
  src: url('./fonts/ibm-plex-mono-light.ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'ibm plex mono';
  src: url('./fonts/ibm-plex-mono-regular.ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'ibm plex mono';
  src: url('./fonts/ibm-plex-mono-medium.ttf');
  font-weight: 500;
}

::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
}

#svg-wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background ease-out 250ms;
}

h1 {
  padding: 25px 45px 45px 45px;
  font-family: 'basteleur';
  font-size: 32px;
}

h1 a {
  color: black;
  text-decoration: none;
  border-bottom: solid 4.5px black;
}

svg#orbits {
  overflow: visible;
  width: 14vw;
  height: 14vw;
  transform: rotateX(100deg) rotateY(-5deg);
  transition:
    width ease-out 250ms,
    height ease-out 250ms;
}

ellipse#ellipse-background {
  filter: drop-shadow(0px 0 20px var(--ellipse-color))
    drop-shadow(0px 0 20px var(--ellipse-color))
    drop-shadow(0px 0 20px var(--ellipse-color))
    drop-shadow(0px 0 20px var(--ellipse-color));
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50vh;
}

article {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 140px;
  font-family: 'basteleur';
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow ease-out 100ms;
}

article > div {
  transition: transform ease-out 100ms;
}

article:hover > div {
  transform: scale(1.4);
  text-shadow:
    0px 0px 30px var(--shadow),
    0px 0px 30px var(--shadow),
    0px 0px 30px var(--shadow),
    0px 0px 30px var(--shadow),
    0px 0px 30px var(--shadow);
}

div#grid {
  display: grid;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  padding: 10vw 15vw;
  grid-template-columns: repeat(30, 1fr);
  grid-auto-rows: 2vh;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: opacity ease-out 250ms;
}

div#grid > *:not(button) {
  height: fit-content;
}

div#grid img {
  width: 100%;
}

div#grid > a {
  grid-column: 13 / span 4;
  grid-row: 3;
  font-family: 'basteleur';
  font-size: 27px;
  word-break: none;
  width: max-content;
  text-decoration: none;
  color: black;
  height: fit-content;
}

div#grid img {
  vertical-align: middle;
}

button.close {
  position: fixed;
  top: 50px;
  right: 50px;
  font-size: 55px;
  border: solid 3px black;
  border-radius: 100%;
  width: 70px;
  height: 70px;
  cursor: pointer;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 52px;
  padding-top: 19px;
  padding-left: 32px;
}

h2 {
  hyphens: auto;
  padding: 20px 25px;
  font-family: 'basteleur';
  font-size: 42px;
  background: white;
  border: solid 3px black;
  width: max-content;
}

/* CREATE NEW HAIKU  */
button {
  opacity: 1;
  font-family: 'basteleur';
  font-size: 30px;
  padding: 15px 30px;
  border: solid 4px black;
  border-radius: 100px;
  cursor: pointer;
  background: white;
  transition: opacity ease-out 250ms;
  visibility: visible;
}

button:disabled {
  opacity: 0;
  visibility: hidden;
}

button#create {
  position: fixed;
  right: 50px;
  bottom: 50px;
}

div#modal {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  padding: 17vw 20vw 10vw 20vw;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: opacity ease-out 250ms;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

div#modal label#input-wrapper,
div#modal input[type='text'] {
  padding: 25px 45px;
  font-family: 'basteleur';
  font-size: 40px;
  border-radius: 100px;
  border: solid 4px black;
  cursor: pointer;
  background: white;
  text-align: center;
  outline: none;
}

div#modal input[type='text'] {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-timeline: auto;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

input[type='text']::placeholder {
  color: lightgrey;
}

div#modal label#input-wrapper input[type='file'],
div#modal input#title {
  display: none;
}

button#submit {
  width: 100%;
  text-align: center;
}