/* CSS - Name: "positionstyles.css" */
/* Activity 1 styles */
.content1 {

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 20px;
  
  }
  .red1 { 
    width: 100%; 
    height: 100px; 
    background-color: red; 
    grid-column: 1/3;
  
  } 
  .green1 {
    width: 200px; 
    height: 200px; 
    background-color: green; 
  
  } 
  .yellow1 {
    width: 200px; 
    height: 200px; 
    background-color: gold; 
  } 
  .blue1 {
    width: 100%; 
    height: 100px; 
    background-color: blue; 
    grid-column: 1/3;
  } 
  /* Activity 2 styles */ 
  /* .content2 {
  } */
  .red2 {
    width: 100px; 
    height: 100px; 
    background-color: red; 
  } 
  .green2 { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    margin: -50px 0 0 50px;
  } 
  .yellow2 {
    width: 100px; 
    height: 100px; 
    background-color: gold; 
    margin: -50px 0 0 100px;
  } 
  .blue2 {
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    margin: -50px 0 0 150px;
  } 
  /* Activity 3 styles */ 
  .content3 {

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
  }
  .red3 {
    width: 100%; 
    height: 100px; 
    background-color: red; 
    grid-column: 1/3;
  } 
  .green3 {
    width: 100%; 
    height: 100px; 
    background-color: green;
    justify-self: flex-start;
  } 
  .yellow3 {
    width: 100%; 
    height: 100px; 
    background-color: gold; 
    justify-self: flex-end;
  } 
  .blue3 {
    width: 100%;
    height: 100px; 
    background-color: blue; 
    grid-column: 1/3;
  } 
  /* Activity 4 styles */ 
  .content4 {
    /* This is the parent of the activity 4 boxes. */
    height: 400px;
    display: grid;
    grid-template-columns: 1fr 1fr;

  }
  .red4 {
    width: 100%; 
    height: 100%; 
    background-color: red; 

    grid-row: 1/4;
  } 
  .green4 {
    width: 100%; 
    height: 100%;  
    background-color: green; 
  } 
  .yellow4 {
    width: 100%; 
    height: 100%; 
    background-color: gold; 
  } 
  .blue4 {
    width: 100%; 
    height: 100%; 
    background-color: blue; 
  } 
  /* Activity 5 styles */ 
  .content5 {
    /* This is the parent of the activity 5 boxes. */

    height: 400px;
    }
  .red5 { 
    width: 100%; 
    height: 100px; 
    background-color: red; 
  } 
  .green5 { 
    width: 150px;
    height: 150px; 
    background-color: green;
    z-index: 1; 
    float: left;
  
  } 
  .yellow5 {
    width: 100%; 
    height: 200px; 
    background-color: gold; 
    font-size: 16.60px; 
  } 
  .blue5 {
    width: 100%; 
    height: 100px; 
    background-color: blue; 
  } 
  /* Activity 6 styles */ 
  .content6 {
    /* This is the parent of the activity 6 boxes. */
    display: grid;
    grid-template-columns: repeat(6, 50px);

  }
  .red6 {
    width: 200px; 
    height: 100px; 
    background-color: red; 
    grid-column: 1/6;
    z-index: 1;
    grid-row: 1/3;
  } 
  .green6 {
    width: 100px; 
    height: 100px;
    background-color: green; 
    grid-column: 1/3;
    grid-row: 4/6;
    z-index: 3;
  } 
  .yellow6 {
    width: 100px; 
    height: 200px; 
    background-color: gold; 
    grid-column: 5/6;
    grid-row: 3/7;
    z-index: 3;
  } 
  .blue6 {
    width: 200px;
    height: 200px;
    background-color: blue; 
    grid-column: 2/5;
    grid-row: 2/5;
    z-index: 1;
  } 
  
  
  /* Do not make any changes below here */
  .activity {
    width: 70%; 
    margin: 20px auto; 
    font-family: Arial, sans-serif; 
    border: 1px solid black; 
    padding: 10px; 
    clear:both; 
    overflow: auto;
  } 
  
  .hint {
    border: 1px solid grey;
    background: #e0e0e0;
    padding: .5em;
    position: relative;
    margin: 1em 0;
  }
  .hint h3 {
    margin: 0;
  }
  .hint:hover {
    background: #d0d0d0;
  }
  .hint > div {
    display: none;
  }
  
  .hint input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
  }
  
  .hint input[type=checkbox]:checked ~ div {
    display: block;
  }
  
  .hint i {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 16px;
    right: 10px;
    top: -3px;
  }
  .hint i:before, .hint i:after {
    content: "";
    position: absolute;
    background-color: black;
    width: 3px;
    height: 9px;
  }
  .hint i:before {
    transform: translate(2px, 0) rotate(45deg);
  }
  .hint i:after {
    transform: translate(-2px, 0) rotate(-45deg);
  }
  
  .hint input[type=checkbox]:checked ~ i:before {
    transform: translate(-2px, 0) rotate(45deg);
  }
  .hint input[type=checkbox]:checked ~ i:after {
    transform: translate(2px, 0) rotate(-45deg);
  }
  .hint a {
    position: relative;
    z-index: 1;
  }