html{
 width: 100%;
 background-image: url("/workbook/week2/play/wb_wk2_pp3.JPEG");
 background-size: 100vw; 
 overflow-x: hidden;
}

header{
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

h1{
   padding: 10px;
   background-color: rgb(255, 255, 255, 0.9);
   font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: 72px;
   letter-spacing: 0.2em;
}

.generalfeelings{
   width: 50vw;
   margin: 5vw;
   font-family: cursive;
   color: black;
   display: grid;
   grid-template-columns: 1fr, 1fr;
   grid-template-rows: auto;
   gap: 20px;
   background-color: rgb(255, 255, 255, 0.9);
   padding: 20px;
}

.activities{
   width: 50vw;
   margin: 45vw;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   color: red;
   display: grid;
   grid-template-columns: 1fr, 1fr;
   grid-template-rows: auto;
   gap: 20px;
   background-color: rgb(255, 255, 255, 0.9);
   padding: 20px;
}

.casestudies{
   width: 50vw;
   margin: 5vw;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   color: green;
   display: grid;
   grid-template-columns: 1fr, 1fr;
   grid-template-rows: auto;
   gap: 20px;
   background-color: rgb(255, 255, 255, 0.9);
   padding: 20px;
}

.play{
   width: 50vw;
   margin: 45vw;
   font-family:Georgia, 'Times New Roman', Times, serif;
   color:blueviolet;
   display: grid;
   grid-template-columns: 1fr, 1fr;
   grid-template-rows: auto;
   gap: 20px;
   background-color: rgb(255, 255, 255, 0.9);
   padding: 20px;
}

.img-flex{
   display:flex;
   flex-direction: row;
   overflow-x: scroll;
   padding: 1em;
   gap: 1em;
} 

img{
   width: 45vw;
}
 
.list{
   line-height: 1.5;
 }

footer{
   width: 100vw;
   position: fixed;
   bottom: 0;
   left: 0;
   padding: 10px;
   background-color: red;
}

a{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   letter-spacing: 0.1em;
   color: black;
   text-decoration: none;
}