*{
    padding: 0;
    margin: 0;
}

body{
  overflow-y: hidden;
  font-family: 'HN-Futura-Duplex-Regular';
  font-size: 1.5rem;
}
:lang(zh) {
  font-size: 1.3rem;
}

@font-face {
  font-family: "HN-Futura-Duplex-Regular";
  src: url("../font/hershey-noailles/Hershey-Noailles-Futura-Duplex-Regular.woff") format('woff');
}

@font-face {
  font-family: "HN-Futura-Simplex-Bold";
  src: url("../font/hershey-noailles/Hershey-Noailles-Futura-Simplex-Bold.woff") format('woff');
}

@font-face {
  font-family: "HN-Times-Dublex-Italic-Light";
  src: url("../font/hershey-noailles/Hershey-Noailles-Times-Duplex-Italic-Light.woff") format('woff');
}

@font-face {
  font-family: "CMU classic serif";
  src: url("../font/cmunci.woff") format('woff');
}

@font-face {
    font-family: "Apercu-mono";
    src: url("../font/Apercu/Apercu Mono.otf") format("opentype");
}

@font-face {
    font-family: "Apercu";
    src: url("../font/Apercu/Apercu Regular.otf") format("opentype");
}


hr.divider-solid{
  border-top: 1.5px solid black;
}
a:link {
  text-decoration: none;
  color:black;
}
p > a:link, a:visited, a:hover, a:active{
  text-decoration: underline;
  color:black;
  font-family: "HN-Times-Dublex-Italic-Light";
}
#italic-in-block{
  font-family: "HN-Times-Dublex-Italic-Light";
}


::-webkit-scrollbar {
    width: 2rem;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
  margin-bottom: 5vh;
  background-color:#c9c9c9;
  border:3px solid #ffffff;
  border-style: outset;
  display:inline-block;
  padding:1.2vh 1.2vh;
  text-decoration:none;
}

.bottombar {
  order: 1;
  width:100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bottombar>a {
  color:white;
  text-shadow: 0.5px 0.5px 0.5px grey;
  text-align: center;
  background-color:#c9c9c9;
  border:3px solid #ffffff;
  border-style: outset;
	display:inline-block;
	text-decoration:none;
}
.bottombar>a:hover {
  border-style:inset;
}

.content{
  display: flex;
  flex-direction: row;
}

.imagebox{
  order: 1;
  width: 60%;
  height: 100vh;
  overflow-x:hidden;
  overflow-y: scroll;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}
.imagebox img{
  width: 100%;
}

.imagebox-collage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 100vh;
  overflow-y: scroll;
}
.imagebox-collage > div{
  width: 25%;
  margin:1vw;
}
.imagebox-collage > div >img{
  width: 100%;
}

figcaption{
  font-size: 1rem;
  text-align: right;
}

.text {
  order: 2;
  width: 40%;
  height: 100vh;
  overflow-x:hidden;
  overflow-y: scroll;
}
.text::-webkit-scrollbar {
  width: 0 !important
}
.term{
  border:3px solid #ffffff;
  border-style: outset;
  font-family: 'HN-Futura-Simplex-Bold';
}
.text-section{
  margin-bottom: 2rem;
}
.text-section > div > div {
  border:3px solid #ffffff;
  border-style: outset;
  /* background-color:#c9c9c9; */
}

.text-section > div > div:hover:has(a) {
  cursor: pointer;
  border-style:inset;
}

.text > .text-section > .row-typeA {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto,auto;
}
.text > .text-section > .row-typeA > .div1 { grid-area: 1 / 1 / 2 / 7; font-size: 2rem;font-family: "HN-Futura-Simplex-Bold"; align-self: end;}
.text > .text-section > .row-typeA > .div2 { grid-area: 2 / 1 / 3 / 7; }
.text > .text-section > .row-typeA > .div3 { grid-area: 3 / 1 / 4 / 3; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeA > .div4 { grid-area: 3 / 3 / 4 / 5; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeA > .div5 { grid-area: 3 / 5 / 4 / 7; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeA > .div6 { grid-area: 4 / 2 / 5 / 7; }

.text > .text-section > .row-typeB{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}
.text > .text-section > .row-typeB > .div1 { grid-area: 1 / 1 / 2 / 2; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeB > .div2 { grid-area: 1 / 2 / 2 / 4; }

.text > .text-section > .row-typeC {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.text > .text-section > .row-typeC > .div1 { grid-area: 1 / 1 / 2 / 2; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeC > .div2 { grid-area: 1 / 2 / 2 / 4; font-size: 1rem; align-self: end;}
.text > .text-section > .row-typeC > .div3 { grid-area: 2 / 2 / 3 / 4; }

.text-section > .roll-typeD {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto, auto;
}
.roll-typeD > .div1 { grid-area: 1 / 1 / 2 / 2; font-size: 0.9rem; align-self: end;}
.roll-typeD > .div2 { grid-area: 1 / 2 / 2 / 3; font-size: 0.9rem; align-self: end;}
.roll-typeD > .div3 { grid-area: 1 / 3 / 2 / 4; font-size: 0.9rem; align-self: end;}
.roll-typeD > .div4 { grid-area: 1 / 4 / 2 / 5; font-size: 0.9rem; align-self: end;}
.roll-typeD > .div5 { grid-area: 2 / 2 / 3 / 5; }

@media only screen and (max-width: 800px) {
  body{
    overflow-y: scroll;
    font-size: 1.2rem;
  }
  ::-webkit-scrollbar {
      display:none;
  }
  .content{
    display: flex;
    flex-direction: column;
  }
  .imagebox{
    order:2;
    width:100%;
    height: auto;
  }
  .imagebox-collage {
    flex-direction: column;
    height: auto;
  }
  .imagebox-collage > div{
    width: 100%;
  }

  .text {
    order:1;
    width:100%;
    height: auto;
  }

}