html *
{
  font-family: 'Lato', sans-serif;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Righteous', cursive;
}

h1 {
  all: unset;
}

h3 {
 all: unset;
}

a:link, a:visited {
  color: #164b78;
}

.righteos {
    font-family: 'Righteous', cursive;
}

.hoverable {
    cursor: pointer;
}

.container {
  margin: 0 auto;
  max-width: 1580px;
  width: 90%;
  overflow: hidden;
}

body {
  overflow: hidden; 
  background-color: #f5e8d7;    
  display: flex;
  min-height: 90vh;
  flex-direction: column;
}

main {
  overflow: hidden;
  flex: 1 0 auto;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#main-u {
  max-height: 85vh;
  overflow-y: scroll;
}

#aside-u {
  max-height: 85vh;
  overflow-y: auto;
}

.nav {
    padding:0 5;
}

.card {

}

.card-row-2 {
  max-height: 45vh;
}

.card-row-3 {
  max-height: 15vh;
}

/* width */
::-webkit-scrollbar {
  width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #bdbdbd;
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 20px;
}

@media only screen and (max-width: 601px) {
  #main-u {
    max-height: none;
    overflow-y: visible;
  }
  #aside-u {
    max-height: none;
    overflow-y: visible;
  }
  html {
    overflow-y: scroll;
  }
  nav .brand-logo {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 900px) {
  h2 {
    font-size: 2rem;
  }
}