html {
  overflow-x: hidden;
}

/* STASCII */
.stascii-board {
  display: grid;
  width: 750px;
  aspect-ratio: 750 / 175;
  padding: 1.15em;
  margin: 0 auto;
  border: 7px solid var(--fg);
  grid-template-columns: repeat(56, 1fr);
  grid-template-rows: repeat(10, 1fr);
  background-color: #03021d;
  position: relative;
  gap: 3% 0;
}
.stascii-board span {
  color: #000;
  background-color: #fff;
  position: relative;
  border-radius: 1px;
  transition: 900ms;
}
.stascii-board span:hover {
  margin: 0 -7px;
  transition: 150ms;
  background-color: var(--fg);
}

.logo-S-top {grid-area: 1 / 2 / 1 / span 5;}
.logo-S-atop-l1 {grid-area: 2 / 1 / 2 / span 2;}
.logo-S-atop-l2 {grid-area: 3 / 1 / 3 / span 2;}
.logo-S-atop-r1 {grid-area: 2 / 6 / 2 / span 2;}
.logo-S-atop-r2 {grid-area: 3 / 6 / 3 / span 2;}
.logo-S-mid1 {grid-area: 4 / 2 / 4 / span 2;}
.logo-S-mid2 {grid-area: 5 / 3 / 5 / span 3;}
.logo-S-mid3 {grid-area: 6 / 5 / 6 / span 2;}
.logo-S-mid4 {grid-area: 7 / 6 / 7 / span 2;}
.logo-S-bend-l1 {grid-area: 8 / 1 / 8 / span 2;}
.logo-S-bend-l2 {grid-area: 9 / 1 / 9 / span 2;}
.logo-S-bend-r1 {grid-area: 8 / 6 / 8 / span 2;}
.logo-S-bend-r2 {grid-area: 9 / 6 / 9 / span 2;}
.logo-S-bottom {grid-area: 10 / 2 / 10 / span 5;}

.logo-T-top1 {grid-area: 1 / 10 / 1 / span 8;}
.logo-T-top2 {grid-area: 2 / 13 / 2 / span 2;}
.logo-T-edge-l {grid-area: 2 / 10 / 2 / 10;}
.logo-T-edge-r {grid-area: 2 / 17 / 2 / 17;}
.logo-T-m1 {grid-area: 3 / 13 / 3 / span 2;}
.logo-T-m2 {grid-area: 4 / 13 / 4 / span 2;}
.logo-T-m3 {grid-area: 5 / 13 / 5 / span 2;}
.logo-T-m4 {grid-area: 6 / 13 / 6 / span 2;}
.logo-T-m5 {grid-area: 7 / 13 / 7 / span 2;}
.logo-T-m6 {grid-area: 8 / 13 / 8 / span 2;}
.logo-T-m7 {grid-area: 9 / 13 / 9 / span 2;}
.logo-T-bottom {grid-area: 10 / 12 / 10 / span 4;}

.logo-a-top {grid-area: 1 / 22 / 1 / span 3;}
.logo-a-atop-l {grid-area: 2 / 21 / 2 / span 2;}
.logo-a-atop-r {grid-area: 2 / 24 / 2 / span 2;}
.logo-a-l1 {grid-area: 3 / 20 / 3 / span 2;}
.logo-a-l2 {grid-area: 4 / 20 / 4 / span 2;}
.logo-a-l3 {grid-area: 5 / 20 / 5 / span 2;}
.logo-a-l4 {grid-area: 7 / 20 / 7 / span 2;}
.logo-a-l5 {grid-area: 8 / 20 / 8 / span 2;}
.logo-a-l6 {grid-area: 9 / 20 / 9 / span 2;}
.logo-a-l7 {grid-area: 10 / 20 / 10 / span 2;}
.logo-a-mid {grid-area: 6 / 20 / 6 / span 7;}
.logo-a-r1 {grid-area: 3 / 25 / 3 / span 2;}
.logo-a-r2 {grid-area: 4 / 25 / 4 / span 2;}
.logo-a-r3 {grid-area: 5 / 25 / 5 / span 2;}
.logo-a-r4 {grid-area: 7 / 25 / 7 / span 2;}
.logo-a-r5 {grid-area: 8 / 25 / 8 / span 2;}
.logo-a-r6 {grid-area: 9 / 25 / 9 / span 2;}
.logo-a-r7 {grid-area: 10 / 25 / 10 / span 2;}

