@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Outfit&display=swap);

html,body,#container {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

body {
  overflow: hidden;
}

@property --font-and-height-for-first-animation-lol {
  syntax: '<length-percentage>'; /* <- defined as type number for the transition to work */
  initial-value: 600px;
  inherits: false;
}

#container {
  display: flex;
  flex-direction: column;
  font-family: Outfit,sans;
}
#hdr {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: to100pxHeight;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 4s;
  height: 150px;
  border: 2px solid #8c8c8c;
  border-radius: 16px;
  margin: 20px;
  /* font-size: var(--font-and-height-for-first-animation-lol); */
}
#hdrc {
  display: flex;
  align-items: center;
  justify-content: center;
}
#hdrt {
  overflow: hidden;
  animation-name: typingd;
  animation-duration: 1s;
  /* animation-timing-function: linear; */
  animation-timing-function: steps(5, end);
  font-family: JetBrains Mono,monospace;
  font-size: 90px;
  animation-delay: 2s;
  width: 0;
  animation-fill-mode: forwards;
  white-space: nowrap;
}
@keyframes typingd {
  from {width: 0} to {width: 100%;}
}
#cp {
  height: 90px; 
  width: 2px; 
  background-color: #000; 
  animation-name: blink;
  opacity: 0;
  animation-duration: 1s;
  animation-iteration-count: 5;
  animation-direction: reverse;
  animation-timing-function: linear;
}
@keyframes blink {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}

#srch {
  height: 125px;
}
#rslt {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#ftr {
  height: 20px;
  border: 2px solid #222;
  font-family: JetBrains Mono, monospace;
}


/* @keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
} */

#schbc {
  /* border: 2px solid black; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  flex-direction: column;
}

#schbr {
  padding: 15px 30px;
  border: 2px solid #222;
  border-radius: 1024px;
  font-family: JetBrains Mono,monospace;
  font-size: 20px;
  outline: none;
}

/* <div class=card>
  <div class=card-name>name</div>
  <div class=card-classes-class-a>a per</div>
  <div class=card-classes-class-b>b per</div>
  <div class=card-classes-class-c>c per</div>
  <div class=card-classes-class-d>d per</div>
  <div class=card-classes-class-e>e per</div>
  <div class=card-classes-class-f>f per</div>
  <div class=card-classes-class-g>g per</div>
  <div class=card-classes-class-h>h per</div>
  <div class=card-advisor>advisor</div>
</div> */

.card {
  width: 210px;
  height: 320px;
  border: 2px solid black;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  font-size: 20px;
  font-family: JetBrains Mono,monospace;
  border-radius: 32px;
  margin: 20px;
}
.card-name {
  margin-top: 10px;
  font-size: 30px;
  margin-bottom: 10px;
}
/* .card-classes-class-a.card-classes-class-b.card-classes-class-c.card-classes-class-d.card-classes-class-e.card-classes-class-f.card-classes-class-g.card-classes-class-h.card-advisor {
  font-size: 20px;
} */
.card-classes-class-a:before {
  content: 'A: '
}
.card-classes-class-b:before {
  content: 'B: '
}
.card-classes-class-c:before {
  content: 'C: '
}
.card-classes-class-d:before {
  content: 'D: '
}
.card-classes-class-e:before {
  content: 'E: '
}
.card-classes-class-f:before {
  content: 'F: group '
}
.card-classes-class-g:before {
  content: 'G: '
}
.card-classes-class-h:before {
  content: 'H: '
}
.card-advisor:before {
  content: 'ADV: '
}

.visible {
  display: inline-flex;
}
.invis {
  display: none;
}

#crsltc {
  width: 95%;
  height: 70vh;
  border: 2px solid #6b6b6b;
  overflow: auto; /* Enable scrolling */
  -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  border-radius: 52px;
  text-align: center;
}

#cmdrslt {
  font-family: JetBrains Mono,monospace;
}

/* <div class=bigcard>
  <div class=bigcard-p1-name>p1 name</div>
  <div class=bigcard-p1-classes-class-a>a per p1</div>
  <div class=bigcard-p1-classes-class-b>b per p1</div>
  <div class=bigcard-p1-classes-class-c>c per p1</div>
  <div class=bigcard-p1-classes-class-d>d per p1</div>
  <div class=bigcard-p1-classes-class-e>e per p1</div>
  <div class=bigcard-p1-classes-class-f>f grp p1</div>
  <div class=bigcard-p1-classes-class-g>g per p1</div>
  <div class=bigcard-p1-classes-class-h>h per p1</div>
  <div class=bigcard-divider></div>
  <div class=bigcard-p2-name>p2 name</div>
  <div class=bigcard-p2-classes-class-a>a per p2</div>
  <div class=bigcard-p2-classes-class-b>b per p2</div>
  <div class=bigcard-p2-classes-class-c>c per p2</div>
  <div class=bigcard-p2-classes-class-d>d per p2</div>
  <div class=bigcard-p2-classes-class-e>e per p2</div>
  <div class=bigcard-p2-classes-class-f>f grp p2</div>
  <div class=bigcard-p2-classes-class-g>g per p2</div>
  <div class=bigcard-p2-classes-class-h>h per p2</div>
</div> */


.bigcard {
  width: 700px;
  height: 320px;
  border: 2px solid black;
  display: inline-flex;
  /* align-items: center; */
  flex-direction: row;
  justify-content: center;
  font-size: 20px;
  font-family: JetBrains Mono,monospace;
  border-radius: 32px;
  margin: 20px;
}
.bigcard-comparison-container {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  flex-grow: 1;
}
.bigcard-divider {
  background-color: #000;
  width: 2px;
}
.bigcard-p1-name, .bigcard-p2-name {
  margin-top: 10px;
  font-size: 30px;
  margin-bottom: 10px;
}
.bigcard-p1-classes-class-a:before, .bigcard-p2-classes-class-a:before {
  content: 'A: '
}
.bigcard-p1-classes-class-b:before, .bigcard-p2-classes-class-b:before {
  content: 'B: '
}
.bigcard-p1-classes-class-c:before, .bigcard-p2-classes-class-c:before {
  content: 'C: '
}
.bigcard-p1-classes-class-d:before, .bigcard-p2-classes-class-d:before {
  content: 'D: '
}
.bigcard-p1-classes-class-e:before, .bigcard-p2-classes-class-e:before {
  content: 'E: '
}
.bigcard-p1-classes-class-f:before, .bigcard-p2-classes-class-f:before {
  content: 'F: group '
}
.bigcard-p1-classes-class-g:before, .bigcard-p2-classes-class-g:before {
  content: 'G: '
}
.bigcard-p1-classes-class-h:before, .bigcard-p2-classes-class-h:before {
  content: 'H: '
}
.bigcard-p1-advisor:before, .bigcard-p2-advisor:before {
  content: 'ADV: '
}
.bigcard-matching-result:after {
  content: '⭐'
}