@import url("./reset.css");
@import url("./general-sans.css");
@import url("./clash-grotesk.css");
@import url("./variables.css");
@import url("./layout.css");
@import url("./main-navigation.css");


html {
  color-scheme: light; /* todo - switch on dark mode */
  --canvas: light-dark(var(--light-tint), var(--dark-tint));
  --paint: light-dark(var(--dark-tint), var(--light-tint));
  --accent: light-dark(var(--accent-blue), var(--accent-green));
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background-color: var(--canvas);
  color: var(--paint);
  font-family: var(--sans-body);
  font-optical-sizing: auto;
  font-size: var(--base-font-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--base-line-height);
  min-height: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--sans-semi-bold);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: var(--header-line-height);
}


p {
  max-inline-size: var(--maxChars);
  margin-bottom: var(--step--2);
}

a {
  color: var(--accent);
}

.hidden {
  display: none !important;
}

.mono {
  font-family: var(--mono-font);
}

.rounded {
  border-radius: var(--step--2);
}

.header h1 {
  border-top: 4px solid var(--dark-tint);
  color: light-dark(var(--accent-red), var(--accent-green));
  font-size: var(--step--1);
  margin-block-end: var(--space-2xl);
  padding-block-start: 4px;
  text-transform: uppercase;
}

.header h2 {
  font-family: var(--sans-bold);
  font-size: var(--step-5);
  max-inline-size: 20ch;
}

.header p {
  margin-block-end: var(--space-3xl);
}

.main-content {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 62%;
}

section h2, footer h2 {
  color: light-dark(var(--accent-red), var(--accent-green));
  margin-block-end: var(--space-2xs);
}

.masthead {
  display: flex;
  justify-content: center;

}

.main-footer {
  margin-block-end: var(--space-3xl);
}

.skill-list li {
  color: var(--accent-blue);
  font-family: var(--mono-font);
  font-size: var(--step--1);
}

.svg-logo {
  filter: grayscale(1);
  height: 40px;
  width: 40px;
}

.mini {
  height: 24px;
  width: 24px;
}

.app-icon {
  border-radius: 8px;
  width: 40px;
}

.about-me {
  align-items: flex-start;
}

.me {
  height: 100px;
  width: 100px;
  margin-inline-end: var(--space-3xl);
}

.about-me figcaption {
  font-family: var(--mono-font);
  font-size: var(--step--2);
  font-weight: 400;
  margin-block-end: var(--space-m);
}

/* BRAND SVG'S */
.aviva-svg {
  height: 16px;
}
.bbc-svg {
  height: 18px;
}
.burberry-svg {
  height: 30px;
}
.disney-svg {
  height: 30px;
}
.lloyds-svg {
  height: 30px;
}
.mercedes-svg {
  height: 28px;
}
.microsoft-svg {
  height: 24px;
}
.natwest-svg {
  height: 28px;
}
.nokia-svg {
  height: 14px;
}
.panasonic-svg {
  height: 15px;
}
.playstation-svg {
  height: 28px;
}
.plymouth-university-svg {
  height: 20px;
}
.the-times-svg {
  height: 18px;
}
.the-times-the-sunday-times-svg {
  max-width: 360px; 
}
.ubs-svg {
  height: 20px;
}
.unilever-svg {
  height: 30px;
}
.zoe-svg {
  height: 14px;
}

.marquee {
  overflow: clip;
}

.marquee-track {
  display: flex;
  padding-left: 4.8rem;
  gap: 4.8rem;
  width: max-content;
  animation: marquee-animate 90s linear infinite reverse;
}

.fadeout-horizontal {
  mask-image: linear-gradient(
    to right,
    transparent,
    black var(--space-l, 2rem),
    black calc(100% - var(--space-l, 2rem)),
    transparent
  );
}

@keyframes marquee-animate {
  to {
    transform: translateX(-50%);
  }
}


.archive-marquee {
  max-width: 1800px;
  overflow: hidden;
  --speed: 400s;
  --item-width: 360px;
  --item-gap: 8px;
  --img-height: 202px;

  --single-slide-speed: calc(var(--speed) / var(--num-items));
  --item-width-plus-gap: calc(var(--item-width) + var(--item-gap));
  --track-width: calc(var(--item-width-plus-gap) * calc(var(--num-items) - 1));
}

@media screen and (min-width: 1000px) {
  .archive-marquee {
    --speed: 400s;
    --item-width: 660px;
    --item-gap: 8px;
    --img-height: 371px;
    --single-slide-speed: calc(var(--speed) / var(--num-items));
    --item-width-plus-gap: calc(var(--item-width) + var(--item-gap));
    --track-width: calc(var(--item-width-plus-gap) * calc(var(--num-items) - 1));
  }
}

.archive-marquee-track {
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--track-width) [track] 0px [resting];
  width: max-content;
}

.archive-marquee-track > div {
  width: var(--item-width);
  @-moz-document url-prefix() {
    width: calc(var(--track-width) * 1.04);
  }
  display: flex;
  grid-area: resting;
  animation: marquee-move var(--speed) linear infinite var(
      --direction,
      forwards
    );
  animation-delay: calc(var(--single-slide-speed) * var(--item-position) * -1);
}

.archive-marquee-track > div > img {
  height: var(--img-height);
}

@keyframes marquee-move {
  to {
    transform: translateX(calc(-100cqw - 100%));
  }
}

.line {
  background-color: var(--paint);
  height: 2px;
  margin-block-end: var(--space-m);
  transform: scaleX(0);
  width: 100%;
}

.hero {
  transform: scale(90%);
}

.code {
  background-color: var(--dark);
  color: var(--accent-green);
  font-family: var(--mono-font);
  font-size: var(--step--1);
  font-weight: 400;
  padding: var(--step--2);
}

.project-link {
  justify-self: flex-end;
  border-top: 1px solid var(--dark-tint);
  font-size: var(--step--2);
  margin-block-start: var(--step-0);
  padding-top: var(--space-2xs);
  text-decoration: none;
  text-transform: uppercase;
}

.project-link::after {
  content: " ↗";
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.copy-button-container {
  border: 1px solid light-dark(var(--dark-tint), var(--light-tint));
  border-radius:24px;
  padding: 8px;
}


.copy-svg {
  height: var(--step--1);
}

.copy-button {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--step--1);
}

.featured {
  margin-block-end: var(--space-m);
}