* {
  padding: 0;
      -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-size-adjust: 100%;
}

@font-face {
  font-family: "Courier Sans Bold";
  src: url("/assets/fonts/CourierSansLL-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Sans Mono";
  src: url("/assets/fonts/CourierSansMonoLL-Regular.woff2") format("woff2");
}



@font-face {
  font-family: "Courier Sans";
  src: url("/assets/fonts/CourierSansLL-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "HAL Magic";
  src: url("/assets/fonts/HALMagicHighUnlicensed-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "HAL Timezone";
  src: url("/assets/fonts/HALTimezone-Regular.woff") format("woff");
}

@font-face {
  font-family: "Herbik";
  src: url("/assets/fonts/HerbikUnlicencedTrial-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Turnery";
  src: url("/assets/fonts/Turnery-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Cassette";
  src: url("/assets/fonts/Cassette-A-Regular.woff2") format("woff2");
}


@font-face {
  font-family: "SF Text";
  src: url("/assets/fonts/SF-Pro-Text-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "SF Text Bold";
  src: url("/assets/fonts/SF-Pro-Text-Semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Carp";
  src: url("/assets/fonts/Carp-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Marr Sans Condensed";
  src: url("/assets/fonts/MarrSansCond-Semibold.woff") format("woff"),
       url("/assets/fonts/MarrSansCond-Semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Arizona Sans Bold";
  src: url("/assets/fonts/ABCArizonaSans-Bold.woff") format("woff"),
       url("/assets/fonts/ABCArizonaSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Arizona Text Regular";
  src: url("/assets/fonts/ABCArizonaText-Regular.woff") format("woff"),
       url("/assets/fonts/ABCArizonaText-Regular.woff2") format("woff2");
}

:root {
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #e4e4e5;;
  --color-light: #efefef;
 
  --color-code-light-grey:  #9e9e9e;
  
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #ff8200;
  --color-code-yellow:      #faff66;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #008aff;
  --color-code-purple:      rgb(122 68 255);
  
  --font-size-large: 16px;
  --font-size-medium: 14px;
  --font-size-small: 13px;
  --line-height:23px;

  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);
  --color-code-comment:    var(--color-code-orange);

  --font-family-logo: "Courier Sans Bold";
  --font-family-sans-bold: "Courier Sans Bold";
  --font-family-text-regular: "Courier Sans";
  --font-family-mono: "Courier Sans Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

html {
  color: var(--color-text);
  background: var(--color-background);
}
img {
  width: 100%;
}
body {
  /* padding: var(--padding); */
  /* max-width: 100rem; */
  margin: 0 auto;
  /* padding: 0 300px; */
}

/* width */
.intro::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.intro::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.intro::-webkit-scrollbar-thumb {
  background: var(--color-code-blue);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-code-blue);
}

/* Handle on hover */
.main::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.main{
 /* max-width: 100%; */
 /* margin-top:50px;
 padding-top:40px;
 padding-left:5vw;
 margin-left: 35vw;
 margin-right:5vw; */
}


.intro{
  position: fixed;
  width: 27vw;
  height: 95vh;
  top: 0px;
  left: 0px;
  margin-bottom: 70px;
  padding-top: 70px;
  padding-left: 30px;
  padding-right: 15px;
  /* padding-bottom: 150px; */
  font-family: var(--font-family-text-regular);
    font-size:var(--font-size-medium);
    line-height: var(--line-height);
   
  overflow-x: scroll;
  /* border-right:2px solid black; */
  /* background: var(--color-code-yellow) */
}


.class-description, .policies, .crit-policies, .section, .section2{
      max-width: 80rem;
    margin-top: 15px;
    padding-top: 58px;
    /* padding-left: 5vw; */
    margin-left: 32vw;
    margin-right: 2vw;
}

 .crit-policies {
   padding-top: 38px;
   border-top: 2px solid var(--color-code-light-grey);
 }

li {
  list-style: none;
}
a {
  color: var(--color-code-black);
  text-decoration: none;
}

a:hover {
 color: var(--color-code-comment);
 /* animation: logoshake .2s cubic-bezier(.1,.6,.4,1) infinite; */
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: normal;
  font-family: var(--font-family-sans-bold);
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}

.project-title-link{
    width: fit-content;
    color: var(--color-code-blue);
    border: 2px solid var(--color-code-blue);
    padding: 2px 10px;
    }

.project-title-link:hover {
    color:var(--color-code-comment);
    border: 2px solid var(--color-code-comment);
    } 

#projects {

    /* background: var(--color-white); */
    border-radius: 20px;
    margin-top: 30px;
}

#intro-columns{
  columns: 2;
  column-gap: 40px;
}

#projects-title {
  color:var(--color-code-blue);
  font-family: var(--font-family-logo);
}


.project-name {
  color:var(--color-code-blue);
  font-family: "HAL Magic";
}


.opening-archives img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:70%;
  border-radius:20px;
}

.opening-manifesto img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:70%;
  border-radius:20px;
}

figure {
  margin:10px;
}

.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}

.header {
  position: fixed;
  width: 100%;
  height:50px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-logo);
  /* border-bottom: 2px solid black; */
  background:var(--color-code-blue);
  color:white;
  top:0px;
  padding:0 2rem;
  z-index:4;
  margin-bottom:200px;

}

.logo {
font-size:var(--font-size-large);
font-family: var(--font-family-logo);
  padding: 1rem;
  padding-left:0rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  /* color:var(--color-code-purple); */
 
}

@keyframes logoshake{
0%, 100% {
  -webkit-transform: rotate(2.5deg) translate3d(0, 0, 0);
  transform: rotate(2.5deg) translate3d(0, 0, 0);
}
25% {
  -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  transform: rotate(0deg) translate3d(0, 0, 0);
}
50% {
  -webkit-transform: rotate(-2.5deg) translate3d(0, 0, 0);
  transform: rotate(-2.5deg)translate3d(0, 0, 0);
}
75% {
  -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  transform: rotate(0deg) translate3d(0, 0, 0);
}
}

.menu {
  display: flex;
  margin-top: 0rem;
  padding-right:4rem;
}

.menu a {
  padding: .8rem 1.2rem;
  height: fit-content;
  font-size:var(--font-size-large);
  display: block;
}

.menu a[aria-current] {
  text-decoration: var(--color-code-white);
}

.social {
    display: flex;
    color: black;
    padding: 19px 0rem;
}

.social a {
      padding: 0rem 0rem;
    margin-top: -5.4px;
}

.section {
  padding: 0rem 0;
}

.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}

.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

h4 {
  font-family: var(--font-family-logo);
 font-size:var(--font-size-medium);
  /* color:var(--color-code-purple); */
  margin-bottom:0px;
}



.text {
  line-height: 1.5;
  padding-right:.5rem;
}


.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: 0rem;
}
.text p,
.text ul,
.text ol {
  font-family: var(--font-family-text-regular);
  margin-bottom: 1rem;
       font-size:var(--font-size-medium);
    line-height: var(--line-height);
}
.text ul,
.text ol {
  margin-left: .4rem;
  padding-right:1rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  position: relative;
  list-style: none;
    padding-left: 10px;
    padding-bottom: 10px;
}

