@font-face {
  font-family: "ProdigySans";
  src: url('../fonts/ProdigySans-Regular.ttf');
}
body {
  font-family: "ProdigySans", sans-serif;
  color: rgba(0, 0, 12, 0.88);
  background-color: rgba(232,174,117,.1);
  overflow: hidden;
}
svg {
  stroke-linejoin: round;
  stroke-linecap: round;
}
a {
    color: transparent;
    background: linear-gradient(90deg, #4b5, #606060);
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip:text;
    border-bottom: 1px #888 solid;
}
a:hover {
    transition: 1s;
    font-size: 110%;
    border-bottom: 5px #888 solid;
}
.brand {
  font-size: 6vh;
  place-items: flex-start;
  align-items: center;
  padding: 3vh;
  font-weight: 900;
}
.brand > div {
  color: transparent;
  /* animation-name: smoothscroll; */
  /* animation-iteration-count: infinite; */
  /* animation-duration: 8s; */
  background: linear-gradient(0deg, #4ab555, #e8ae75);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip:text;
}
.vertical {
  writing-mode: vertical-lr;
  text-orientation: upright;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template:
        "a a ." 4vw
        ". . ." .8em
        ". b b" 4vw / 65vh 5vh 30vh;
}
.horizontal {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template:
        'a . .' 7vh
        'a . b' 0vh
        '. . b' 8vh / 60vw 0vw 25vw;
}
.logo img {
    position: fixed;
    top: 2vh;
    right: 2vw;
    width: 9vw;
    opacity: .7;
}
.name_one {
  grid-area: a;
}
.horizontal .name_one {
  place-items: right;
}
.name_two {
  grid-area: b;
}
.intro_txt {
  position: fixed;
  top: 30vh;
  right: 11vw;
  width: 70vw;
  height: 15vh;
  font-size: 3.5vh;
  color: #899;
  text-align: right;
}
.intro_text > div {
    padding: .5em;
}
.main_content {
  position: fixed;
  color: #899;
  top: 42vh;
  text-align: right;
  right: 4.5vw;
  height: 58vh;
  width: 70vw;
  overflow-y: auto;
  font-size: 2.3vh;
}
.main_content > div {
  transition: .5s ease;
  color: transparent;
  /* background: linear-gradient(45deg, #4ab555, #e8ae75); */
  background: linear-gradient(45deg, #4ab555, #808080);
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  margin-top: 2vh;
  margin-right: 2vw;
}
.main_content > div:hover {
  /* background: linear-gradient(90deg, #4ab555, #222); */
  /* color: transparent; */
  /* background-size: 100% 100%; */
  /* background-clip: text; */
  /* -webkit-background-clip: text; */
  font-size: 2.45vh;
}
@keyframes smoothscroll {
  0%{background-position:50% 100%}
  50%{background-position:50% 0%}
  100%{background-position:50% 100%}
}