:root {
  --main-color: rgb(255, 255, 255);
}

/* @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap'); */

body {
  width: 100%;
  
  background-image: url("https://jsohndata.github.io/bluenight-in-seoul/src/images/bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  transition-duration: 1.3s;
}

h1 {
  margin: 0;
  padding: 0;
}

.main-container {
  font-family: 'Orbitron', sans-serif;
  /* Font size: 16 px add 2% of the viewport width */
  font-size: calc(20px + 3vw);
  color: var(--main-color);
  text-align: center;
  font-weight: 400;

  width: max-content;
  padding: 30px;
  border-radius: 13px;
  border: 7px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);

  background-image: linear-gradient( 358.4deg,  rgba(249,151,119,1) -2.1%, rgba(98,58,162,1) 90% );
  opacity: 91%;

  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.small {
  text-align: center;
  font-size: 0.8rem;
}