.text ol > li {
  padding-bottom:10px;
  padding-left:10px
}

li::before {
  content: '►';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

li li::before {
  content: '▷';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.h1 {
  position:relative;
  font-family: var(--font-family-sans-bold);
  font-size:var(--font-size-medium);
  margin-bottom: 1.3rem;
  line-height: 1.25em;
}



.text h2,
.h2 {
  font-family: var(--font-family-sans-bold);
  font-size:var(--font-size-medium);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.text h3,
.h3 {
  font-weight: 600;
  font-family: var(--font-family-sans-bold);
 font-size:var(--font-size-medium);
}

table {
  border-collapse: collapse;
  padding: 8px;
  width: 100%;
}

td, th {
  font-size: var(--font-size-small);
  border: 2px solid #ddd;
  padding: 8px;
  font-family: var(--font-family-text-regular);
}

tr:nth-child(even){background-color: #f2f2f2;}


th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #ddd;
  font-family:var(--font-family-sans-bold);
  color: black;
}

.grades-intro{
  padding-top:36px;
}

#grades{
  margin-top:20px;
}

#grades p{
  margin:5px;
}


.accordion-toggle{
  background: var(--color-code-light-grey);
  color:black;
  /* width:70%; */
  padding: 12px;
  margin: 10px auto;
}

.accordion-toggle:hover {
  opacity:.5;
  cursor: pointer
}

.accordion-content {
	display: none;
  overflow: auto;
  width:70%;
  margin: auto !important;
  padding:.5rem;
  padding-left: 4rem;
}
 
.accordion-content, .headline p{
  font-family: var(--font-family-sans-bold);
  font-size:var(--font-size-medium);
  margin: -30px;
}


.reading-toggle{
    color: var(--color-code-blue);
    width: fit-content;
    padding: 5px 11px;
    margin: 0px;
    border-radius: 70px;
    border: 2px solid var(--color-code-blue);
}

.reading-toggle:hover {
  opacity:.5;
  cursor: pointer
}

.reading-content {
	display: block;
  overflow: auto;
  width:90%;
}
 
.reading-content p {
  font-family: var(--font-family-sans-bold);
  font-size:1rem;
  margin: -30px;
}

.reading-content li {
  margin-left: -10px;
}

.reading-content li::before {
  content: '';
  position: absolute;
  font-size: 10px;
  color:black
}

.reading-content li li {
  margin-left: 10px;
  color:black
}

.reading-content li li::before {
  content: '▶︎';
  position: absolute;
  left: -10px;
  font-size: 10px;
  color:black
}

.reading-content li li:last-child {
  margin-bottom:10px;
}

.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}
.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 3rem 0;
}
.text figcaption {
  padding-top: .75rem;
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.align-center {
  text-align: center;
}


.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  /* background: var(--color-black); */
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:fill;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  font-family: var(--font-family-mono);
  font-size:.7rem;
  padding-top: .75rem;
  padding-bottom:.25rem;
  line-height: 1.5em;
}

