@font-face {
  font-family: "IBMPlexSansKR_Light";
  src: url("/static/fonts/IBMPlexSansKR/Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IBMPlexSansKR_Regular";
  src: url("/static/fonts/IBMPlexSansKR/Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBMPlexSansKR_SemiBold";
  src: url("/static/fonts/IBMPlexSansKR/SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ibm-semibold: "IBMPlexSansKR_SemiBold";
  --ibm-regular: "IBMPlexSansKR_Regular";
  --ibm-light: "IBMPlexSansKR_Light";
}

body {
  font-family: var(--ibm-regular);
}

h1 {
  font-family: var(--ibm-semibold);
}

h3 {
  font-family: var(--ibm-regular);
}

.button-container {
  margin: 10px;
  gap: 24px;
}

button {
  font-family: var(--ibm-regular);
}

.link-container {
  margin: 10px;
  gap: 24px;
}

summary {
  font-family: var(--ibm-light);
}

a {
  font-family: var(--ibm-light);
}

li {
  font-family: var(--ibm-light);
  padding-top: 20px;
  padding-bottom: 20px;
  list-style: none;
  text-align: center;
}

p {
  font-family: var(--ibm-light);
}

img {
  max-width: 50%;
  height: auto;
}

@media (max-width: 767px) {
  img {
    max-width: 80%;
  }
}

input {
  font-family: var(--ibm-regular);
}

input::placeholder {
  font-family: var(--ibm-light);
}