body {
  /* background-image: url(bg-general.jpg);
  background-size: cover; */
  background-color: #4e7075;

}

/* --- MOVING BACKGROUND CODE --- */
html,body {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

h1, h2,h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}

ul {
list-style-type: square;
}

ul.fact-list li {
margin: 0;
padding: .5rem;
}

hr {
border: 0;
height: 3px;
background-color: white;
padding: 0;
margin: 0;
}

#credits-link {
font-family: 'Montserrat', sans-serif;
}

 .contentsGen, .contentsFant, .contentsReal, .contentsGenAni, .contentsFantAni, .contentsRealAni {
  min-height: calc(100% - 100px);
  position: relative;
  overflow: hidden;
  z-index: 0;

}

 .contentsGen:before, .contentsFant:before, .contentsReal:before,
 .contentsGenAni:before, .contentsFantAni:before, .contentsRealAni:before {
  position: fixed;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}

.contentsGenAni:before, .contentsFantAni:before, .contentsRealAni:before {
  pointer-events: none;
  z-index: 0;
  animation: shrink 20s infinite alternate;
}

 .contentsGenAni:before, .contentsGen:before {
   background: url(bg-general.jpg);
   background-size: cover;
 }

 .contentsRealAni:before, .contentsReal:before {
   background: url(bg-real.jpg);
   background-size: cover;
 }

 .contentsFantAni:before, .contentsFant:before {
   background: url(bg-fantasy.jpg);
   background-size: cover;
 }

@keyframes shrink {
  0% {
     transform: scale(1.04);
    /* transform: translate(0.5); */
    /* transform: scale3d(1.05,1.05,1.05) ; */
  }
  100% {
     transform: scale(1);
    /* transform: translate(0); */
    /* transform: scale3d(1,1,1) ; */
  }
}

.front-icon {
height: 3rem;
width: 3rem;
}

div.container {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 3;
}


.navbar {
position: relative;
z-index: 3;
height: 50px!important;
box-sizing: border-box;
}

.navbar * {
box-sizing: border-box;
}


.footer {
position: relative;
z-index: 3;
height: 30px!important;
overflow: hidden;
margin-top: -30px;
}

a.navbar-brand {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}

ul.about-list li {
  padding-bottom: 1rem;
}

div#facttitle {
  width: 100%;
}

li {
padding-bottom: .5rem;
}

div.form-check-inline {
  padding-top: .75rem;
  padding-right: .75rem;
}

canvas {
  background-color: transparent;
  width: 100%;
  height: auto;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.updatebox {
margin: 1rem;
padding: 1rem;
background-color: white;

text-align: center;


}

/* --- FOR BIG SCREENS ONLY --- */
@media (min-width: 768px) {

  div#topcharname {
    display: none;
    padding-bottom: .75rem;
    margin-bottom: 5rem;

  }

  .splash-text {
    font-size: 1.15em;
    padding: .75em;
  }


  #facttitle {
    text-align:center;
    padding: 0;
  }

  .generate-button {
    text-align: right;
    padding-right: 2rem!important;
  }

  .options-button {
    text-align: left;
    padding-left: 3rem!important;
  }

  .right-border{
    border-right: 5px solid #ffffff;
  }

  /* .button-section {
    position: relative;
    padding-bottom: 6rem;
  } */

  .explain-section {
    flex: 0 0 100%;
    /* position: absolute;
        bottom: 0; */
    text-align: center;
    font-size: 0.9rem;
    vertical-align: middle;


    min-height: 5.2rem;
  }

}

/* --- FOR BOOTSTAP-SM --- */
@media (min-width: 576px) and (max-width: 768px) {
  .generate-button {
    padding-right: 3rem!important;
  }

  .options-button {
    padding-left: 0rem!important;
  }

  .nav li {
    font-size: 0.95rem;
  }


}

/* --- FOR SMALL SCREENS ONLY --- */
@media (max-width: 768px) {
  div#sidecharname, div.vhr, .footer-copyright {
    display: none;
  }

  .navbar-brand {
    font-size: 0.95rem;
  }

 .contentsGenAni:before, .contentsFantAni:before, .contentsRealAni:before {
   animation: none;
 }

.front-inline-logo {
  text-align:center;
  margin-left: auto;
  margin-right: auto;
}

 .generate-buttons {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
 }

 .navbar-toggler {
   padding-top: 0;
 }

}

/* --- FOR TINY SCREENS ONLY --- */
@media (max-width: 576px) {
  #brand-text {
    display: none;
  }



  .front-inline-logo {
    width: 40%;
  }

}

@media (max-width: 400px) {
  .nav li {
    font-size: 0.95rem;
  }

}