.project-name{
  font-family: var(--font-family-logo);
font-size:var(--font-size-medium);
  padding-top: .75rem;
  padding-bottom:.24rem;
  line-height: 1.5em;
}


.project-title {
     font-family: var(--font-family-logo);
    font-size: var(--font-size-medium);
    padding-top: 1.4rem;
    line-height: 2em;
    text-align: center;
}

.project-list{
  width:100%;
}
.project-components{
    padding: 1.5rem;
    padding-left: 2.5rem;
    background: var(--color-grey);
    border-radius: 20px;
    margin-left: 50px;
}

.project1-components{
  padding: 1.5rem;
  background: var(--color-grey);
  border-radius: 20px;
  margin-left: 45px;
}

.project1-components li::before {
  content: '';
  position: absolute;
  left: -10px;
  font-size: 10px;
  color:black
}

.project1-components li li{
  margin-left:10px;
  color:black
}

.project1-components li li:first-child{
  margin-top:10px;
}

.project1-components li li li::before {
  content: '▶︎';
  position: absolute;
  left: -10px;
  font-size: 10px;
  color:black
}



.project2-components{
  padding: 1.5rem;
  padding-left: 1.5rem;
  background: var(--color-grey);
  border-radius: 20px;
  margin-left: 50px;
}

.project2-components ul{
padding-right:.5rem !important;
}

.project2-components li::before {
  content: '';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

#responsibility li::before {
  content: '';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

#responsibility li{
  margin-bottom:10px
}

.policies {
  background:#f2f2f2;
  padding:20px;
  border-radius: 20px;
}

.project3-components{
  padding: 1.5rem;
  padding-left: 1.5rem;
  background: var(--color-grey);
  border-radius: 20px;
  margin-left: 50px;
}

.project3-components ul{
padding-right:.5rem !important;
}

.project3-components li:first-child{
  margin-bottom:.5rem !important;
  }
  

.project3-components li::before {
  content: '';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

.project3-components li li:first-child {
  margin-bottom:0rem !important;
}

.project3-components li li::before {
  content: '—';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color:black
}

.project-components ol{
  margin-bottom:0px !important
}

.section{
  border-top: 0px solid;
  padding-top: 0px;
}

.section2{
  border-top: 2px solid var(--color-code-light-grey);
  padding-top: 30px;
}

.assignments{
   border-top: 2px solid;
   padding-top: 30px;;
}

.assignments h3{
  font-family: var(--font-family-logo);
  font-size: 2rem ;
}

.footer {
     padding: 0rem 4rem 4rem;
    font-family: var(--font-family-sans-bold);
    color: var(--color-code-blue);
    font-size: var(--font-size-small);
     line-height: var(--line-height);
  
}
.footer:before {
  content: "";
  display: block;
  width: 5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}

.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
  color: silver;
}

.footer p {
    font-size: var(--font-size-small);
     line-height: var(--line-height);
    max-width: 15rem;
   
}

