html {
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  a {
      color:inherit;
      text-decoration: none;
      transition: all .3s;
  }

  a:hover {
      opacity:.3;
  }

  .active {
      border-bottom: black 1px dashed;
  }
  body {
      height:100vh;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      margin:0;
      padding:0;
  }

  header {
      display:flex;
      justify-content: space-between;
      align-items: center;
      background-color: #efefef;
      padding:1rem 2rem;
}

header ul {
    display: flex;
    max-width:25vw;
list-style: none;
padding: 0;
margin: 0;
justify-content: space-evenly;
}

header ul > li {
    padding-right:1rem;
}


.logo {
    
}

.logo-text {
    font-weight: 700;
    display:flex;
    align-items:center;
}

.logo-text svg {
    height:2rem;
    margin-right:1rem;
}

.footer-items svg {
    height:2rem;
    margin-right:1rem;
}

.shaded {
background-color: #efefef;
}
.panel {
    display:flex;
    align-items: center;
    justify-content: center;
    padding-top:.5rem;
    margin-top:.5rem;
}

.container {
    max-width:85vw;
}

h1,h2,h3 {
  font-weight:400;
}

p {
    font-weight:300;
    font-size:1.2rem;
    line-height:1.7rem;
}

hr {
    border: 0px;
    border-bottom: 1px solid black;
}

.cardLayout {
   display:flex;
   flex-wrap: wrap;
   width:100%;
}

.card {
background-color:#efefef;
padding:12px;
margin:12px;
flex: 1 0 30%;
}

.footer {
    display:flex;
    justify-content: center;
    background-color:black;
    color:#fff;
    padding:1rem 2rem;
}

.footer-items {
    display:flex;
    align-items: center;
    flex-grow:1;
    justify-content:space-between;
}

.footer-items p {
    font-size:.6rem;
    font-weight:400;
}