@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;500;900&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Inconsolata', monospace;
  font-size: 20px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color:#202020;
  color:rgb(190, 190, 190);
}

h1{
  font-size: 35px;
  letter-spacing: 3px;
  font-weight: 200;
}
.text-center{
  text-align: center;
}
.comment{
  font-style:italic;
  font-size: 15px;
  font-weight: 400;
  color:rgb(140, 140, 140);
}
.accent{
  font-size: 22px;
  font-weight: 800;
  color:rgb(240, 62, 62);
}
.acccentbis{
  font-size: 15px;
  font-weight: 300;
  color:rgb(240, 62, 62);
  font-style:italic;
}


.p-0{padding:0px;}.p-1{padding:2px;}.p-2{padding:4px;}.p-3{padding:15px;}.p-4{padding:22px;}.p-5{padding:30px;}
.pt-1{padding-top:2px;}.pt-2{padding-top:4px;}.pt-3{padding-top:15px;}.pt-4{padding-top:22px;}.pt-5{padding-top:30px;}
.pb-1{padding-bottom:2px;}.pb-2{padding-bottom:4px;}.pb-3{padding-bottom:15px;}.pb-4{padding-bottom:22px;}.pb-5{padding-bottom:30px;}
.pl-1{padding-left:2px;}.pl-2{padding-left:4px;}.pl-3{padding-left:15px;}.pl-4{padding-left:22px;}.pl-5{padding-left:30px;}
.pr-1{padding-right:2px;}.pr-2{padding-right:4px;}.pr-3{padding-right:15px;}.pr-4{padding-right:22px;}.pr-5{padding-right:30px;}
.m-0{margin:0px;}.m-1{margin:2px;}.m-2{margin:4px;}.m-3{margin:15px;}.m-4{margin:22px;}.m-5{margin:30px;}
.mt-1{margin-top:2px;}.mt-2{margin-top:4px;}.mt-3{margin-top:15px;}.mt-4{margin-top:22px;}.mt-5{margin-top:30px;}
.mb-1{margin-bottom:2px;}.mb-2{margin-bottom:4px;}.mb-3{margin-bottom:15px;}.mb-4{margin-bottom:22px;}.mb-5{margin-bottom:30px;}
.ml-1{margin-left:2px;}.ml-2{margin-left:4px;}.ml-3{margin-left:15px;}.ml-4{margin-left:22px;}.ml-5{margin-left:30px;}
.mr-1{margin-right:2px;}.mr-2{margin-right:4px;}.mr-3{margin-right:15px;}.mr-4{margin-right:22px;}.mr-5{margin-right:30px;}

.btn1{
  font-size: 30px;
  letter-spacing: 4px;
  font-weight: 200;
  cursor: grab;
}
.btn2{
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 300;
  cursor: grab;
}
.btnIcon{
  position: absolute;
  left: 50px;
  top: 50px;
  cursor: grab;
}
.btnIcon a i{
  font-size: 40px;
  font-weight: 900;
  color:rgb(92, 92, 92);
  cursor: grab;
}
.btnIcon a i:hover{
  color:rgb(155, 153, 153);
}
.btn1:hover, .btn2:hover{
  border-bottom: solid rgb(190, 190, 190) 1px;
}

input{
  background-color: rgb(190, 190, 190);
  color: #202020;
  border: solid rgb(190, 190, 190) 1px;
  text-align: center;
  font-size: 17px;
}

.clue{
  border-top: solid rgb(190, 190, 190) 1px;
  cursor: grab;
}
.clue:hover{
  background-color: #3d3d3d;
}

#counter{
  position: absolute;
  right: 50px;
  top: 10px;
}
#counter p{
  color:rgb(140, 140, 140);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 2px;
}

.flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items:center;
}
.list-unstyled {
	list-style: none;
}
small{
  font-size: small;
}
.hovershow{
  opacity:0.1;
  position:relative;
  color:#000000;
  font-size: 16px;
}
.hovershow:hover{
  opacity:1;
  filter: drop-shadow(5px 5px 2px #000000);
}