body{
  background-color: black;
  background-image: url("ocatc-bg.png");
  background-repeat: repeat; /* or repeat-x, repeat-y, no-repeat */
  background-size: 120px 70px; /* or specific dimensions like 50px 50px */
}

h1, h2, h3, h4 {
  font-family: "Comic Sans MS", cursive;
}

/**By default, we build the layout for mobile**/

.wrapper {
  width: 100vw;
  display: flex;
  flex-direction: column;  
}


.header{
    margin: 20px 0px;
    height: 20vh;
    outline: 1rem dotted yellow;
    outline-offset: 0.1rem;
    background-color: white;
  }
  
  
.faq ul {
  list-style-type: "+"
  }

.faq ul li {
    padding: 12px;
    margin-bottom: 2px;
  }

.faq ul li span{
  font-weight: bold;  
}

/**This is a media query for the desktop**/

@media screen and (min-width: 767px) {
  .wrapper{
    margin: 0 auto;
    flex-wrap: wrap;
    width: 70vw;
  }
  
  .hello-bar, .sub-footer {
    display: flex;
    flex-direction: row;
    flex: 100%;
  }

  
  .left--ad, .right--ad, .left--lower, .right--lower {
    flex: 48%;
    margin: 0 15px 0 0;
    background-color: white;
  }
  
  .left--ad, .right--ad {
    height: 12vh;
    background-color: transparent;
  }
  
  .left--lower, .right--lower {
    padding: 20px;
  }
  
  .header{
    flex: 100%;
    }
  
  
}