h1, h2, h3 {
   font-weight: normal;
   color: var(--color-white);
   font-family: "Crimson", serif;
}

h1 {
   font-size: 60px;
   font-family: "Against", serif;
}

h2 {
   font-size: 22px;
}

h3 {
   font-size: 24px;
}

p {
   font-family: "Crimson", serif;
   color: var(--color-white-2);
   font-size: 18px;
   margin: 0;
}

body {
   background-color: var(--color-black);
}

.disabled {
   display: none;
}

.site {
   margin: auto;
   max-width: var(--page-width);
   padding: 0 30px 30px 30px
}

.header {
   display: flex;
   gap: 30px;
}

.header a {
   color: var(--color-white);
   font-size: 20px;
   cursor: pointer;
   text-decoration: none;
}

.header a:hover {
   text-decoration: underline;
}

.project.splash {
   width: 100%;
   height: 1200px;
   margin-top: 100px;
}
.project.splash .description {
   text-align: left;
   height: auto !important;
   max-width: max(500px, 50%);
}
.project.splash h1 {
   font-size: 80px;
   transform: translate(-50%, 60%);
   bottom: 0%;
}
.project.splash .info > * {
   padding: 0;
}
.project.splash {
   flex-direction: column;
}
.project.splash .visual {
   flex: 4;
}
.project.splash .play-hint {
   bottom: 15% !important;
}
.project.splash .play-hint img {
   opacity: 0.8;
}
.project.splash .visual {
   flex: 3;
}


.project.mobile {
   height: 800px;
   justify-content: center;
   align-items: flex-start;
}

.project.mobile .visual {
   flex: 1.3;
   max-width: 500px;
   width: 100%;
}

.project.mobile .info {
   max-width: 400px;
   width: 100%;
   padding-top: 125px;
}

.project:not(.splash) .info {
   padding-top: 75px;
}
.project:not(.splash) .info img {
   transform: rotate(-90deg);
}
.project .info > * {
   padding-left: 30px;
   padding-right: 30px;
}

.project .info .description {
   padding-top: 12px;
   height: 350px;
   white-space: pre-line;

   transition: 100ms opacity;
}

.project .info .description.covered {
   opacity: 0;
}

.project {
   width: 100%;
   height: 450px;
   margin: auto;

   margin-bottom: 150px;

   display: flex;
   flex-direction: row;
   gap: 60px;
}

.project img:hover {
   
}

.project .visual {
   position: relative;
   height: 100%;
   flex: 2;
}

.project .visual .play-hint {
   bottom: 0%;
   left: 50%;
   transform: translate(-50%, 100%);
   width: 128px;
   height: 50px;

   display: flex;
   justify-content: center;
   align-items: center;

   opacity: 0;
   transition: opacity 100ms;
}

.project .visual .play-hint > * {
   flex: 1;
   height: 100%;

   padding: none;

   border: none;

   color: var(--color-white-transparent);
   background: transparent;
   font-family: "Crimson", serif;
   font-size: 22px;

   cursor: pointer;

   display: flex;
   justify-content: center;
   align-items: center;

   opacity: 0.5;
}

.project .visual .play-hint > *:hover {
   opacity: 1;
}

.project .visual .play-hint .previous {
   justify-content: flex-start;
}

.project .visual .play-hint .next {
   justify-content: flex-end;
}

.project .visual img:hover + .play-hint {
   opacity: 1;
}

.play-hint img {
   max-width: 22px;
   max-height: 22px;
   filter: invert(1);
}

.project.mobile .visual .play-hint .previous {
}
.project.mobile .visual .play-hint .next {
}

.project .visual .play-hint .watch {
}

.project .visual .play-hint:hover {
   opacity: 1;
}


.project .info img.flipped {
   transform: rotate(-270deg);
}


.project .visual .play-hint a div {
   display: flex;
   justify-content: center;
   align-items: center;
}

.project .visual .play-hint a {
   text-decoration: none;
}

.project .info {
   flex: 1;
   text-align: center;

   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.project .info h2 {
   margin: 0;
}

.project .info .date {
   margin: 10px 0 40px 0;
   font-style: italic;
}

.project .info .tagline {
   padding-bottom: 10px;
}

.project .info img {
   filter: invert(1);
   opacity: 0.5;
   width: 24px;
   height: 24px;
   transform: rotate(-90deg);
   align-self: center;

   transition: 300ms transform;
}

.project .info img:hover {
   opacity: 0.75;
}

.project .visual > * {
   position: absolute;
}

.project .visual a {
   width: 100%;
   height: 100%;
}

.project img {
   width: 100%;
   height: 100%;
   object-fit: cover;

   cursor: pointer;
}

.project h1 {
   margin: 0;
   left: 50%;
   text-align: center;
   white-space: nowrap;
   text-transform: uppercase;
}

.project.left h1 {
   left: 0%;
   text-align: left;
   transform: translate(20%, -60%);
}

.project.left .info {
   text-align: left;
   align-items: flex-start;
}

.project.right h1 {
   left: auto;
   right: 0%;
   transform: translate(-20%, -60%);
   text-align: right;
}

.project.right .info {
   text-align: right;
   align-items: flex-end;
}

.project.left.mobile h1 {
   transform: translate(10%, -60%);
}

.project.right.mobile h1 {
   transform: translate(-10%, -60%);
}

.project.left.mobile.extra h1 {
   transform: translate(25%, -60%);
}

.project.right.mobile.extra h1 {
   transform: translate(-25%, -60%);
}

.project.right {
   margin-left: auto;
   flex-direction: row-reverse;
}

.header {
   display: flex;
   flex-direction: row;
   gap: 30px;

   text-align: center;
}

.header * {
   cursor: pointer;
}

.header *:hover,
.header *.selected {
   text-decoration: underline;
}
/* about page */
.about {
   max-width: 650px;
   margin: auto;
}

.about .visual {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   
   height: fit-content;
   margin-bottom: 50px;
   margin-top: 50px;
}

.about .visual * {
}

.about .visual img {
   max-width: 100%;
   object-fit: cover;
}

.about .visual h1 {
}


/* full mobile */
@media only screen and (max-width: 750px) {
   .project.splash h1 {
      font-size: min(12vw, 64px);
   }

   .project h1 {
      font-size: min(10vw, 54px);
   }

   .project {
      flex-direction: column !important;
      align-items: center !important;
   }

   .project.splash {
      height: 900px !important;
      margin-top: 30px !important;
   }

   .project .visual {
      width: 100% !important;
      height: 450px !important;
   }

   .project.mobile {
      height: 1300px !important;
   }

   .project:not(.mobile) {
      height: 1000px !important;
   }

   .project.mobile .visual {
      flex: 3;
      max-width: 450px;
   }

   .project .visual .play-hint {
      width: 225px;
      opacity: 1;
   }

   .project .visual .play-hint a {
      flex: 1;
   }

   .project .visual .play-hint .previous {
      padding-left: 20px;
   }
   .project .visual .play-hint .next {
      padding-right: 20px;
   }

   .project.left h1,
   .project.right h1 {
      text-align: center;
      transform: translate(-50%, -70%) !important;
      left: 50% !important;
      right: auto !important;
   }

   .project.right .info {
      align-items: flex-start;
      text-align: left;
      max-width: 400px;
   }
/*
   .project .info img {
      align-self: center;
      margin-right: 0 !important;
      margin-left: 0 !important;
      transform: rotate(-90deg);
   }*/
}