body {
    background-color: whitesmoke;
}

.lineOne {
    font-family: 'Reenie Beanie';
    font-size: 100pt;
    font-weight: 800pt;
    text-align: center;
    line-height: 0
}

ul {
    list-style-type: square;
    overflow: hidden;
    background-color: cornflowerblue;
    font-family: 'Raleway', sans-serif;
    font-size: 50pts;
    font-weight: 1000;
    font-kerning: normal;
}

li {
    float: left;
    display: inline-block;
    padding: 10px 190px ;
    margin-left: 400px
}

li:hover {
    background-color: cornflowerblue;
    opacity: .1;
}


.header{
    font-family: 'Raleway', sans-serif;
    font-size: 20px; 
    padding: 1px 10px 5px;
    font-weight: 900;
}

.column {
  float: left;
  width: 15%;
  padding: 3px 5px;
    margin: 3px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 10px 2px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 5px 1px 8px 4px rgba(0,0,0,0.2);
  transition: 0.2s;
    width: 100%;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.5);
}

/* Add some padding inside the card container */
.container {
  padding: 1px 3px 2px;
   font-family: 'Raleway', sans-serif;
    font-size: 12px;
    text-align: center;
}


/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
    
}