@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 100vh;
  align-items: center;
  padding: 5vw;
  overflow: hidden;
}
@supports (height: 100svh) {
  section {
    height: 100svh;
  }
}
section .example {
  display: flex;
  align-items: flex-start;
  max-width: 300px;
  flex-grow: 1;
  margin: 0 auto;
}
section .example.center {
  display: flex;
  justify-content: center;
  width: 100%;
}
section .example.mobpos {
  height: 100%;
}
@media screen and (min-width: 768px) {
  section .example.mobpos {
    height: unset;
    position: initial;
    margin-top: unset;
  }
}
section .example.hidemob {
  display: none;
}
@media screen and (min-width: 768px) {
  section .example.hidemob {
    display: block;
  }
}
section .example.desktop {
  display: block;
}
@media screen and (min-width: 768px) {
  section .example.desktop {
    display: none;
  }
}
section .example img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
section h2 {
  position: relative;
  width: fit-content;
  font-family: "Share Tech Mono";
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.5em;
}
section h2::after {
  content: "Case Study";
  font-size: 14px;
  position: absolute;
  top: -1.6rem;
  right: 0;
}
section p {
  font-family: "Source Code Pro";
  line-height: 1.3em;
  font-size: 13.5px;
  margin-top: 0.5rem;
}
section p + p {
  margin-top: 1em;
}
section .company-logo {
  width: 65px;
  height: auto;
}
section a {
  display: block;
  position: relative;
  width: fit-content;
  color: rgb(229, 244, 226);
  font-family: "Source Code Pro";
  text-transform: lowercase;
  text-decoration: none;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px dashed hsl(74, 75%, 76%);
  margin-top: 0.75em;
  overflow: hidden;
  transition: color 0.02s ease;
}
section a::before {
  content: "";
  position: absolute;
  background-color: hsl(74, 75%, 76%);
  width: 100%;
  height: 100%;
  top: 0;
  transform: translateX(-101%);
  transition: transform 0.085s ease-in-out;
  z-index: -1;
}
section a:hover::before {
  transform: translateX(0%);
}
section a:hover {
  color: black;
  transition: color 0.12s ease;
}

.para {
  will-change: transform;
}

@media screen and (min-width: 768px) {
  section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: initial;
    height: 100vh;
    padding: 0 36px;
  }
  @supports (height: 100svh) {
    section {
      height: 100svh;
    }
  }
  section h2 {
    font-size: 36px;
    line-height: 1.25em;
  }
  section h2::after {
    font-size: 14px;
    position: absolute;
    top: -1.8rem;
    right: 0;
  }
  section .example {
    margin: 0;
    margin-left: auto;
  }
}
@media screen and (min-width: 992px) {
  section {
    width: 100%;
    padding: 0 10%;
  }
  section h2 {
    font-size: 36px;
  }
  section h2::after {
    font-size: 14px;
    top: -1.8rem;
  }
  section p {
    font-size: 14px;
  }
  section p + p {
    margin-top: 0.75em;
  }
  section .example {
    max-width: 300px;
    max-height: 350px;
    margin-left: auto;
  }
  section .example img {
    max-width: 300px;
    max-height: 350px;
  }
}
@media screen and (min-width: 1280px) {
  section {
    width: 100%;
    padding: 0 10%;
  }
  section p {
    font-size: 16px;
  }
  section h2 {
    font-size: 48px;
  }
  section h2::after {
    top: -2.2rem;
  }
  section .example {
    max-width: 400px;
    max-height: 450px;
    margin-left: auto;
  }
  section .example img {
    max-width: 400px;
    max-height: 450px;
  }
}
@media screen and (min-width: 1400px) {
  section {
    width: 100%;
    padding: 0 15%;
  }
}
.underline {
  display: inline-block;
  color: rgb(229, 244, 226);
  border-bottom: 2px dashed hsl(74, 75%, 76%);
  margin-top: 0.75em;
  padding-bottom: 0.35rem;
}

.css-1fldgxe, .css-11yieko, .css-9m2j3o, .css-owodrv, .css-1kvy7d8, .css-1tod4gq, .css-s1d193 {
  margin-top: 0;
}

.css-uffts8 {
  overscroll-behavior: contain;
}

.css-s1d193 {
  display: none;
}
@media screen and (min-width: 768px) {
  .css-s1d193 {
    display: block;
  }
}

.css-tid17k .css-s1d193 {
  display: block;
}

.css-12o3l3e {
  overscroll-behavior: contain;
  padding-top: 5vh;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 50vh;
  padding: 0 5vw;
  text-align: left;
}
footer > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
footer h3 {
  width: fit-content;
  font-family: "Share Tech Mono";
  text-transform: uppercase;
  color: rgb(229, 244, 226);
  font-size: 28px;
}
footer a {
  width: fit-content;
  color: rgb(229, 244, 226);
  font-family: "Source Code Pro";
  text-transform: lowercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px dashed hsl(74, 75%, 76%);
  margin-top: 0.75em;
}

@media screen and (min-width: 768px) {
  footer {
    padding: 0 36px;
  }
  footer h3 {
    font-size: 36px;
  }
  footer a {
    font-size: 18px;
  }
}
@media screen and (min-width: 992px) {
  footer {
    padding: 0 10%;
  }
}
@media screen and (min-width: 1280px) {
  footer {
    padding: 0 10%;
  }
  footer h3 {
    font-size: 48px;
  }
  footer a {
    font-size: 20px;
  }
}
@media screen and (min-width: 1400px) {
  footer {
    width: 100%;
    padding: 0 15%;
  }
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  cursor: crosshair;
  background: hsl(74, 75%, 0%);
}

#overflow {
  position: relative;
  overflow-x: hidden;
}

p {
  margin: 0;
}

#rain,
#display {
  width: 100%;
  height: 100vh;
  background-color: hsl(270, 22%, 10%);
  border: none;
  z-index: 0;
}

#display {
  position: relative;
}

#rain {
  position: absolute;
  left: 200vw;
}

#stats {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  font-family: "Source Code Pro";
  font-size: 14px;
  padding: 1rem;
  text-align: right;
}

main {
  position: relative;
  color: rgb(229, 244, 226);
  overflow: hidden;
}
main .title {
  position: sticky;
  top: 2rem;
  left: 2rem;
}

h1 {
  margin: 0;
}