* {
  box-sizing: border-box;
  font-family: 'Playpen Sans', Arial, Helvetica, sans-serif;
}

img{
  height: 200px;
}


html {
  font-size: 62.5%;
}



body {
  padding-top: 80px;
  word-wrap: break-word;
  font-size: 1.6rem;
  background-color: rgb(109, 97, 49);
  color: white;
  display: flex;
  justify-content: center;
}


.active {
  color: yellow;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: orange;
}

.hidden {
  display: none;
}

.container-box {
  width: 90%;
  border-radius: 15px;
}

.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(229, 103, 3);;
  margin-bottom: 10px;
  border-radius: 15px;
}

.info {
  display: flex;
}

.user {
  padding: 10px 2%;
  display: flex;
  justify-content: center;
  width: 80%;
  text-align: center;
}

.user,
.entry,
.randomizer {
  width: 100%;
  background-color:rgb(255, 161, 61);
  margin: 1%;
  border-radius: 15px;
  ;
}

.password {
  width: 51%;
}

.unlink,
.connect-local,
.logout,
.login,
.signup {
  color: black;
  border: 1px solid green;
  border-radius: 15px;
  text-decoration: none;
  padding: 5px 5%;
  background-color:rgb(251, 223, 113);
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 1%;
  margin-right: 1%;
}

.entry{
  display: flex;
  flex-direction: column;
  width: 90%;
}

article{
  border: 2px solid green;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color:rgb(56, 52, 14);
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
  padding: 1%;
}

textarea{
  border-radius: 15px;
  padding: 1%;
  font-size: 1.8rem;
  margin-bottom: 15px;
  background-color: rgba(9, 45, 41, 0.6);
  color: white;
}

section{
  width: 90%;
}
form{
  display: flex;
  flex-direction: column;
}

.res-list-entry{
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-random{
  width: 30%;
}

.res-list{
  width: 90%;
  max-height: 700px;
  overflow: auto;
}

h2, h3, h4{
  text-align: center;
}

.res-input{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.res-input label{
  font-size: 1.5rem;
}

.res-input input{
  width: 19%;
  font-size: 1.8rem;
  border-radius: 15px;
  padding: 0.5%;
  margin-bottom: 5px;
}



.res-input button{
  font-size: 1.6rem;
  border-radius: 15px;
  padding: 0.5%;
  width: 10%;
  margin-bottom: 5px;
}

.options{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 1%;
}

.type-date{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

h4{
  margin: 1%;
  font-size: 1.9rem;
}

.editing{
  width: 90%;
}

.res-input-b input{
  width: 25%;
  font-size: 1.8rem;
  border-radius: 15px;
  padding: 0.5%;
  margin-bottom: 5px;
}

.res-input-b button{
  font-size: 1.6rem;
  border-radius: 15px;
  padding: 0.5%;
  width: 15%;
  margin-bottom: 5px;
}

.res-input-b{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edit-input{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.randomizer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.randomizer button{
  margin: 2%;
  padding: 1%;
  font-size:1.6rem;
  border-radius: 15px;
  width: 55%;
}
.disclaimer{
  text-align: center;
  font-size: 1.2rem;
}

#randomizedResult p{
  font-size: 1.8rem;
  text-align: center;
}

.well{
  width: 70%;
}

.jumbotron{
  background-color:rgb(229, 103, 3);
}