@import url(./reset.css);

@font-face {
  font-family: "Apfel Grotezk";
  src: url('../assets/fonts/ApfelGrotezk-Regular.otf') format('opentype');
  font-weight: normal;
}

@font-face {
  font-family: "Apfel Grotezk";
  src: url('../assets/fonts/ApfelGrotezk-Bold.otf') format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: "Macan Grotezk";
  src: url('../assets/fonts/Macan-Bold.otf') format('opentype');
  font-weight: bold;
}



*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: white;

}

a:visited{
  color: white;
}

a:hover {
  color: #fe5cc1;
}



.apfel-r{
  font-family: "Apfel Grotezk";
  font-weight: normal;
  font-size: 0.9rem;
}

.apfel-l {
  font-family: "Macan Grotezk";
  font-weight: bold;
  font-size: 3rem;
}

.pt-20 {
  padding-top: 20px;
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.font-xl {
  font-size: 3rem;
  line-height: 0.85;
}

.font-l {
  font-size: 1.5rem;
  line-height: 0.95;
}



flex {
  display: flex;
  } 

  .fixed {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  img {
    width: 80%;
  }

.pb-20 {
  padding-bottom: 20px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-100 {
  padding-bottom: 50px;
}

.bottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

body {
  background-color: black;
  color: white;
  margin: 10px 0 0 10px;
}
.relative {
  position: relative;
}

@media (min-width:601px) {
  body {
    padding: 30px 0 0 30px;
  }

  .parent {
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
  }
  .grid-item1 {
    grid-column: 1/1;
    width: 250px;
  }
  .grid-item2 {
    grid-column: 2/2;
  }
  .grid-item3 {
    grid-column: 1/1;
    grid-row: 2/2;

  }
  .grid-item4 {
    grid-column: 2/2;
    grid-row: 2/2;
  }
  .grid-item5{
    grid-column: 1/1;
    grid-row: 3/3;
  }

.grid-item6{
  grid-column: 2/2;
  grid-row: 3/3;
}



}


@media (min-width:960px) {
  body {
    padding: 30px 0 0 30px;
  }

  .parent {
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
  }
  .grid-item1 {
    grid-column: 1/1;
    width: 250px;
    
  }
  .grid-item2 {
    grid-column: 3/5;
  }
  .grid-item3 {
    grid-column: 5/5;
    grid-row: 1/1;
  }
  .grid-item4 {
    grid-column: 1/1;
    grid-row: 2/2;
  }
  .grid-item5{
    grid-column: 3/3;
    grid-row: 2/2;
  }

.grid-item6{
  grid-column: 5/5;
  grid-row: 2/2;
}
}

.round {
  border-radius: 10px;
  filter: saturate(1.6);
}

img {
  border-radius: 10px;
}