@import url('https://fonts.googleapis.com/css?family=Montserrat');

html body {
  font-family: 'Montserrat', sans-serif;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

a, a:hover, a:focus, a:visited {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

/* Home */

#homepage input {
  /* border-color: #000 !important; */
}

#homepage input::placeholder {
  color: #000 !important;
  font-weight: bold;
  font-size: .7rem !important;
}

#homepage button {
  font-weight: bold;
  font-size: .9rem !important;
}

/* Universal Modal */

#UniversalModal .modal  {
  background-color: #141414;
}
#UniversalModal .modal {
  display: block !important;
}

#HomeModal input {
  border-color: #000 !important;
}

#HomeModal input::placeholder {
  color: #000 !important;
  font-weight: bold;
  font-size: .7rem !important;
}

#HomeModal button {
  font-weight: bold;
  font-size: .9rem !important;
}

/* Lessons */
 #lesson-control {
  background-color: #14141D;
}

@media (max-width: 992px) {
  #header span {
    position: relative;
    left: 0px;
  }
}

#header .navbar {
  padding: 0 !important;
}

.navbar {
flex-wrap: nowrap !important;
}

.navbar-brand {
  color: #414042 !important;
  font-weight: bold;
}

nav .active {
  font-weight: bold;
}

nav li a {
  color: #ffffff;
}

nav a {
 color: #fff;
}
nav a:hover {
 color: #fff;
}

.navbar-toggler {
  padding: 0;
}
#title-bar {
  background-color: #000080;
}

/* Modal */

#LessonModal .modal-content {
  border-radius: 50px !important;
  width: 75% !important;
}

/* Side bar */

.wrapper {
    display: flex;
    align-items: stretch;
    position: fixed;
    right: 0;
    z-index: 1022;
}

.wrapper nav {
  background: #29283C !important;
}

#sidebar {
    min-width: 300px;
    max-width: 300px;
    min-height: 100vh;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-right: -300px;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
        min-width: 250px;
        max-width: 250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}


#sidebar .sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #15141E;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #15141E;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1em;
    display: block;
}

#sidebar ul li.active > a {
    background-color: #34324C
}

#sidebar .chapters {
 color: #4E72CF !important;
}

#sidebar ul li a:hover {
    color: #fff;
    background: #000080;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

/* Quiz */

#quiz-container {
  background-color: #29283C !important;
}
#quiz-chessboard {
  background-color: #1F1E2D;
}

#move {
  border-radius: 15px;
  background-color: #15141E;
}

#move .move-color-white i {
  color: #fff;
}

#move .move-color-black i {
  color: #000;
}

#choices ul li {
  background-color: #15141E;
}

#homepage {
    margin: 0 400px;
}

@media only screen and (max-width: 1200px) {
    #homepage {
        margin: 0px !important;
    }
}

/* Cards */

.card-body {
  background: #ffffff;
}

.card {
    min-height: 350px;
}

.card-img-top {
    height: 225px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}