/* CSS - Name: "positionstyles.css" */
/* Activity 1 styles */
.content1 {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
grid-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 {
    /* This is the parent of the activity 2 boxes. */
}
.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;
    grid-column-gap: 10%;
}
.red3 {
width: 100%; 
height: 100px; 
background-color: red;
grid-column: 1/3; 
 } 
.green3 {
width: 100%; 
height: 150px; 
background-color: green;
 } 
.yellow3 {
width: 100%; 
height: 150px; 
background-color: gold;
 } 
.blue3 {
width: 100%;
height: 100px; 
background-color: blue; 
grid-column: 1/3;
 } 
 /* Activity 4 styles */ 
.content4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 33.3% 33.3% 33.3%;
grid-gap: 0;
height: 400px;
}
.red4 {
width: 100%; 
height: 400px; 
background-color: red; 
grid-column: 1/2;
grid-row: 1/3;
 } 
.green4 {
width: 100%; 
height: 100%; 
background-color: green;
grid-column: 2/3;
grid-row: 1/2;
} 
.yellow4 {
width: 100%; 
height: 100%; 
background-color: gold;
grid-column: 2/3;
grid-row: 2/3; 
 } 
.blue4 {
width: 100%; 
height: 100%; 
background-color: blue;
grid-column: 2/3;
grid-row: 3/4; 
 } 
 /* Activity 5 styles */ 
 .content5 {
    /* This is the parent of the activity 5 boxes. */
    max-width: 600px;
     height: 450px;
     text-align: justify;
     font-size: 10px;
}
.red5 { 
width: 100%; 
height: 100px; 
background-color: red; 
 } 
.green5 { 
width: 150px; 
height: 150px; 
background-color: green; 
float: left;

 } 
.yellow5 {
width: 100%; 
height: 250px; 
background-color: gold; 

} 
.blue5 {
width: 100%; 
height: 100px; 
background-color: blue; 
 } 
 /* Activity 6 styles */ 
 .content6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 100px);
}
.red6 {
width: 400px; 
height: 200px; 
background-color: red; 
grid-column: 1/4;
grid-row: 1/2;
z-index: 1;
} 
.green6 {
width: 200px; 
height: 200px; 
background-color: green; 
grid-column: 1/3;
grid-row: 5/7;
z-index: 3;
 } 
.yellow6 {
width: 200px; 
height: 400px; 
background-color: gold; 
grid-column: 5/7;
grid-row: 3/6;
z-index: 4;
} 
.blue6 {
width: 400px; 
height: 400px; 
background-color: blue;
grid-column: 2/5;
grid-row: 2/4; 
z-index: 2;
} 


/* Do not make any changes below here */
 .activity {
width: 600px; 
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;
}