/*----------GENERAL STYLING----------*/
html {
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body {
  background-color:#fff;
  background-size:initial;
  background-attachment:fixed;
  background-position:center;
  background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/46957117_e3IO6DgxrizjRb7.png');
  font-weight:400;
  font-family:'Montserrat', 'Arial', sans-serif;
  min-height:100vh;
}

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

a {
  color:#9c7400;
  text-decoration:none;
}

a:hover, a:active {
  color:#584200;
  text-decoration:underline;
  text-shadow:0 0 .55rem rgba(255,255,255,0.5);
}

img {
  max-width:100%;
}

p:last-child {
  margin-bottom:0;
}

hr {
  border:none;
  height:2px;
  background-image:linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.card-body {
  /*-- Fade in animation --*/
  -webkit-animation: fadein 2.5s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 2.5s; /* Firefox < 16 */
      -ms-animation: fadein 2.5s; /* Internet Explorer */
       -o-animation: fadein 2.5s; /* Opera < 12.1 */
          animation: fadein 2.5s;
}

.container-fluid {
  padding:3rem;
}

.card {
  background-color:#fff;
  color:#000;
  padding:1.5rem;
  border:1px solid rgba(0,0,0,0.15);
  box-shadow:0 0 1rem rgba(0,0,0,0.35);
  border-radius:0;
}

#navigation {
  position:sticky;
  top:0;
  width:100%;
  text-align:center;
  z-index:100;
}

.navbar {
  padding:.15rem .75rem;
  background-color:#e2ddd3;
  border-bottom:2px solid rgba(0,0,0,0.25);
}

.navbar-light .navbar-brand {
  font-size:1.55rem;
  color:#3d310f;
  transition:.5s;
}

.navbar-light .navbar-brand:hover {
  color:#9c7400;
}

.navbar-light .navbar-nav .nav-link {
  color:#9c7400;
}

.btn-primary {
  background-color:#e2ddd3;
  border:0;
  color:#9c7400;
}

.btn-primary:hover {
  background-color:#9c7400;
  color:#e2ddd3;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  background-color:#9c7400;
  border:0;
  color:#e2ddd3;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow:none;
}

.btn-primary.focus, .btn-primary:focus {
  box-shadow:none;
}

/*---------------------------- FADE IN ANIMATION ----------------------------*/

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}