body {
     background-color: #efebe0;
     color: black;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

   .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fe96a0;
    padding: 20px;
    color: rgb(240, 240, 240);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    -webkit-box-shadow: 0px 0px 20px #000000;
    -moz-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
   }

  .navbar p {
    margin: 0 15px;
    cursor: pointer;
    transition: .3s;
    color: black;
  }

 #title {
     font-size: 48px;
     color: #c9c9c9;
     font-weight: bold;
     margin-bottom: 10px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     text-align: center;
     padding-top: 10px;
}
 #subtitle {
     font-size: 24px;
     color: #c9c9c9;
     font-weight: bold;
     margin-bottom: 20px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     text-align: center;
}
 .flex-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     padding-top: 20px;
     padding-bottom: 30px;
}
 #intro {
     padding-top: 20%;
     text-align: center;
}
 #start-menu {
     padding-top: 25px;
}
 .text-center {
     text-align: center;
}
 .text-center-highlight {
     text-align: center;
     background-color: #1c1c1d;
     color: #c9c9c9;
}
 .greyed-out-removed {
     color: darkgray;
}
 .card-wrapper {
     padding-top: 20px;
}
 .card-img-top {
     width: 100px;
     height: auto;
     border-radius: 50%;
     padding-top: 10px;
}
 .card {
     background: #fff;
     box-shadow: 0 8px 15px -7px #c9dff0;
     margin: 0 10px;
     padding-left: 10px;
     border-radius: 20px;
     border: 0;
     color: #3b3b3b;
     width: 200px;
     height: 350px;
}
 .glyphicon {
     font-size: 30px;
     padding-top: 200px;
}
 a {
     text-decoration: none;
     color: #0084ff;
}
 .card-text {
     height: 175.6px;
     padding-bottom: 10px;
     padding-left: 5px;
     padding-right: 5px;
}
 .text-center {
     text-align: center;
}
 #footer {
     background-color: #1a1a1a;
     height: 300px;
     padding-left: 0px;
     padding-bottom: 0px;
     box-sizing: border-box;
}
 #gs {
     cursor: pointer;
     background-color: #fe96a0;
     border: none;
     color: black;
     padding: 17px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     border-radius: 18px;
     font-size: 19px;
}
 .zoom {
     -webkit-animation: scale-down-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     animation: scale-down-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
 .zoom:hover {
     text-decoration: none;
     -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
     animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
 @-webkit-keyframes scale-up-center {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
    }
     100% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
    }
}
 @keyframes scale-up-center {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
    }
     100% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
    }
}
 @-webkit-keyframes scale-down-center {
     0% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
    }
     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
    }
}
 @keyframes scale-down-center {
     0% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
    }
     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
    }
}
 * {
     box-sizing: border-box;
}
/* Float four columns side by side */
 .column {
     float: none;
     width: 20%;
     padding: 0 5px;
     padding-bottom: 30px;
     padding-left: 10px;
}
 h3 {
     font-size: 24px;
}
 .row {
     width: 100%;
}
/* Clear floats after the columns */
 .row:after {
     content: "";
     display: table;
     clear: both;
}
/* Style the counter cards */
 .thing {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     text-align: center;
     background-color: #fff;
     color: #3b3b3b;
     height: 200px;
     border-radius: 20px;
     box-shadow: 0 8px 15px -7px #c9dff0;
     padding-top: 10px;
}
 .fa {
    font-size:50px;
}
 div.fixed {
     position: fixed;
     top: 0;
     right: 0;
     width: 50px;
     height: 50px;
     border-radius: 0px 0px 0px 10px;
     background-color: #000;
     color: #ffffff;
}
 .fa-gear {
     padding-top: 5px;
     padding-right: 5px;
     padding-left: 5px;
     padding-bottom: 5px;
     color: #fff;
     font-size: 40px;
}
 #snackbar {
     visibility: hidden;
     min-width: 250px;
     margin-left: -125px;
     background-color: #f44336;
     color: #fff;
     text-align: left;
     border-radius: 2px;
     padding: 16px;
     position: fixed;
     z-index: 1;
     right: 20px;
     bottom: 30px;
     font-size: 17px;
}
 #snackbar.show {
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
     animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
 #fetchFail {
     visibility: hidden;
     min-width: 250px;
     margin-left: -125px;
     background-color: #f44336;
     color: #fff;
     text-align: left;
     border-radius: 2px;
     padding: 16px;
     position: fixed;
     z-index: 1;
     right: 20px;
     bottom: 30px;
     font-size: 17px;
}
 #fetchFail.show {
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
     animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
 @-webkit-keyframes fadein {
     from {
        bottom: 0;
         opacity: 0;
    }
     to {
        bottom: 30px;
         opacity: 1;
    }
}
 @keyframes fadein {
     from {
        bottom: 0;
         opacity: 0;
    }
     to {
        bottom: 30px;
         opacity: 1;
    }
}
 @-webkit-keyframes fadeout {
     from {
        bottom: 30px;
         opacity: 1;
    }
     to {
        bottom: 0;
         opacity: 0;
    }
}
 @keyframes fadeout {
     from {
        bottom: 30px;
         opacity: 1;
    }
     to {
        bottom: 0;
         opacity: 0;
    }
}