.logo-s-top {grid-area: 1 / 30 / 1 / span 5;}
.logo-s-atop-l1 {grid-area: 2 / 29 / 2 / span 2;}
.logo-s-atop-l2 {grid-area: 3 / 29 / 3 / span 2;}
.logo-s-atop-r1 {grid-area: 2 / 34 / 2 / span 2;}
.logo-s-atop-r2 {grid-area: 3 / 34 / 3 / span 2;}
.logo-s-mid1 {grid-area: 4 / 30 / 4 / span 2;}
.logo-s-mid2 {grid-area: 5 / 31 / 5 / span 3;}
.logo-s-mid3 {grid-area: 6 / 33 / 6 / span 2;}
.logo-s-mid4 {grid-area: 7 / 34 / 7 / span 2;}
.logo-s-bend-l1 {grid-area: 8 / 29 / 8 / span 2;}
.logo-s-bend-l2 {grid-area: 9 / 29 / 9 / span 2;}
.logo-s-bend-r1 {grid-area: 8 / 34 / 8 / span 2;}
.logo-s-bend-r2 {grid-area: 9 / 34 / 9 / span 2;}
.logo-s-bottom {grid-area: 10 / 30 / 10 / span 5;}

.logo-c-top {grid-area: 1 / 39 / 1 / span 5;}
.logo-c-l1 {grid-area: 2 / 38 / 2 / span 2;}
.logo-c-l2 {grid-area: 3 / 38 / 3 / span 2;}
.logo-c-l3 {grid-area: 4 / 38 / 4 / span 2;}
.logo-c-l4 {grid-area: 5 / 38 / 5 / span 2;}
.logo-c-l5 {grid-area: 6 / 38 / 6 / span 2;}
.logo-c-l6 {grid-area: 7 / 38 / 7 / span 2;}
.logo-c-l7 {grid-area: 8 / 38 / 8 / span 2;}
.logo-c-l8 {grid-area: 9 / 38 / 9 / span 2;}
.logo-c-r1 {grid-area: 2 / 43 / 2 / span 2;}
.logo-c-r2 {grid-area: 3 / 43 / 3 / span 2;}
.logo-c-r3 {grid-area: 8 / 43 / 8 / span 2;}
.logo-c-r4 {grid-area: 9 / 43 / 9 / span 2;}
.logo-c-bottom {grid-area: 10 / 39 / 10 / span 5;}

.logo-I1-top {grid-area: 1 / 47 / 1 / span 4;}
.logo-I1-1 {grid-area: 2 / 48 / 2 / span 2;}
.logo-I1-2 {grid-area: 3 / 48 / 3 / span 2;}
.logo-I1-3 {grid-area: 4 / 48 / 4 / span 2;}
.logo-I1-4 {grid-area: 5 / 48 / 5 / span 2;}
.logo-I1-5 {grid-area: 6 / 48 / 6 / span 2;}
.logo-I1-6 {grid-area: 7 / 48 / 7 / span 2;}
.logo-I1-7 {grid-area: 8 / 48 / 8 / span 2;}
.logo-I1-8 {grid-area: 9 / 48 / 9 / span 2;}
.logo-I1-bottom {grid-area: 10 / 47 / 10 / span 4;}

