* {
	--separation:0px;
	--color-light: #FFF;
	--color-dark: #000;
	--color-main-dark: rgb(39, 79, 128);
	--color-main-light: #CCE;
}


body {
    margin:0;
    font-family:Poppins,Helvetica,Arial,sans-serif;
    font-size:1rem;
    font-weight:400;
    line-height:1.5;
    color:#1e2022;
    text-align:left;
    background-color:#e6e1e1
  }

a:link, a:visited, a:active{
	color:blue;
}

/* Nav configuration */

.bg-light{
	background:#f8f9fa;
}

/* content configuration */

main{
	position:relative;
}
section{
	padding: 10px;
	font-size:15PX;
}


footer{
	background-color: var(--color-main-dark);
	color:var(--color-main-light);
	font-size:0.7em;
	
}


.action{
	background-color: rgb(255, 255, 255);
}


/* inputs */

input{
	padding:6px;
	border-radius:5px;
	width:95%;
}

button{
	background-color: #3381a0;
	padding:6px;
	font-size:1.2em;
	border-radius:15px;
	width:100%;
	text-transform: uppercase;
	color:#ffffff;
}

pre{
	overflow:auto;
}

.dropdown-item{color:#222129 !important;}
@media (max-width: 992px) {
.navbar-toggler{display: contents !important;}
}
h1,h2,h3,h4{
	margin: 6px 0px;
}

section > pre{
	overflow:auto;
	margin:8px;
	background-color: var(--color-main-light);
	color:var(--color-main-dark);
	width:98%;
	padding:5px;
}

section.hints > div{
	display:inline-block;
	text-align: center;
	width:100%;
}
.testcode{
	height:32px;
}
.bg-lights{
    background:#ffffff !important;
}
.navbar-dark .navbar-nav .nav-link{
    color: #222129 !important;
    font-size: 15px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 10px;
}
@media (min-width: 768px) {
    .text-md-left {
      text-align: left !important;
    }
  }
  @media (min-width: 992px) {
    .mb-lg-6, .my-lg-6 {
      margin-bottom: 2.5rem !important;
    }
  }
  .font-weight-semi-bold {
    font-weight: 700 !important;
  text-transform: uppercase;
  }
  .font-weight-just-bold {
    font-weight: 600 !important;
  }
  .font-20px{
    font-size:23px;
  }
  .long-description {
    display: flex !important;
  }
  .text-secondary {
    color: #77838f !important;
  }
  @media (min-width: 576px) {
    .space-sm-2, .space-top-sm-2 {
      padding-top: 4rem !important;
    }
  }
  @media (min-width: 992px) {
    .w-lg-80 {
      width: 80% !important;
    }
  }
  .maxwidth200{
    max-width:300px;
  }
  .actions {
    display: flex;
    align-items: center;
    background: #e0e8f3;
    padding: 12px 24px;
	border-radius: 6px;
}
@media only screen and (min-width: 770px) {
    .actions-helper {
        display: block;
		color:#000000;
		font-size:15px;
    }
}
.actions-helper code {
    border: 1px solid;
    padding: 2px 4px;
    border-radius: 4px;
}
.actions-button {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    width: 86px;
    height: 32px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #2a81fb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    overflow: hidden;
    cursor: pointer;
    transition: all .25s ease-out;
}
.actions-button span {
    margin-left: 6px;
}