:root {
  --primary-color: #242625;
  --secondary-color: #3c88a6;
  --color-three: #7aacbf;
  --color-four: #a65e44;
  --color-five: #bf2517;
}

html {
  font-size: 12px; /* Now, 1rem = 12px */
}

body {
  color: black;
  font-family: Verdana;
  margin: 0;

  background-image:
    linear-gradient(
      30deg,
      rgb(29, 129, 154) 12%,
      rgba(0, 0, 0, 0) 12.5%,
      rgba(0, 0, 0, 0) 87%,
      rgb(29, 129, 154) 87.5%,
      rgb(29, 129, 154)
    ),
    linear-gradient(
      150deg,
      rgb(29, 129, 154) 12%,
      rgba(0, 0, 0, 0) 12.5%,
      rgba(0, 0, 0, 0) 87%,
      rgb(29, 129, 154) 87.5%,
      rgb(29, 129, 154)
    ),
    linear-gradient(
      30deg,
      rgb(29, 129, 154) 12%,
      rgba(0, 0, 0, 0) 12.5%,
      rgba(0, 0, 0, 0) 87%,
      rgb(29, 129, 154) 87.5%,
      rgb(29, 129, 154)
    ),
    linear-gradient(
      150deg,
      rgb(29, 129, 154) 12%,
      rgba(0, 0, 0, 0) 12.5%,
      rgba(0, 0, 0, 0) 87%,
      rgb(29, 129, 154) 87.5%,
      rgb(29, 129, 154)
    ),
    linear-gradient(
      60deg,
      rgb(223, 88, 73) 25%,
      rgba(0, 0, 0, 0) 25.5%,
      rgba(0, 0, 0, 0) 75%,
      rgb(223, 88, 73) 75%,
      rgb(223, 88, 73)
    ),
    linear-gradient(
      60deg,
      rgb(223, 88, 73) 25%,
      rgba(0, 0, 0, 0) 25.5%,
      rgba(0, 0, 0, 0) 75%,
      rgb(223, 88, 73) 75%,
      rgb(223, 88, 73)
    );

  background-position:
    0px 0px,
    0px 0px,
    40px 70px,
    40px 70px,
    0px 0px,
    40px 70px;
  background-size:
    80px 140px,
    80px 140px,
    80px 140px,
    80px 140px,
    80px 140px,
    80px 140px;
  background-color: rgb(34, 195, 133);
}

.header {
  font-family: Verdana;
  background-color: #1d819a;
  font-size: 5rem;
  font-weight: bold;
  text-align: right;
  padding-right: 1rem;
  height: 5.833333rem;
}

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  height: calc(100vh - 5.833333rem);
  width: 100vw;
}

.div1 {
  grid-column: span 2 / span 2;
  grid-row: span 4 / span 4;

  margin: auto;

 
}
 iframe { width: auto;
 height: auto;  }

.div2 {
  grid-row: span 2 / span 2;
  grid-column-start: 3;
  margin: auto;

 
}

.div3 {
  grid-row: span 2 / span 2;
  grid-column-start: 3;
  grid-row-start: 3;
  margin: auto;

 
}

.div5 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 4;
  grid-row-start: 1;
  margin: auto;

 
}

.div6 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 4;
  grid-row-start: 3;
  margin: auto;

 
}

.div7 {
  grid-column: span 2 / span 2;
  grid-row-start: 5;
  margin: auto;

 
}

.div8 {
  grid-column: span 3 / span 3;
  grid-column-start: 3;
  grid-row-start: 5;
  margin: auto;

 
}