:root {
  --daFont: 'Open Sans', sans-serif;
  --daColor: hsla(218, 43%, 43%, 1);
  --daBtnColor: hsla(218, 3%, 3%, 0.6);
}

body {
    background-color: var(--daColor);
    transition: all 0.8s ease .05s;
    color: black;
}

.theNAV {
  padding: 5px;
  color: white;
  text-align: right;
}

.navButtons {
  cursor: pointer;
  color: white;
  padding: 0px 10px 0px 10px;
  transition: all 0.8s ease .05s;
}

.navButtons:hover {
  cursor: pointer;
  color: var(--daBtnColor);
  transition: all 0.8s ease .05s;
}

.jumbotron {
    background-color: White;
    padding: 25px;
    color: var(--daColor);
    height: 350px;
}


#getQuote{
    background-color: white;
    color: var(--daColor);
    margin-bottom: 15px;
    padding: 15px;
    font-family: var(--daFont);
    transition: all 0.3s ease .05s;
    font-weight: bolder;
}

#getQuote:hover {
  background: var(--daBtnColor);
  color: var(--daColor);
}

#getQuote:focus {
  outline: none;
}


.quote {
    font-family: var(--daFont);
    font-size: 13px;
    padding: 5px,25px,5px,25px;
}

.author {
    font-family: var(--daFont);
    font-style: italic;
    font-size: 15px;
    padding: 5px,10px,5px,10px;
    margin: 25px 25px 25px 25px;
    text-align: right;
}

.quoteID {
    font-family: var(--daFont);
    font-style: italic;
    font-size: 10px;
    padding: 5px,10px,5px,10px;
    margin: 25px 50px 25px 50px;
    text-align: right;
}

.title {
    font-family: var(--daFont);
    margin-bottom: 25px;
    font-weight: 100px;
}