@font-face {
  font-family: "Grotesk";
  src: url("Labrada-ExtraLightItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
}

   @font-face {
    font-family: "Inter";
    src: url("https://cdn.glitch.global/a0135ad0-4092-4324-a09e-d318ebf16060/Inter.ttf?v=1692122620818");
}

html {
background-color: white;
}

body {
  background-color: white;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body .cursor {
pointer-events: none;
}

body .cursor__ball {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}

body .cursor {
mix-blend-mode: difference;
}

@media (max-width: 450px) {
  .cursor__ball {
    visibility: hidden;
  }
  
  #description {
    width: 75vw !important;
    font-size: 2.8vmin !important;
  }

  #colophon {
    width: 40vw !important;
    font-size: 2.6vmin !important;
  }

  #type, #date {
    font-size: 1.9vmin !important; 
  }

#back {
  left: 5vw !important;
}

#t1{
  min-width: 90% !important;
}

#t2{
  min-width: 120% !important;
}

#t3{
  min-width: 90% !important;
}

#t4{
  min-width: 90% !important;
}

#t5{
  min-width: 85% !important;
}

#t6{
  min-width: 80% !important;
}

#b1{
  min-width: 80% !important;
}

#b3{
  min-width: 80% !important;
}

#b4{
  min-width: 90% !important;
}

#b5{
  min-width: 80% !important;
}

.projects-top {
  height: 50vh !important;
}

.projects-bottom{
  height: 50vh !important;
}

.scroll-button {
  visibility: hidden !important;
}
}

body .cursor__ball circle {
fill: white;
}

#t1{
  min-width: 36%;
}

#t2{
  min-width: 45%;
}

#t3{
  min-width: 34%;
}

#t4{
  min-width: 36%;
}

#t5{
  min-width: 36%;
}

#t6{
  min-width: 34%;
}

#b1{
  min-width: 30%;
}

#b3{
  min-width: 32%;
}

#b4{
  min-width: 30%;
}

#b5{
  min-width: 28%;
}

h1{
  font-family: 'Grotesk';
  font-size: 4.5vh;
  line-height: 92%;
  margin: 0;
  z-index: 999;
  color: black;
}

.wrapper{
  width: auto;
  height: auto;
  position: relative;
  margin-bottom: 3vh;
  margin-top: 2vh;
}

#type{
  font-family: "Inter";
  text-align: left;
  font-size: 1.3vmin;
  margin: 0;
  position: absolute;
  color: grey;
}

#date{
  font-family: "Inter";
  text-align: right;
  right: 0;
  margin: 0;
  font-size: 1.3vmin;
  position: absolute;
  color: grey;
}

#description{
    padding: 0;
    margin:0;
    width: 24vw;
    font-family: "Inter";
    position: relative;
    color: black;
    font-size: 1.6vmin;
}

#colophon{
  padding: 0;
  margin:0;
  width: 13vw;
  font-family: "Inter";
  position: relative;
  color: black;
  font-size: 1.6vmin;
}

#back{
  position: fixed;
  font-family: 'Inter';
  font-size: 2vh;
  font-weight: 250;
  text-decoration: none;
  top: 3vh;
  left: 2vw;
  color: white;
  mix-blend-mode: difference;
  z-index: 999;
}

.ontop{
  margin-bottom: -5%;
  z-index: 999;
}

.italics {
  font-style: italic;
}

img {
  width: 100%;
  height: auto;
}

.item-top {
  padding: 20px;
  padding-top: 100%;
  outline: solid 1px rgb(222, 222, 222);
  border-bottom: 1px solid rgb(222, 222, 222);
}

.item-bottom {
  padding: 20px;
  padding-bottom: 100%;
  outline: solid 1px rgb(222, 222, 222);
}

.projects-top {
  padding: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  height: 55vh;
  column-gap: 1px;
  overflow-x: auto;
  position: relative;
}
.projects-bottom {
  padding: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 45vh;
  column-gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
}

.projects-top::-webkit-scrollbar {
  display: none;
}

.projects-bottom::-webkit-scrollbar {
  display: none;
}

.scroll-button {
  position: fixed;
  transform: translateY(-50%);
  width: 35px;
  height: 90px;
  border: none;
  background-color: rgba(255, 255, 255, 0) ;
  font-size: 20px;
  z-index: 999;
  mix-blend-mode: difference;
}


.left-top-button {
  left: 10px;
  top: 30%;
}

.right-top-button {
  right: 10px;
  top: 30%;
}

.left-bottom-button {
  left: 10px;
  top: 70%;
}

.right-bottom-button {
  right: 10px;
  top: 70%;
}