@media (max-width: 692px) {
  footer {
    display: none;
  }
}


#menu {
}
a:active {
  color: yellow;
}
p {
  margin-top:4px;
}
a {
  color: white;
  text-decoration:none;
}

h3 {
  margin-bottom:0px;
  Font-family: times
}
h2 {
  margin-bottom:0px;
}
body {
  font-family: sans-serif;
  height:100%
  min-height: 100vh;
}

/* very basic reset */

body,
h1,
ul {
  margin: 0;
  padding: 0;
}

/*
  make the header
  our first flex container
*/

header {
  align-items: center;
  display: flex;
  padding: 1em;
background:black;
color:white;
}

/*
  as children of header,
  logo and nav
  become our flex items
*/

#logo,
nav {
  
  /*
    flex is shorthand for
    flex-grow,
    flex-shrink,
    and flex-basis

    this gives us
    auto equal width flex items
    and they are all flexbile ... yay!
  */
  
  flex: 1;
}

/*
  make the nav ul
  our second flex container
*/

nav ul {
  display: flex;
  justify-content: space-around;
}

/*
  as children of ul,
  all list items
  become flex items
*/

nav li {
  list-style: none;
}

.flex-container {
flex-direction: row;
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  justify-content: center;
}
.cardcol {
  flex: 1 1 200px;
  margin:8px;
  padding:16px;
  width:calc(33.33% - 48px);
  height:auto;
}
.card {
  margin:8px;
  padding:16px;
}

.hero {
   position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(/vanfront/img/codingguy840.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   filter: brightness(60%);
}
.hero-content {
   position: relative;
   font-family: "Monserrat", sans-serif;
   color: white;
   text-align: center;
   margin: 3.625rem;
}
.hero-title {
   font-size: 3rem;
   font-weight: 600;
   margin-bottom: 0;
}
.hero-subtitle {
   font-size: 2rem;
   font-weight: 200;
   margin-top: 1rem;
}
.hero-button {
   color: white;
   margin-top: 3rem;
   padding: 0.9375rem1.875rem;
   font-family: "Monserrat", sans-serif;
   font-size: 1.125rem;
   font-weight: 200;
   cursor: pointer;
}
.hero-button:hover {
}