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

@font-face {
  font-family: "High Rise";
  src: url(highrise/HighriseFont-Condensed-Demo.otf) format("opentype");
}

body {
  background-color: #eeddbf;
}

.scroll-text {
  scroll-margin-top: 8rem;
}

#top {
  scroll-margin-top: 10rem;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

.rainbow-stripe {
  position: fixed;
  top: 0;
  left: 3rem;
  width: 8rem;
  min-height: 100%;

  background: linear-gradient(
    to right,
    #d92b1f 0%,
    #d92b1f 20%,

    #f05a0a 20%,
    #f05a0a 40%,

    #f3b51b 40%,
    #f3b51b 60%,

    #168b79 60%,
    #168b79 80%,

    #0c4743 80%,
    #0c4743 100%,

    transparent 87%
  );
}

.navbar {
  background-color: #eeddbf;
  border: 1px solid black;
  border-radius: 3rem;
  width: 90%;
}

.nav-container {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 2rem;
  z-index: 1000;
}

.nav-list-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.navbar-list-item {
  list-style: none;
}

.navbar-list-item:hover {
  transform: translateY(-0.2rem);
  transition: 0.3s;
}

#clock {
  color: #94876c;
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
  color: black;
  font-family: "Roboto", sans-serif;
}

.home-tab:hover {
  color: #d92b1f;
  transition: 0.3s;
}

.design-tab:hover {
  color: #f05a0a;
  transition: 0.3s;
}

.writing-tab:hover {
  color: #f3b51b;
  transition: 0.3s;
}

.about-tab:hover {
  color: #168b79;
  transition: 0.3s;
}

.email-tab:hover {
  color: #0c4743;
  transition: 0.3s;
}

.image-container {
  width: 2rem;
  height: 2rem;
}

img {
  width: 2rem;
  height: auto;
}

.logo-hover {
  display: none;
  transform: translateY(-2rem);
}

.image-container:hover .logo-base {
  opacity: 0;
  transition: .3s;
}

.image-container:hover .logo-hover {
  display:flex;
  opacity: 1;
  transition: .3s
}

.content {
  margin-left: 13rem;
}

.banner {
  margin-top: 8rem;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.banner-text {
  margin-top: 6rem;
}

h1 {
  font-family: "Moderniz";
  font-size: 8rem;
  padding: 0;
  margin: 0;
}

h2 {
  font-family: "High Rise";
  font-size: 5.5rem;
  font-weight: 200;
  padding: 0;
  margin-top: 2.5rem;
}

.nameline1 {
  display: flex;
  gap: 5rem;
  margin: 0;
  padding: 0;
}

.nameline2 {
  margin-top: -5rem;
}

.about-buttons {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 4rem;
  margin-top: 2rem;
  margin-bottom: 10rem;
}

.about-buttons-item {
  background-color: #e0bd7d;
  border-radius: 5rem;
  padding: 1rem 3rem 1rem 3rem;
}

.about-buttons-item:hover {
  background-color: #edcf98;
  transform: scale(1.1);
  transition: 0.3s;
}

.about-buttons-text {
  font-size: 1rem;
  font-weight: 200;
}

#design {
  scroll-margin-top: 6.4rem;
}

