/* FRAMEWORK */
.only-mobile {
  display: none !important;
}

:root, [color-theme="default"] {
  --work-teachu-image: url(assets/images/work/desktop-teachu-light.webp);
  --work-automation-image: url(assets/images/work/desktop-room-automation.webp);
  --work-other-image: url(assets/images/work/desktop-other-light.webp);
  --work-deployment-image: url(assets/images/work/desktop-controller-light.webp);
  --work-prayer-image: url(assets/images/work/mobile-prayer-light.webp);
  --work-budget-image: url(assets/images/work/desktop-budget-light.webp);
}

[color-theme="dark"] {
  --work-teachu-image: url(assets/images/work/desktop-teachu-dark.webp);
  --work-other-image: url(assets/images/work/desktop-other-dark.webp);
  --work-deployment-image: url(assets/images/work/desktop-controller-dark.webp);
  --work-budget-image: url(assets/images/work/desktop-budget-dark.webp);
}

h1 {
  font-size: 74px;
}

h2 {
  font-size: 54px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 32px;
}

p {
  font-size: 15px;
  line-height: 120%;
}

/* DESKTOP SPECIFIC CONTENT */
/* HOME */
main .home {
  display: flex;
  flex-flow: row nowrap;
  gap: 8vw;
}

.home-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.home img {
  width: clamp(500px, 35vw, 800px);
  height: auto;

  object-fit: contain;
  object-position: bottom;
}

.striped-text {
  background-position: -10px 3.8rem;
}

/* WORK */
#work {
  height: 100vh;
}

.work-items {
  position: relative;
  width: 80vw;
  height: 70vh;
  margin: 0 auto;
}

.work-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-color: color-mix(in srgb, var(--toned-gray) 25%, var(--michu-tech-background));
}

/* actually can't decide what looks better */
/*.work-item:first-of-type {*/
/*  background-color: transparent !important;*/
/*}*/

.work-item:not(:first-of-type) {
  --shadow-color: color-mix(in srgb, var(--michu-tech-background) 50%, transparent);
  box-shadow: 0 -6px 6px -5px var(--shadow-color);
}

.work-item .work-item-content {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  flex-grow: 1;

  width: 100%;
}

.work-item .work-item-content .image-container {
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}

.work-item .work-item-content .description p {
  text-align: center;
  max-width: min(80vw, 72%);
}

.work-item .work-item-footer {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1vh;
}

.tag {
  font-size: 14px;
}

.work-item .anchor {
  align-self: flex-end;
  font-size: 20px;
  letter-spacing: 1px;

  transition: scale 200ms ease-out;
}

.work-item:hover .anchor {
  scale: 1.1;
}

.link-icon {
  width: 24px;
  height: 24px;

  background-attachment: fixed;
}

#workOtherGithubAnchor {
  font-size: 22px;
}

/* banner and footer */
.overlay-text {
  font-size: 36px;
  line-height: 36px;
}

.banner-container {
  width: 100%;
  height: 100px;
}

.banner-container .banner {
  width: 100%;
  min-height: 425px; /*if smaller, then will look shit*/

  background-position-x: -70px;
  left: 0;
  top: -120px;
}

.contact-controls .contact-control {
  font-size: 15px;
}