.logo-I2-top {grid-area: 1 / 53 / 1 / span 4;}
.logo-I2-1 {grid-area: 2 / 54 / 2 / span 2;}
.logo-I2-2 {grid-area: 3 / 54 / 3 / span 2;}
.logo-I2-3 {grid-area: 4 / 54 / 4 / span 2;}
.logo-I2-4 {grid-area: 5 / 54 / 5 / span 2;}
.logo-I2-5 {grid-area: 6 / 54 / 6 / span 2;}
.logo-I2-6 {grid-area: 7 / 54 / 7 / span 2;}
.logo-I2-7 {grid-area: 8 / 54 / 8 / span 2;}
.logo-I2-8 {grid-area: 9 / 54 / 9 / span 2;}
.logo-I2-bottom {grid-area: 10 / 53 / 10 / span 4;}

.hover-in {animation: hover-in 150ms;}
.hover-out {animation: hover-out 900ms;}
@keyframes hover-in {
  0% {margin: 0 0;background-color: #fff;}
  100% {margin: 0 -7px;background-color: var(--fg);}
}
@keyframes hover-out {
  0% {margin: 0 -7px;background-color: var(--fg);}
  100% {margin: 0 0;background-color: #fff;}
}
/********************************************************/
.cover {
  width: 100%;
  color: #fff;
  position: relative;
  font-family: 'Fira Mono', monospace;
  letter-spacing: 1px;
  padding: 150px 50px 30px;
  background-color: var(--bg);
  overflow: hidden;
}
.cover h1 {
  font-size: 1.9rem;
}
.edge-v1, .edge-v2 {
  position: absolute;
  background-color: var(--fg);
  width: 3vw;
  height: 10vw;
  bottom: 0;
}
.edge-h2, .edge-h1 {
  position: absolute;
  background-color: var(--fg);
  width: 10vw;
  height: 3vw;
  bottom: 0;
}
.edge-v1, .edge-h1 {left: 0;}
.edge-v2, .edge-h2 {right: 0;}
.title {
  text-align: center;
  padding: 50px 0;
}
.cover span {color: var(--fg);}
#main-nav {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
#fstLine {
  width: 70%;
  margin: auto;
}
.vLine {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}
.slider {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  justify-content: center;
  gap: 30px;
  padding: 30px 0;
  margin: 10px auto 0;
  align-items: center;
}
.slider img {width: 100%;}
.slider p {
  width: 325px;
  margin: auto;
}
.slider > a {
  color: #000;
  position: relative;
  background-color: var(--trans-bg);
  text-decoration: none;
  transition: 0.3s ease;
  width: 350px;
  padding-bottom: 20px;
}
.slider > a:hover {
  box-shadow: 0 0 25px #000;
}
.slider div {
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  margin: 7px auto 0;
  overflow: hidden;
  background-color: var(--bg);
  color: #fff;
  cursor: pointer;
  transition: width 230ms ease;
}
.slider div:hover {width: 150px;}
.slider b {
  display: flex;
  font-weight: 500;
  align-items: center;
  height: 100%;
  transition: .5s ease;
}
.learn::before {content: var(--start);}
.learn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  width: 40px;
  height: 100%;
}
.info {
  text-align: center;
  margin: 0 auto 2rem;
  width: 70%;
}
.globe {
  display: flex;
  justify-content: center;
  width: 100%;
  /* margin: 0 auto; */
}
.info-bg {
  display: block;
  width: 780px;
  font-size: .8rem;
}
@media (max-width : 1045px){
  header > div {width: 90%;}
}
@media (max-width: 885px) {
  .stascii-board {width: 550px;}
  .title {padding: 30px 0;}
  .slider {width: 100%;}
  .info {width: 95%;}
}
@media (max-width : 650px){
  .cover {padding: 120px 5px 30px;}
  .title {padding: 10px 0;font-size: .8rem;}
  #fstLine {width: 90%;}
  .cover h1 {font-size: 1.5rem;}
  .stascii-board {width: 100%;padding: 10px;}
  .info {padding: 0 30px;}
  .popup {width: 90%;}
  .info-bg {font-size: 2vw;}
}