@font-face {
  font-family: OratorSTD;
  src: url("assets/OratorStd.otf") format("opentype");
  font-family: OratorSLNT;
  src: url("OratorStd-Slanted.otf") format("opentype");
}

body {
  font-family: OratorSTD, serif;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 48px;
  font-weight: normal;
  line-height: 0;
  margin: 0;
}
h2 {
  font-size: 24px;
  font-weight: normal;

}
h3 {
  font-size:18px;
  font-weight: normal;
}
p {
  font-size:18px;
}
a {
  font-size:18px;
  color: blue;
  text-decoration: none;
}

.header {
  position: fixed;
  top: 36px;
  z-index: 2;
}

.header h1 {
  position: fixed;
  left: 25vw;
  width: 300px;
  height: 125px;
  background-color: gold;
  border: 5px solid;
  border-color: gold;
  border-radius: 50%;
  text-align: center;
  color: powderblue;
}

.header a {
  width: 150px;
  height: 50px;
  border: 5px solid;
  border-radius: 100%;
  text-align: center;
}

.header h1 .title {
  padding: 70px 0;
}

.header .link {
  padding: 16px 0;
}

.header .link1 {
  position: fixed;
  left: 5vw;
  border-color: lightsteelblue;
}

.header .link2 {
  position: fixed;
  left: 60vw;
  border-color: mediumseagreen;
}

.header .link3 {
  position: fixed;
  left: 80vw;
  border-color: crimson;
}

/*
 {
  stroke: blue;
  stroke-width: 5px;
}
*/

.field1 {
  position: fixed;
  width: 322px;
  height: calc(100vh - 50px);
  left: 0;
  overflow: visible;
  background-color: oldlace;
  color: cyan;
}

@keyframes about {
  from {top:100vh;}
  to {top:-932.5px;}
}

.field1 p {
  position: absolute;
  padding: 0 36px;
  margin: 0;
  animation: about 20s linear infinite;
}

.field2 {
  position: fixed;
  width: calc(100vw - 322px);
  height: calc(100vh - 50px);
  right: 0;
  overflow: scroll;
  background-color: powderblue;
  color: Purple  ;
}
.footer {
  position: fixed;
  width: 100vw;
  height: 50px;
  bottom: 0;
  background-color: blueviolet;
  color: magenta;
  white-space: nowrap;
  overflow: visible;
}

@keyframes foot {
  from {left:100%;}
  to {left:-785px;}
}

.footer p {
  position: absolute;
  overflow: visible;
  animation: foot 30s linear infinite;
}

.field1_title {
  grid-area: field1_title; 
}
.field1_column1 {
  grid-area: field1_column1;
  padding: 0 9px 0 0;
}
.field1_column2 {
  grid-area: field1_column2; 
  padding: 0 0 0 9px;
}
.field1_grids {
  display: grid;
  grid-template-areas: 'field1_title field1_title' 'field1_column1 field1_column2';
  padding: 197px 36px 0 72px;
}

.field2_title {
  grid-area: field2_title;
  padding: 197px 72px 0 36px;
}
.field2_column1 {
  grid-area: field2_column1;
  padding: 0 9px 0 36px;
}
.field2_column2 {
  grid-area: field2_column2; 
  padding: 0 52.25px 0 9px;
}
.field2_column3 {
  grid-area: field2_column3; 
  padding: 122px 72px 0 52.25px;
}
.field2_grids {
  display: grid;
  grid-template-areas: '. . field2_column3' 'field2_title field2_title field2_column3' 'field2_column1 field2_column2 field2_column3';
}

.visIcon {
  height: 50px;
  width: 50px;
  background-color: yellow;
  border-radius: 50%;
  position: fixed;
  bottom: 29px;
  right: 36px;
  z-index: 2;
}

.visType {
  color: blue;
  font-size: 72px;
  text-align: center;
  padding:7px 0
}

.visType:hover {
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: blue; 
}
::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}