@charset 'UTF-8';

/* Common Breakpoints - use them to make your website even more responsive and set different css styles depedning on the size of the viewport/screen */
@media (max-width: 480px) {} /*Mobile devices*/
@media (max-width: 768px) {
  body.responsive{
    font-size: 1rem;
  }

  body.responsive main{
    margin: 0;
  }

  body.responsive .space{
    margin: 7rem;
  }

  body.responsive #cardGame .row{
    margin: 0;
  }

  body.responsive #cardGame #progressDiv{
    margin: 2rem auto;
  }

  body.responsive #responsiveVoice{
    text-align: center;
    margin-bottom: 10px;
  }

  body.responsive #paddingCopyright{
    padding: 30px; 
    height: 60px;
  }


} /*iPads, Tablets*/
@media (max-width: 1024px) {} /*Small screens, laptops*/
@media (min-width: 1900px) {
  body.responsive .space{
    margin: 16rem;
  }
} /*Desktops, large screens*/

/*How to add font locally*/
@font-face {
    font-family: 'Aptos'; /* Name your font family */
    src: url('../fonts/Aptos/Aptos.ttf'); /* Locate the .ttf file within your directory*/
  }

  @font-face {
    font-family: 'AptosMono'; /* Name your font family */
    src: url('../fonts/Aptos/Aptos-Mono.ttf'); /* Locate the .ttf file within your directory*/
  }

/* Favorite Font Families */
/* font-family: 'Lato', sans-serif; */
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Roboto', sans-serif; */
/* font-family: 'Ubuntu', sans-serif; */
/* font-family: 'Rubik', sans-serif; */
/* font-family: 'Aptos', sans-serif; */
/* font-family: 'AptosMono', sans-serif; */
/* font-family: Tahoma, Verdana, sans-serif; */


/*QUICK TIPS
How to center an inline element on the page: display:block; margin-left: auto; margint-right:auto
How to center a block element on the page: margin-left: auto; margint-right:auto
*/

body{
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: 'Lato', 'Aptos', 'Robot', 'Rubik', 'Ubuntu' sans-serif;
  height: 100%;
  vertical-align: middle;
  align-items: center;
  align-content: center;
}

body main {
  margin: 2rem auto;
}

body .btn{
  border: solid 1px black!important;
}

p{
    margin: 2rem auto;
}

p > span{
  font-weight: bold;
}  

.darkmode{
  background-color: #292d3e;
  color: white; /*#a6accd*/
}
  
.lightmode{
  background-color: white;
  color: black
}

.lightmode #sentencesTable .card .list-group-item{
  background-color: white;
  color: black;
}

.btn-group{
  margin-bottom: 0.5rem;
}

.navbar-collapse{
  text-align: center;
}

.icons{
  margin: auto 0.5rem;
  display: inline;
}

.card{
 margin: 2rem auto;
}

.space{
 margin: 14rem;
}


 #disclaimer{
  margin: 2rem auto;
  max-width: 70%;
 }

 #cardGame .row{
  margin: 4rem auto;
 }

 #mainCardCol{
  align-content: center;
 }

 .langInitials{
  font-weight: bold;
  cursor: pointer;
 }

 #controlBtn > .col{
  text-align: center;
 }

 #revealBtn{
  width: 8rem;
 }

 #startScreen{
  text-align: center;
 }

 #startScreen button{
  width: 60%;
 }

 #langButtons{
  margin: 2rem auto;
 }

 #langButtons .btn{
  width: 4rem;
  text-align: center;
  margin: 5px;
 }

 #cardGame #progressDiv{
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
 }

 .hidden, .hiddenSentences{
  display: none;
 }


#checkPoint, #sourceLanguage{display: none;}

#responsiveVoice{
    color: gray;
    text-align: right;
    font-size: 0.8rem;
    margin: auto 2rem;
}

#paddingCopyright{
  display: block; 
  padding: 20px; 
  height: 60px; 
  width: 100%
}

 #copyright{
  background-color: rgb(32, 32, 32);
  border-top: 1px solid rgb(63, 63, 63);
  text-align: center;
  padding: 20px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  width: 100%;
  color: white;
}

#copyright a{
  text-decoration: none;
}



#sentencesMain{
  margin: 2rem;
}

#sentencesTable .card, #notesTable .card{
  max-width: 50rem;
  border: 1px solid white;
}

#sentencesTable .card-header{
  font-weight: bold;
  text-align: center;
}

#sentencesTable .card li{
  background-color: #272B30;
  color:white;
}

#sentencesMain h1, #notesMain h1{
  text-align: center;
}

#searchInput{width: 100%;}

.searchHighlight{
  background-color: #f1b55c;
  opacity: 0.7;
  color: black;
}


#notesMain{
  margin: 2rem;
}

.spaceBetween{
  display: flex;
  justify-content: space-between;
}