@font-face {
    font-family: Metropolis;
    src: url('../fonts/metropolis-latin-400-normal.ttf');  
} 
@font-face {
  font-family: OpenSans;
  src: url('../fonts/OpenSans-Regular.ttf');  
}


@font-face {
  font-family: MysteryQuest;
  src: url('../fonts/MysteryQuest-Regular.ttf');  
}
/** BODY*/
body {   
    font-family: "Open Sans", sans-serif;    
    font-size: 17px;   
    line-height: 200%;   
    margin: auto;   
    
}

/** HEADER */
header {
   color: white;   
   background-color: black;
   padding: 20px;
}


.site-title   {
    font-family: 'Allura', serif;
    font-family: 'MysteryQuest', serif;
    font-size: 40px;     
    color: white;
    letter-spacing: 3px;
    line-height: 150%;
}
   
.site-description {     
    letter-spacing: 2px;
    font-size: 16x;
    color: white;
    
}
/** MENU */
.menuitem, .css-menu li a {
    color: white;
}

/** TAGs*/
a {
    color: black;
    cursor: pointer;
}
h1 {
    font-size: 56px;
    line-height: 130%;
    font-family: 'Metropolis';
    padding-top: 90px;
    text-align: center;
    margin: 0;

}
 p {
  line-height: 170%;
}

ul {
    text-align: left;
}
h2 {
  font-size: 3;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 30px;
  letter-spacing: 5px;
}
/** MAIN */
main {
    width: 1000px;
    text-align: left;
}
/** SECTIONS AND SECTIONS */
.section-1 {
    background-color: black;
    color: white;
}
.section-2 {
    background-color: white;
    color: black;
}
.section-inner {
    text-align: center;
}

.full-column {
    width: 1400px;
    margin: auto;
    max-width: 100%;
}
/** LINKS */
.section-1 .linkgridcolumn {  
    padding: 0 0  30px 0;
    margin: 0 10px;   
    background-color: white;
}
.section-1 a {
    color: black;
}
.section-2 .linkgridcolumn {
    background-color: black;
    padding: 0 0  30px 0;
    margin: 0 10px;   
}
.section-2 a {
    color: white;
}


.linkgridcolumn img {
    width: 200px;
    max-width: 100%;
}


/** BUTTONS */
.button1, .button2  {
    display: inline-block;
    border: 1px solid white;
    border-radius: 5px;
    padding: 6px 12px;
    margin: 8px;
    
}
.button2 {
    background-color: darkmagenta;
   
}
.button1 p, .button2 p {
    margin: 0;
    padding: 0;
    line-height: 100%;
  
}
.button1  a , .button2 a{
  color: white;
}

/** SECTIONS */



/** PAGES */
.home .half-column-1, .home-half-column-2 {
    padding: 0 30px;
    
}
.home .half-column-1 {
    text-align: left;
}
.home main {
   width: 100%;
}


/** FOOTER */
footer {
   color: white;   
   background-color: black;
   padding: 20px;
}

footer .menu {
    width: 100%;
    text-align: center;
}
/**BREAKPOINTS */
@media only screen and (max-width: 800px) {  
    .site-title, .menu  {
     
        width: 100%;
        text-align: center;
    }
}