@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300&display=swap');


* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

body {
   background-color: white;
   font-family: "Source Sans Pro", sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
   margin: 0;
}

a {
   text-decoration: none;
   color: black;
}

a.cardinal {
/*   text-decoration: underline;*/
   color: #d22731;
}


header {
   display: grid;
   grid-template-columns: 2fr 3fr;
   grid-gap: 1vw;
   padding: 0vh 20px 10px 20px;
}


.headerpic {
   position: relative;
}

.headerpic img {

   height: 100%;
   object-fit: cover;

}

.headercredit {

   position: absolute;
   right: 0px;
   bottom: 0px;
   padding: 5px;
   color: gray;
   font-size: 10px;
}

.summarywrapper {
   display: flex;
   align-items: center;
   padding: 0vh 5vw;
}


.summary {
   font-size: 18px;
   line-height: 1.4em;
}


.summaryimage {
/*   position: relative;
   top: 10px;
   left: 0px;
   z-index: 4;
   width: 160%;
   margin-bottom: 40px;*/
}

.summary h1 {
   color: #d22731;
   font-size: 3em;
   animation: colorchange 4s infinite;   
}

/*.summary a {
   animation: colorchange 4s infinite reverse;  
}*/

.summary a:hover {
   text-decoration: underline;
}

@keyframes colorchange {

   0% {
      color: #d22731;
      transform: scale(1);
   }

   20% {
      color: black;
      transform: scale(1);
   }   

   40% {
      color: #d22731;
   }

   100% {
      color: #d22731;
      transform: scale(1);      
   }

}


.content {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 1vw;
   padding: 0vh 15px;
}

.story {
/*   box-shadow: 1px 1px 0px black;*/
   padding-top: 0px;
   border-radius: 3px;
   overflow: hidden;
   padding: 5px;


}

.story:hover {
   filter: grayscale(1);
/*   border-right: 1px solid gray; */
   box-shadow: 1px 1px 10px gray;
}


.story img {
   height: 20vh;
   object-fit: cover;
}


.semester {
   font-weight: bold;
   width: 100%;
   background-color: black;
   color: white;
   padding: 5px;
   margin: 0px;
}



footer {
   background-color: black;
   color: white;
   padding: 20px;
   text-align: center;
   margin-top: 20px;
}


/*media query for responsive design */

@media only screen and (max-width: 1080px) {

   .summaryimage {
      width: 150%;
      z-index: 4;
      position: relative;
   }


   .summary {
      font-size: 1.3em;
   }

}



@media only screen and (max-width: 800px) {

   .summaryimage {
      width: 180%;
   }


   .content {
      grid-template-columns: 1fr 1fr 1fr;

   }




}

@media only screen and (max-width: 640px) {


   header {
      display: flex;
      flex-direction: column-reverse;
      padding: 0vh 0vw 1vw 0vw;
   }

   .summarywrapper {
      padding: 2vh 1vw 0vh 1vw;
   }

   .summaryimage {
      width: 100%;
   }

   .content {
      grid-template-columns: 1fr 1fr;
      padding: 0vh 2px;
   }

   .story {
      padding: 2px;
   }


}