@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Regular.ttf') format('ttf'),
  }

html{
    /*background: #ABC3C3;*/
    background: #212121;
    /*background-image: url("../img/hatter.png");
    background-size: cover;
    backdrop-filter: blur(10px);*/
}

.jumbotron {
    background: #212121;
}
body {
    color:#ABC3C3;
}
b {
    color:#ABC3C3
}
img {
    vertical-align: top;
  }

.table {
    color:#ABC3C3 !important;
    background-color: transparent !important;
}

h1{
    color: #42C1C7;
    font-family: 'Orbitron', sans-serif;
}

main{
    background: #212121;
    margin-top: 1em;
}

.bg-dark{
    background: #212121 !important;
}

.navbar {
    border: #42C1C7;
    border-width: 20px;
    padding-bottom: 1em;
    background: #212121;
}

.navbar-dark .navbar-nav .nav-link {
    color: #ABC3C3;
    font-family: 'Orbitron', sans-serif;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #42C1C7;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #212121;
  border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255);
  background-color: #ABC3C3;
}


a:hover {
    color: #42C1C7;
}

a{
    color: #42C1C7;
}

.modal-content{
    background: #212121;
    border-radius: 8px;
    border-width: 8px;
    border-color: #42C1C7;
    max-width: 800px;
    padding: 1em;
    margin: 0 auto;
}

.close {
    color: #42C1C7;
    opacity: 1;
}

.form-control:focus {
    background-color: transparent !important;
    border-color: #42C1C7;
    box-shadow: 0 0 0 0.1rem #a3d39c;
    transition: background-color .3s,border-color .3s;
    color: #42C1C7;
}

.key-submit .btn {
    height: 64px;
    border-radius: 8px;
}

.form-control {
    position: relative;
    display: block;
    padding: 1.2em !important;
    border-radius: 8px;
    background: transparent !important;
    color: #42C1C7;
    font-weight: 400;
    font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
    height: auto !important;
}

canvas {
    background: #ABC3C3;
    border-radius: 8px;
    border: #295855;
    border-width: 20px;
    padding-bottom: 3em;
}

.btn-dark {
    color: rgb(255, 255, 255);
    background-color: #343A40;
    border-color: #343A40;
  }

.btn-dark:hover {
    background-color: #ABC3C3;
    text-decoration: none;
    border-color: #42C1C7;
    border-width: 4px;
}

.btn {
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: left;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    padding: 8px 20px;
}

.btn-primary:hover {
    color: rgb(255, 255, 255);
    background-color: #42C1C7;
    border-color: #212121;
}

.btn-info {
    background-color: #42C1C7 !important;
    color: #212121 !important;
}

.challenge-button {
    box-shadow: none !important;
    background-color: #212121;
    color: #ABC3C3 !important;
    border-width: 4px;
    border-color: #ABC3C3;
  }

  .solved-challenge {
    opacity: 1;
    border: none;
    background-color: #42C1C7 !important;
    color: #212121 !important;
  }



.input-filled-valid {
    border-color: #343A40 !important;
    /*box-shadow: #343A40 0px 0px 0px 0.1rem;*/
    transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s;
    background-color: transparent !important;
    box-shadow: none !important;
  }

.w-100 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.btn-primary {
    color: rgb(255, 255, 255);
    background-color: #42C1C7;
    border-color: #42C1C7;
}