body { background-color: #222; }

h1, h2, h3, p {text-align: center; font-weight: normal; text-decoration: none;}

h1 {font-size: 40px; color: #dfdfdf; }
h2  {font-size: 30px;}

h3  {
     font-size: 28px; 
     font-style: italic;
}

p {
     font-size: 20px; 
     margin-bottom: 40px; 
     color: #dfdfdf;
}


a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

a { 
     text-decoration: none;
     color: #000; 
     position: relative;
}


a:hover {color: #000;}

a:hover::before {
  transform: scaleX(1);
}

a:visited {color: #000;}
a:focus { color: #222; }
 
.flexcontainer {
     display:flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     background-image: url('../images/which/bg.jpg');
     margin-bottom: 40px;
     border-radius: 20px;
     padding: 40px;
} 


.flexitem1 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem1 h2 {
     text-align: center;
     font-weight: normal;}

.flexitem2 {
     flex-grow: 1; /* default 0 */
     text-align: center;
}


.flexitem5 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem6 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem7 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem8 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem9 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

.flexitem10 {
     flex-grow: 1; /* default 0 */
     align-items: center;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flexcontainer {
    flex-direction: column;
  }
}