/*
* Tags
*/

:root {
  --button-color: #dfe5ed;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #272829;
  padding: 40px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}
form {
  display: flex;
  margin-top: 2em;
}
input {
  border: 2px solid #272829;
  width: 20em;
  height: 2em;
  padding: 1em;
}

button {
  background-color: var(--button-color, rgb(197, 65, 65));
  width: 20em;
  height: 3.7em;
  padding: 1em;
  color: aliceblue;
  font-size: 15px;
}

button:hover {
  background-color: rgb(122, 165, 147);
  width: 20em;
  height: 3.5em;
  font-size: 16px;
}

section {
  display: flex;
  flex-direction: column;
  border: 2px solid #e9ebed;
  min-width: 10em;
  max-width: 20em;
}

/*
* Clases, IDs and KeyFrames
*/

.screen {
  color: #525354;
  border: 8px solid #dfe5ed;
  border-radius: 1%;
  display: flex;
  padding: 0em 2em 0em 1em;
  margin-bottom: 0.5em;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}
.screen {
  color: #525354;
  border: 8px solid #dfe5ed;
  border-radius: 1%;
  display: flex;
  padding-left: 2em;
  margin-bottom: 0.5em;
  flex-direction: column;
}

.answers {
  align-items: flex-end;
  justify-content: right;
  text-align: right;
  font-size: 12px;
  padding-right: 0.1em;
}

.btns {
  display: inline-flex;
  background-color: var(--button-color);
  color: #3c3e3f;
  border: 2px solid #bcbfc2;
  border-radius: 5%;
  height: 3em;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.btns:hover {
  transition: 0.8s;
  background-color: #bccfed;
}

.btns:active {
  transition: 0.6s;
  background-color: #1c1e23;
}

.cancel {
  display: inline-flex;
  background-color: #dfe5ed;
  color: #6287ac;
  border: 2px solid #c6cace;
  border-radius: 5%;
  height: 3em;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.cancel:hover {
  transition: 0.8s;
  background-color: #bccfed;
}

.cancel:active {
  transition: 0.6s;
  background-color: #1c1e23;
}

.beep {
  animation-name: beeps;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes beeps {
  50% {
    opacity: 0.1;
  }
}