@import url('/reset.css');
@import url('/type.css');
@import url('/nav.css');
@import url('/home.css');
@import url('/projectCards.css');

:root {
  --primary-blue: 0, 177, 254;
  --link-color: 0, 116, 240;
  --primary-red: 255, 63, 0;
  /* --muted-mint: 104, 124, 132; */
  /* --muted-mint: 161, 175, 181; */
  --muted-mint: 173, 195, 202;
  --background-color: #141619;
  --figma-purple: 113, 35, 225; /* bit darker than the real figma purple (#8B3FF8) */
  
  --heading-color: 42, 42, 42;
  --copy-color: 68, 68, 68;
  --rule-color: 220, 226, 228;

  --border-radius: 8px;
  --rhythm-spacing: 32px; /* vertical spacing between most things */
  --nav-height-full: 80px;
  --nav-height-slim: 56px;
  --window-padding: 48px;
  --container-max-width: 1500px;

  --breakpoint-sm: 650px;
  --breakpoint-md: 800px;
  --breakpoint-lg: 1000px;
  --breakpoint-xl: 1200px;

  --shadow: 0px 4px 30px 0px rgba(5, 54, 112, 0.08);
}

body {
  /* Hacky, just during dev so I can turn it off
  and see breakpoints easily w bg color change */
  /* background-color:white !important; */
  background-color:var(--background-color) !important;
  color: rgb(var(--copy-color));
  font-family: 'Alegreya Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-width: 350px;
}

/* ========== UTILS ========== */

.round{
  border-radius: var(--border-radius);
  overflow: hidden;
}

.shadow {
  box-shadow: var(--shadow);
}

.red {
  color: rgb(var(--primary-red));
}

.mat {
  background-color: #ff00ff;
  padding: 0px;
}

.mat > img {
  background-color: aquamarine;
  padding: 0px;
}

/* ========== LAYOUT COMPONENTS ========== */

.page {
  width: 100%;
  padding-top: var(--nav-height-full);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Everything expects to be wrapped in a section */
section {
  background-color: white;
  display: flex;
  flex-direction: column;
  width: min(var(--container-max-width), 100%);
  align-items: center;
  padding: 0 24px;
  /* gap: 1em; */
}
section.clear {
  background: none
}

section.center{
  text-align: center;
}

/*
The section tag automatically limits the width
of its direct children to the default line width.
Elements using .escaped are exempt from the 
section width constraints, so they can take
up more of the page horizontally.
*/
.escaped {}

.card{
  /* border: 1px solid black */
  /* background: rgba(255, 0, 255, 0.1); */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card:not(.projectCard){
  padding-bottom: var(--rhythm-spacing);
}
.cardGroup, .asideGroup {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  box-sizing:content-box;align-self: center;
  max-width: 100%;
}

.asideGroup {
  align-items: center;
  max-width: 1100px;
}

/* This is on the children not the group so 
*  that the children space correctly when 
*  vertically stacked on mobile.
*
*  It's margin and not padding because padding
*  would break the rounding on the image child.
*/
.asideGroup > * {
  margin-bottom: var(--rhythm-spacing);
}
.asideText {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cardGroup.x2, .bigImg { max-width: 1100px;}
.bigImg {
  margin-bottom: var(--rhythm-spacing);
}

footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--rhythm-spacing);
  padding-bottom: 16px;
}

@media (max-width: 650px) {
  body {background-color: yellow;}
  section > *:not(.escaped){
    width: min(400px, 100%);
  }
  .cardGroup, .asideGroup {
    display: flex;
    flex-direction: column;
  }

  footer {
    padding-top:0;
    padding-bottom: 4px;
  }
}

@media (min-width: 650px) {
  body {background-color: orange;}
  
  section {padding: 0 32px}
  section > *:not(.escaped){
    width: min(450px, 100%);
  }
  
  .cardGroup, .asideGroup {
    gap: 32px;
  }

  .cardGroup.x2.reduced { width: 75%; max-width: 800px;}
  .cardGroup.x3.reduced { max-width: 1000px;}

  .cardGroup.x2 .card{
    grid-column: span 6;
  }
  .cardGroup.x3 .card{
    grid-column: 3 / 11;
  }
  .cardGroup.x4 .card{
    grid-column: span 6;
  }

  .asideGroup .mat {grid-column: span 7;}
  .asideGroup .asideText {grid-column: span 5;}
  
}

@media (min-width: 800px) {
  section {padding: 0 48px}
  section > *:not(.escaped){
    width: min(580px, 100%);
  }
  body {background-color: red;}
  
  .cardGroup.x2 .card{
    grid-column: span 6;
  }
  .cardGroup.x3 .card{
    grid-column: span 4;
  }
  .cardGroup.x4 .card{
    grid-column: span 6;
  }
  .asideGroup.reduced .mat {grid-column: 2/8; }
  .asideGroup.reduced .asideText {grid-column: 8/12;}
}

@media (min-width: 1000px) {
  
  body {background-color: brown;}
  .bigImg{
    padding: 16px 0;
  }
  .cardGroup, .asideGroup {
    gap: 48px;
    padding-bottom: 16px;
  }
  .card:not(.projectCard) {
    margin-bottom: 32px;
  }

  .cardGroup.x2 .card{
    grid-column: span 6;
  }
  
  .cardGroup.x3 .card{
    grid-column: span 4;
  }
  .cardGroup.x4 .card{
    grid-column: span 3;
  }
}