@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DNanum%2BMyeongjo%3Awght%40400%3B700%3B800%26family%3DRoboto%3Aital%2Cwght%400%2C100%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C700%3B0%2C900%3B1%2C100%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C700%3B1%2C900%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DRoboto%3Aital%2Cwght%400%2C100%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C700%3B0%2C900%3B1%2C100%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C700%3B1%2C900%26family%3DSource%2BSans%2BPro%3Aital%2Cwght%400%2C200%3B0%2C300%3B0%2C400%3B0%2C600%3B0%2C700%3B0%2C900%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C600%3B1%2C700%3B1%2C900%26display%3Dswap");
:root {
  margin: 0;
  padding: 0;
  --font-main: 'Source Sans Pro', sans-serif;
  --font-fancy: 'Nanum Myeongjo', serif;
  font-family: var(--main-font);
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header {
  max-width: 90vh;
  min-width: 50vw;
  width: 80vw;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.content {
  max-width: 60vw;
  margin: 1.25rem 0;
  width: 80vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
}

.qual-cap-con {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: var(--font-fancy);
  font-size: 0.75rem;
  font-weight: 300;
  margin: 0.5rem 0;
}

.qual-cap {
  width: 10%;
  text-align: center;
}

.qual-cap2 {
  width: 11.11%;
  text-align: center;
}

.qual-cap3 {
  width: 21.22%;
  text-align: center;
}

.qual2 {
}

.qual3 {
  display: flex;
  width: 50%;
}

.title {
  font-family: var(--font-main);
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
}

.title-conf {
  font-size: 1.75rem;
  font-weight: 300;
}

.abstract {
  margin: 2rem 0;
}

.abstitle {
  font-family: var(--font-main);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: .5rem;
}

.teaser-cap-a {
  position: relative;
  top: -1rem;
}

.section3 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sectitle {
  font-family: var(--font-main);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0.25rem;
}

.secsectitle {
  font-family: var(--font-main);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;

}

.author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.abstract-content {
  font-family: var(--font-main);
  font-size: 1.1rem;
  font-weight: 300;
  text-align: justify;
}

.author-list {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 gap: 0;
 font-family: var(--font-main);
 font-weight: 300;
 font-size: 1.2rem;
 flex-direction: column;
 margin-bottom: 1rem;
}

.author {
  display: center;
}

.social-link {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 300;
  text-decoration: none;
  color: white;
  background: black;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#bibtex-link {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 300;
  text-decoration: none;
  color: white;
  background: black;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.footer {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 1.25rem;
  width: 100%;
  text-align: center;
  color: black;
  margin: 2rem 0;
}

.divider {
  width: 100%;
  height: 1px;
	content: "";
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

.teaser-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.teaser-top {
  width: 100%;
  display: flex;
  align-items: center;
  flex
}

.teaser-bottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#teaser-a {
  width: 100%;
  margin-bottom: -1.5rem;
}

.teaser-b {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.25rem;
}

.teaser-b-caption {
  font-family: var(--font-fancy);
  font-size: 1.0rem;
  font-weight: 300;
  width: 25%;
  text-align: center;
  margin-bottom: 1rem;
}

.qual {
  width: 100%;
}

.teaser-c-caption {
  font-family: var(--font-fancy);
  font-size: 1.0rem;
  font-weight: 300;
  width: 40%;
  text-align: center;
  margin-bottom: 1rem;
}

.teaser-caption {
  font-family: var(--font-fancy);
  font-size: 1.0rem;
  font-weight: 300;
}

.hl-red {
  color: color(srgb 0.93 0.3291 0.279);
}

.hl-green {
  color: color(srgb 0.4712 0.76 0.5693);
}

pre {
  margin: 0;
  font-size: min(0.92rem, 1vw);
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 1px;
  padding: 1rem;
  width: fit-content;
  margin: auto;
}

.institution-list {
  font-family: var(--font-main);
  font-size: 1.2rem;
  margin-top: 1rem;
}

.contribution {
  font-family: var(--font-main);
  font-size: 1.2rem;
}

.author-link {
    color: #4286f4;
    text-decoration:none;
}

model-viewer {
  width: 100%;
}

.demo-left {
  background: red;
}
.demo-right {
  background: blue;
}

.gen-btn-con {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-main);
  font-size: 1rem;
  margin-bottom: 2rem;
}

.gen-btn {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  width: fit-content;
  text-align: center;
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 300;
}

.section {
  max-width: 100%;
  min-width: 10rem;
  width: 80vw;
}

.gen-gallery {
  margin-bottom: 2rem;
}

.gen-btn-select {
  background: black;
  color: white;
}

#gen-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: 1rem;
  flex-direction: column;
}

.gen-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 17%;
  min-width: 10vw;
}

.part-completion-btn-con {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.part-completion-btn {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  width: fit-content;
  text-align: center;
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 300;
}

.part-completion-gallery {
  margin-bottom: 2rem;
}

.part-completion-btn-select {
  background: black;
  color: white;
}

#part-completion-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.part-completion-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 25%;
  min-width: 10vw;
}

.part-mixing-btn-con {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.part-mixing-btn {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  width: fit-content;
  text-align: center;
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 300;
}

.part-mixing-gallery {
  margin-bottom: 2rem;
}

.part-mixing-btn-select {
  background: black;
  color: white;
}

#part-mixing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.part-mixing-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 25%;
  min-width: 10vw;
}

.text-generation-btn-con {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.text-generation-btn {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  width: fit-content;
  text-align: center;
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 300;
}

.text-generation-gallery {
  margin-bottom: 2rem;
}

.text-generation-btn-select {
  background: black;
  color: white;
}

#text-generation-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.text-generation-cell {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 48%;
}

.boundary-right {
    border-right: 1px solid black;
}


.text-generation-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 50%;
  min-width: 10vw;
}
.text-completion-btn-con {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.text-completion-btn {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  width: fit-content;
  text-align: center;
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 300;
}

.text-completion-gallery {
  margin-bottom: 2rem;
}

.text-completion-cell {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
}

.text-completion-btn-select {
  background: black;
  color: white;
}

#text-completion-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.text-completion-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 24%;
  min-width: 10vw;
}


.text-generation-subtitle {
    width: 25%;
    height: 1rem;
    font-size: 1rem;
    font-family: var(--font-main);
    text-align: center;
}

.text {
    vertical-align: center;
    width: 100%
    text-align: center;
    font-size: 1.rem;
    font-family: var(--font-fancy);
}

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

@media only screen and (max-width: 500px) {
  .teaser-bottom {
    flex-direction: column;
  }
  #teaser-a {
    margin-bottom: 0.5rem;
  }
  .teaser-b-caption {
    font-size: 0.7rem;
  }
  .qual-cap-con {
    font-size: 7px;
  }
  .qual3 {
    width: 100%;
  }
  #gen-content {
    flex-direction: row;
  }
  .gen-content-con {
    flex-direction: column;
    width: 50%;
  }
  .text-generation-subtitle {
    width: 100%;
  }
  .gen-entry {
    width: 100%;
  }
}