.footer a:hover {
  color: var(--color-code-orange);
}


.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 1rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}

.mobile-menu {
  display: none;
}


@media only screen and (max-width: 992px) {

  .intro *:not(:last-child) {
    margin-bottom: 2em;
}
  

  .menu {
    display: none;
  }

  .table{
    display: none;
  }

  .margin-xl {
    margin-bottom: 0rem;
}

  .mobile-menu {
    display:inline-block;
  }
  
  
  #nav-icon {
    top: 14px;
    right: 8px;
    width: 50px;
    height: 50px;
    /* top:2px;
    right: 0rem; */
    position: absolute;
    -webkit-transform: rotate(
  0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(
  0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }
  
.text figure {
  margin:0px;
}
  
  #nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 80%;
    background: var(--color-white);
    opacity: 1;
    left: 0;
    border-radius: 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(
  0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(
  0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
    
  #nav-icon span:nth-child(1) {
    top: 0px;
  }
  
   #nav-icon span:nth-child(2) {
    top: 8px;
  }
  
   #nav-icon span:nth-child(3) {
    top: 16px;
  }
  
  #nav-icon.open-icon span:nth-child(1) {
    -webkit-transform: rotate(
  45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(
  45deg);
    top: -6px;
    left: 6px;
  }
  
  #nav-icon.open-icon span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
  
  #nav-icon.open-icon span:nth-child(3) {
    -webkit-transform: rotate(
  -45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(
  -45deg);
  top: 22px;
     left: 6px;
  }

  #about{
   display: none;
   }
 
   #about.open{
     display:block;
   font-size:var(--font-size-large);
   }

   .about-text{
    position: absolute;
    display: block;
    left: 14px;
    top: 50px;
    margin: 0px;
   }
  
.header {
    height: 30px;
    padding:0px;
    padding-bottom: 16px;
    justify-content: space-evenly;
    /* margin-right: -.5rem; */
    /* margin-left: -.5rem; */
    /* margin-bottom: 1rem; */
    font-family: var(--font-family-logo);
    /* border-bottom: 2px solid black; */
    align-items: center;
}

 .logo{
    position: fixed;
    top: 1px;
    left: 13px;
    font-size:var(--font-size-large);
    /* padding: 39px; */
    padding-top: 10px;
    display: block;
    align-items: center;
    cursor: pointer;
   }

.open-menu{
    height: 150px;
    /* transition: 0.3s ease-in-out; */
  }



.intro{
    position: relative;
    width: 93%;
    height: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
    padding-top: 30px;
    padding-left: 2vw;
    padding-right: 2vw;
    /* padding-bottom: 150px; */
    font-family: var(--font-family-text-regular);
    font-size: 1.3rem;
    line-height: 1.3;
    overflow: hidden;
  /* border-right:2px solid black; */
  /* background: var(--color-code-yellow) */
}


.class-description, .policies, .crit-policies,.section, .section2{
max-width: 100rem;
    margin-top: 0px;
    padding-top: 24px;
    /* padding-left: 5vw; */
    margin-left: 4vw;
    margin-right: 1vw;
}

  img{
    aspect-ratio: 11/9 !important;
  }

  #projects{
    margin-top: -12px;
    margin-left: 0px;
  }

  .project1-components {
    padding:.75rem;
  }

  .project1-components ul{
    margin-left: 0rem;
    padding-top: .5rem;
    padding-right: 0rem;
  }

  .policies{
    margin-top: -30px;
  }

  li::before {
    content: '►';
    position: absolute;
    left: -8px;
    font-size: 10px;
    color: black;
}

.about-text li::before {
  content: '';
  position: absolute;
  left: -8px;
  font-size: 10px;
  color: black;
}

h4{
  line-height: 1;
}

.grid{
  grid-gap:0px !important
}

.grades-intro {
  padding-top: 0px;
}

.opening-manifesto img {
  display: inline;
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
  border-radius: 20px;
}

 }


@media screen and (min-width: 60rem) {

  
  body {
    --padding: 3rem;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }

}

.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text-grey);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.note-excerpt {
  line-height: 1.5em;
}
.note-excerpt header {
  margin-bottom: 1.5rem;
}
.note-excerpt figure {
  margin-bottom: .5rem;
}
.note-excerpt-title {
  font-weight: 600;
}
.note-excerpt-date {
  color: var(--color-text-grey);
}