html, body {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: Arial, sans-serif;
}
.minion-text {
  font-family: 'Minion Pro', serif;
  font-size: 3rem;
  font-weight: bold;
  color: #444;
}
@font-face {
  font-family: 'Minion Pro';
  src: url('fonts/minion-pro.woff2') format('woff2'),
       url('fonts/minion-pro.woff') format('woff'),
       url('fonts/minion-pro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
}
nav {
  padding: 31px;
  background-color: #000000;
}
.logo a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  float: right;
}
.nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.navitem {
  position: relative;
  padding-right: 20px;
}
.navitem::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  width: 2px;
  height: 80%;
  background-color: white;
}
.navitem:last-child::after {
  display: none;
}
.nav-links li {
  display: inline-block;
  color: white;
  padding: 1%;
  border-radius: 15px;
  transition: background-color 0.3s, transform 0.2s;
  text-align: center;
}
.nav-links li:hover {
  background-color: rgb(224, 224, 224);
  transform: scale(1.1);
}
.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}
.nav-links li:hover a {
  color: rgb(0, 0, 0); 
}
.hamburger {
  display: none;
  cursor: pointer;
  float: left;
}
.hamburger .bar {
  width: 30px;

  height: 4px;
  color: white;
  margin: 5px 0;
}
#minionimages {
  width: 100%;
  height: auto;
  transform: rotate(0deg);
}
#minionpro {
  font-family: 'Minion Pro', serif;
  font-size: 20px;
  font-weight: bold;
  color: #444;
}
#skibidiphone {
  display: none;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
    width: 100%;
    text-align: center;
    background-color: #000000;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 20px 0;
  }
  .nav-links.active {
    display: block;
  }
  .nav-links li {
    display: block;
    margin: 10px 0;
  }
  .hamburger {
    display: block;
  }
  #skibidi {
    display: none;
  }
  #skibidiphone {
    display: block;
  }
  .backgroundcolor {
    display: none;
  }
  #babat {
    display: none;
  }
  #section5 {
    display: none;
  }
  #bubut {
    align-items: center;
  }
}
main {
  display: grid;
  grid-template-columns: 2% 1fr 1fr 1fr 1fr 2%;
  grid-gap: 2%;
}
#section1{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
main section:nth-child(1) {
  padding: 5px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
main section:nth-child(1) img {
  width: 100%;
  height: auto;
  transform: rotate(7deg);
  transition: transform 0.3s ease-in-out;
  margin-top: 15px;
}
#section2{
  grid-column: 3 / 6;
  grid-row: 1 / 2;
}
main section:nth-child(2) {
  grid-column: 3 / 4;
}
main section:nth-child(2) p {
  font-size: 120%;
}
main section:nth-child(2) h2 {
  font-size: 3rem;
  padding-bottom: 10px;
}
#section3{
  grid-column: 4 / 6;
  grid-row: 2 / 3;
}
#section3 img{
  width: 100%;
  height: auto;
}
main section:nth-child(3) {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
  padding: 20px;
}
main section:nth-child(3) img {
  width: 100%;
  height: 105%;
}
#section4{  
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  line-height: 2rem;
}
.backgroundcolor {
  background-color: #00000016;
  grid-column: 1 / 6;
  grid-row: 2 / 3;
  width: 100%;
  height: 100%;
}

main section:nth-child(4) {
  padding: 20px;
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
main section:nth-child(4) p {
  font-size: 100%;
  padding-bottom: 10px;
}
#bubut{
  width: 100%;
  height: auto;
}
h3 {
  font-size: 2.5rem;
  padding-bottom: 10px;
}
h4 {
  font-size: 1.5rem;
  padding-bottom: 10px;
}
main section:nth-child(4) ul {
  padding-left: 20px;
}
main section:nth-child(4) ul li {
  line-height: 1.2;
  margin-bottom: 10px;
  list-style-type:circle;
}
#section5{
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}
main section:nth-child(5) {
  padding: 20px;
  grid-column: 2 / 6;
  grid-row: 3 / 4;
  margin-bottom: 15px;
}
.menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: white;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding-top: 50px;
}
#section6 {
  grid-column: 2 / 5 ;
  grid-row: 3 / 4;
  padding-top: 100px;
}
main section:nth-child(6) {
  grid-column: 2 / 6;
  grid-row: 4 / 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding-bottom: 250px;
}
#carreau1 {
  width: 45%;
  height: auto;
  transform: rotate(45deg);
  background-color: #ff9933;
  grid-column: 2;
  grid-row-end: 1;
  padding-left: 85px;
  padding-top: 20px;
}
#carreau2 {
  width: 45%;
  height: auto;
  transform: rotate(45deg);
  background-color: #0099cc;
  grid-column: 1;
  grid-row-end: 2;
  padding-left: 85px;
  padding-top: 20px;
}
#carreau3 {
  width: 45%;
  height: auto;
  transform: rotate(45deg);
  background-color: #66ccff;
  grid-column: 3;
  grid-row-end: 2;
  padding-left: 85px;
  padding-top: 20px;
}
#carreau4 {
  width: 45%;
  height: auto;
  transform: rotate(45deg);
  background-color: #ff6666;
  grid-column: 2;
  grid-row-end: 3;
  padding-left: 85px;
  padding-top: 20px;
}
#carreau5 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #5f98ac;
  grid-column: 1;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau6 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #b95e89;
  grid-column: 2;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau7 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #ccb557;
  grid-column: 3;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau8 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #C8D7F1;
  grid-column: 2;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau9 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #a1594b;
  grid-column: 3;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau10 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #688e5b;
  grid-column: 1;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau11 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #acbcbc;
  grid-column: 1;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau12 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #8f6f79;
  grid-column: 2;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau13 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #e19351;
  grid-column: 3;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau14 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #d13d24;
  grid-column: 2;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau15 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #6e7694;
  grid-column: 3;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau16 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #642b30;
  grid-column: 1;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau17 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #ff0000;
  grid-column: 1;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau18 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #d10000;
  grid-column: 2;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau19 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #8a0000;
  grid-column: 3;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau20 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #600e00;
  grid-column: 2;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau21 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #ff4d4d;
  grid-column: 3;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau22 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #6b3030;
  grid-column: 1;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau23 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #292929;
  grid-column: 1;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau24 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #444444;
  grid-column: 2;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau25 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #595959;
  grid-column: 3;
  grid-row-end: 2;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau26 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #767676;
  grid-column: 2;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau27 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #949494;
  grid-column: 3;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#carreau28 {
  width: 65%;
  height: auto;
  transform: rotate(45deg);
  background-color: #d2d2d2;
  grid-column: 1;
  grid-row-end: 1;
  padding-left: 95px;
  padding-top: 100px;
}
#feeter{
  background-color: #000000;
  text-align: center;
  color: white;
  margin-top: auto;}
footer {
  padding: 31px;
  background-color: #000000;
  text-align: center;
  color: white;
  margin-top: auto;
}
.footer-links a {
  display: inline-block;
  padding: 1%;
  border: solid 2px rgba(255, 255, 255, 1);
  border-radius: 15px;
  transition: background-color 0.3s, transform 0.2s;
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 18px;
  margin: 5px;
}
.footer-links a:hover {
  color: rgb(0, 0, 0);
  background-color: rgb(224, 224, 224);
  transform: scale(1.1);
}
.footer-text {
  margin-top: 50px;
  font-size: 14px;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .footer-links a {
    display: block;
    margin: 10px auto;
  }
}
#minion-image {
  width: 100%;
  height: auto;
  transform: rotate(-9deg);
  margin-top: 64px;
}