/*overall*/
* {
  font-family: 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

body {

  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
/*Top of screen*/
.header-box {
  display: flex;
  background-image: url("/images/meeting.jpeg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 2%;
  align-content: center;
  justify-content: center;
}
.header-box .header-text{
  display: block;
  text-align: center;
  width: max-content;
  padding: 1rem 2rem;
  font-size: xxx-large;
  background-color: rgba(201, 196, 196, 0.8);
  color: black;
  border: solid 4px rgb(160, 157, 157);
  box-shadow: 0 4px 8px 0 grey;
}

/*for all cards*/
.card {
  box-sizing: border-box;
  display: flex;
  background-color: ghostwhite;
  margin: 20px;
  border: solid 1px rgb(7,38,100);
  border-radius: 10px;
  padding: 10px 20px 20px 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
.card .section-title{
  font-weight: 600;
}
.card:hover {
  box-shadow: 0 8px 16px 0 rgb(7,38,100);
} 
.card a{
  color:red;
  text-decoration:underline;
}
.card a:visited{
  color:red;
  text-decoration:underline;

} 
.card a:hover{
  color: orange;
}

.card .bi{
  font-size: larger;
}

.tab {
  display: inline-block;
  margin-left: 30px;
}

/*Event Flyer*/
/*flyer image*/
.flyer{
  margin:10px 0px 10px 0px;
  display:flex;
  color:white;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}
.flyer img{
  object-fit:cover;
  max-width: 90%;
  display: block;
}
/*no event text*/
.flyer .hidden-txt {
  color:rgb(207, 40, 10);
  background-color: rgb(227, 236, 50, 0.7);
  font-weight: 700;
  padding: 0 20vw;
}

/*Boxes*/
#where{
  grid-area: where;
}
#when{
  grid-area: when;
}
#register{
  grid-area: rsvp;
}

/*agenda*/
#agenda{
  grid-area: agenda;
}
#agenda dl dd{
  line-height: 125%;
  margin-left: 2rem;
  font-size: larger;
}
#agenda dl dt{
  margin: 0 0 1rem 0;
  font-size:x-large;
  font-weight: 400;
  
}


/*grid layout*/
.grid-container {
  margin: 12px auto 0;
  display: grid;
  grid-template-areas:
  'when agenda agenda agenda'
  'where agenda agenda agenda'
  'rsvp agenda agenda agenda';

}

@media screen and (max-width: 1000px) {
  .grid-container {
   
    grid-template-areas: 
    'where where when when'
    'rsvp rsvp rsvp rsvp'
    'agenda agenda agenda agenda';
  }
}
@media screen and (max-width: 40rem) {
  .grid-container {
   
    grid-template-areas: 
  
    'when when'
    'where where'
    'rsvp rsvp'
    'agenda agenda';
  }
}