.titlecard1 {
  border: 3px solid black;
  width: 26%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.row1 {
  display: flex;
  justify-content: space-between;
  height: 30rem;
  margin: 5rem;
  padding-bottom: 3rem;
}

.row2 {
  display: flex;
  justify-content: space-between;
  height: 30rem;
  margin: 5rem;
  padding-bottom: 3rem;
}

h3 {
  font-family: "High Rise";
  font-weight: 200;
  font-size: 6rem;
  line-height: 90%;
  margin-top: 1rem;
  padding: 0;
  text-align: center;
}

.content-card1 {
  width: 71%;
  background-color: #d2bb93;
  height: 100%;
}

.content-card2 {
  width: 61%;
}

.content-card3 {
  width: 37%;
  background-color: #d2bb93;
  height: 100%;
}

.card-image-container {
  height: 30rem;
  overflow: hidden;
  padding-bottom: 1rem;
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.content-card1:hover {
  transform: scale(1.04);
  transition: .3s;
}

.content-card2:hover {
  transform: scale(1.04);
  transition: .3s;
}

.content-card3:hover {
  transform: scale(1.04);
  transition: .3s;
}

.titlecard2 {
  border: 3px solid black;
  margin: 5rem;
  width: 89%;
  margin: 8rem 5rem 2rem 5rem;
  display: flex;
  justify-content: center;
  height: 8rem;
}

.designcard {
  width: 20rem;
  height: 17rem;
  background-color: #d2bb93;
}

.designcard-image-container {
  width: 20rem;
  height: 17rem;
  overflow: hidden;
}

.designcard-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.row3 {
  display: flex;
  justify-content: space-between;
  height: 15rem;
  margin: 0 5rem;
  width: 89.2%;
}

.row4 {
  display: flex;
  justify-content: space-between;
  height: 20rem;
  margin: 4rem 5rem 5rem 5rem;
  width: 89.2%;
}

.block3 {
  display: flex;
  justify-content: space-between;
  margin: 0rem 5rem;
}

.writing-containers {
  width: 75%;
}

.titlecard3 {
  width: 20%;
  border: 3px solid black;
  height: 42rem;
  display: flex;
  justify-content: center;
}

.writing-card {
  border-top: 1.5px solid #e0bd7d;
  padding-bottom: 0.5rem;
}

.writing-header {
  font-family: "Roboto Mono", monospace;
}

h4 {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

.writing-card:hover {
  transition: 0.3s;
  background-color: #edcf98;
  color: #362c18;
}

h5 {
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 200;
  font-family: "Roboto Mono", monospace;
}

p {
  font-family: "Roboto", sans-serif;
}

.banner-content {
  margin: 5rem;
}

.placeholder-image {
  background-color: #d2bb93;
  width: 100%;
  height: 30rem;
  margin-bottom: 2rem;
}

.banner-description {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.banner-description-item {
  width: 25%;
}

h6 {
 font-family: "Roboto Condensed", sans-serif;
 font-weight: 200;
 font-size: 1.3rem;
 color: black;
 margin: 0;
 padding: 0;
}

.writing-subheader {
  font-size: 1rem;
  font-weight: bold;
  font-style:italic;
  padding-top: .3rem;
}

.card-header {
  font-weight: 500;
}

.written-content {
  margin: 2rem 5rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  margin-top: -2rem;
  gap: 5rem;
}

.directory {
  height: 14rem;
  position: sticky;
  top: 8rem;
}

.directory-list {
  width: 20%;
}

.directory-list-item {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  margin: 0.5rem 0;
  transition: 0.3s;
  list-style: none
}

.directory-list-item:hover {
  transform: translateX(.5rem);
  transition: .3s;
}

.red:hover {
  color:#d92b1f;
  transition: .3s;
}

.orange:hover {
  color:#f05a0a;
  transition: .3s;
}

.yellow:hover {
  color:#f3b51b;
  transition: .3s;
}

.teal:hover {
  color:#168b79;
  transition: .3s;
}

.dark-teal:hover {
  color:#0c4743;
  transition: .3s;
}

.card-subheaders {
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-size: 1rem;
  scroll-margin-top: 7rem;
}

.writing-block {
  margin-right: 5rem;
}

.embed-link {
  text-decoration:underline;
}

.embed-link:hover {
  color: #a87b2c;
}

.caption {
  font-size: 1.5rem;
}

.c2-photo1 {
  width: 70rem;
  height: auto;
}

.image-boundary-box {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: left;
}

.c2-photo2 {
  width: auto;
  height: 25rem;
  padding-right: 2rem;
}

.c1-photo1 {
  width: auto;
  height: 20rem;
  padding-right: 2rem;
}

.c1-photo2 {
  width: auto;
  height: 25rem;
  padding-right: 2rem;
}

.c1-photo3 {
  width: auto;
  height: 26.5rem;
  padding-right: 2rem;
}

.c3-photo1 {
  width: auto;
  height: 28rem;
}

.image-captions {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: left;
  gap: 4rem;
}

.writing-container {
  display: flex;
  justify-content: space-between;
  margin: 0 3rem;
}

.writing-content {
margin-right: 5rem;
width: 65%;
}

.writing-info-container {
  border: solid black 1px;
  padding: 1rem 2rem;
  width: 35%;
  height: 100%;
  position: sticky;
  top: 11rem;
  background-color: #eeddbf;
}

.logline {
font-weight: bolder;
font-family: "Roboto Mono", monospace
}

.spoiler-text {
  background-color: black;
}

.spoiler-text:hover {
  background-color: transparent;
  transition: .15s;
}

ol li {
  font-family: "roboto", sans-serif;
}

ul li {
  font-family: "roboto", sans-serif;
}

.images-container img {
  height: 20rem;
  width: auto;
  margin-right: 2rem;
}

.photo-caption {
  font-size: .8rem;
  margin-bottom: 1.5rem;
}

.writing-content-header {
  font-size: 1.4rem;
}

.banner-image-container {
  width: 100%;
  height: 30rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.banner-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-boundary {
  display: flex;
  justify-content: center;
}

.photo-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 3rem;
  margin-top: 5rem;
}

.about-photo-container {
  height: 20rem;
  width: 15rem;
  border-radius: 4rem;
  overflow: hidden;
}

.about-photos {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-photo-container:hover {
  transform: scale(1.05);
  transition: .3s;
}

.about-content-columns {
  display: flex;
  justify-content: center;
  margin: 5rem 9rem;
  gap: 3rem;
}

.left-column {
  width: 50%;
}

.right-column {
  width: 30%;
}

.about-skills-container {
  display: flex;
  justify-content: left;
  gap: 2rem;
}

.list-column li {
  font-family: "roboto", sans-serif;
  width: 100%;
}

.footer {
  padding: 3rem 2rem;
}

.social-links {
  margin-top: .5rem;
}

.social:hover {
  color: #a87b2c;
  transform: scale(1.05);
  transition: .3s;
}

.list-column3 {
  margin-left: 1rem;
  font-family: "roboto", sans-serif;
}

.list-column2 {
  width: 100%;
  font-family: "roboto", sans-serif;
}

.other-adventures-block {
  margin: 5rem;
}

.other-adventures {
  margin-left: 11rem;
}