@font-face {
  font-family: 'GreatVibes';
  src: url('/fonts/GreatVibes-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'JosefinSans';
  src: url('/fonts/JosefinSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'JosefinSans';
  src: url('/fonts/JosefinSans-Bold.ttf') format('truetype');
  font-weight: bold;
}

*, ::after, ::before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

a, a:visited {
  color: black;
}

body, input {
  font-family: "JosefinSans";
}

.font-pretty {
  font-family: "GreatVibes";
}

.main {
  display: flex;
  flex-direction: row;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
}

.main .main-1 {
  width: 70vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.main .main-2 {
  width: 30vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

@media (max-width: 900px) {
  .main {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100vw;
  }
  
  .main .main-1 {
    width: 100vw;
    height: 80vh;
    height: calc(var(--vh, 1vh) * 80);
  }
  
  .main .main-2 {
    width: 100vw;
    height: 20vh;
    height: calc(var(--vh, 1vh) * 20);
  }
  
}

.password {
  display: flex;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  align-items: center;
}