body{
  font-family: 'Rubik', sans-serif;
  background-color: #FFF8E7;
  color: #333333;
}

html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

@keyframes grow {
                from {
                    opacity: 0%;
                }
                to {
                    opacity: 100%;
                }
}

main{
  margin-top: 60px;
}
main > .container {
  padding: 12px 16px 0;
}

main > .container p {
  padding: 12px 36px 12px;
  font-size: 18px;
}

.main_menu a{
  border-bottom: #FFA500 2px solid;
  color: #FFA500;
  margin-left: 16px;
}

.main_menu a:hover{
  color: #0071B3;
}

.logo a{
  color: #333;
  font-weight: 900;
  font-style: italic;
  text-decoration: none !important;
  
}

.logo img{
  width: 120px;
}

#dutchionary_function, #sentence_function{
  margin-bottom: 120px;
  animation-name: grow;
  animation-duration: 2s;
  animation-fill-mode:forwards;

}

#dutchionary_def{
  background-color: #fff;
  padding: 20px;
  border: 12px solid #FFA500;
  display: none;
  animation-name: grow;
  animation-duration: 2s;
  animation-fill-mode:forwards;
  margin-bottom: 36px;

}

.definition h2{
  font-weight: 900;

}

.examples{
  color: #FFA500;
  margin-top: 28px; 
}

.examples h4{
  font-weight: 900;
  color: #FFA500;
  border-top: solid 2px #FFA500;
  padding-top: 12px;
  margin-top: 28px;
  
}

#werkwoord{
  padding-top: 16px;
  margin-top: 16px;
  color: #929292;
  border-top: dashed 1px #929292;
}

#english_translation{
  color: #929292;
  font-style: italic;
  font-weight: 900;
  padding-left: 24px;
  text-transform: uppercase;
  margin-bottom: 12px;
}



.bottom_form{
  margin-left: 18px;
}

h1{
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF8E7;
  background-color: #FF3434;
  padding: 12px 36px 12px;
}

a{
  color: #0071B3;
}

#word{
  min-width: 360px;
  height: 60px;
}

#document{
  min-height: 360px;
}

#get_dutchionary, #get_sentence, #get_document{
  margin-top: 12px;
}

#loader{
  display: none;
}

.main_bottom a{
  margin-left: 16px;
}

.btn{
  border: 0px;
  border-radius: 0 0 0 0;
}

.btn-primary{
  background-color: #0071B3;
}

.btn-secondary{
  background-color: #FFA500;
}

.visually-hidden{
  color: #FFA500;
  padding: 24px;
  font-weight: 900;
}

.badge{
  text-transform: uppercase;
}

.white_text{
  color: #fff9e7;
}


/* login */
.login {
  min-height: 100vh;
}

.bg-image {
  background-image: url('img/style_van_gogh.jpg');
  background-size: cover;
  background-position: center;
}

.login-heading {
  font-weight: 300;
}

.btn-login {
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  padding: 0.75rem 1rem;
}

/* sign up */
.card-img-left {
  width: 45%;
  /* Link to your background image using in the property below! */
  background: scroll center url('img/cat_van_gogh.jpg');
  background-size: cover;
}

.bottom_form button{
  margin-right: 24px;
}

#translated p{
  background-color: #fff;
}

#user_login button{
  margin-top: 24px;
  margin-bottom: 24px;
}

.title-form{
  font-weight: 900;
}

.error-message-form{
  padding: 24px 12px;
  margin-bottom: 24px;
}

.text-end a{
  margin-right: 16px;
}

.image-highlight{
  margin: 92px 0 48px;
  width: 100%;

}

.btn-outline{
  border: 2px #0071B3 solid;
  color: #0071B3 !important;
  padding: 12px;
  margin-left: 24px;
}

.btn-outline:hover{
  background-color: #0071B3;
  color: #fff !important;
}

#save_translation_form input, #save_translation_form textarea{
  margin-top: 12px;
}


.doc_info{
  background-color: #FFA500;
  color:  #fff;
  padding: 12px;
  margin-bottom: 36px;
  font-weight: 700;
  text-transform: uppercase;
  
}

#document_translated{
  background-color: #fff;
  padding: 0 16px 24px;
  color: #0071B3;
}

#document_translated h3{
  text-transform: uppercase;
  font-weight: 900;

}

#document_translated details{
  color: #000;
  margin-bottom: 16px;
}

#document_translated button, #document_translated a, #delete_document{
  margin-left: 12px;
  text-transform: uppercase;
  font-size: small;
  font-weight: 900;
  background-color: #708090;
  color: #fff;
  padding: 12px;
}

#document_translated button:nth-child(1){
  margin-left: 42px;
}

#document_translated a:nth-child(2){
  background-color: #0B6623;
}

#translated_list{
  background: #ffe4b5;
  padding: 16px;
}

#translated_list h2{
  
  margin: 0 0 32px 0;
  color: #fff;
  background-color: #FFA500;
  padding: 12px 16px;
}

#translated_list table a{
  color: #0071B3;
}

#translated_list table td:nth-child(1){
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  padding-bottom: 24px;
  padding-left: 16px;
}

#translated_list table td:nth-child(2){
  color: #000;
  font-weight: 300;
  font-size: small;
}

#greetings-div{
  background-color: #FFA500;
  padding: 16px 36px 16px 36px;
}

#greetings-div p{
  width: 50%;
  float: left;
}

#greetings-div a{
  float: right;
}

#forgot_password input[type="submit"]{
  background-color: #0071B3;
  color: #fff;
  padding: 16px 36px 16px 36px;
  font-weight: 900;
  text-transform:uppercase;
  border: none;
  
}


#forgot_password input[type="email"]{
  padding: 12px;
  width: 90%;
  border-radius: 0;
}


#forgot_password{
  margin-bottom: 120px;
  font-weight: 700;
}

#save_translation_form textarea{
  min-height: 250px;
  height: 100%;
}

#sticky-footer a{
  background-color: #f0f0f0;
  font-size: 12px;
  padding: 2px;
  margin-left: 12px;
  color: #000;
}

#sticky-footer a:hover{
  color: #FFA500;
}