:root {
  --color0-5: rgba(85, 97, 112, 1);
  --color1:   rgba(105, 117, 132, 1);
  --color1-5: rgba(109, 139, 154, 1);
  --color2:   rgba(112, 160, 175, 1);
  --color2-5: rgba(136, 177, 180, 1);
  --color3:   rgba(160, 193, 185, 1);
  --color3-5: rgba(179, 204, 201, 1);
  --color4:   rgba(197, 214, 216, 1);
  --color4-5: rgba(207, 224, 226, 1);
  --color5:   rgba(236, 248, 248, 1);
}

*:focus {
  outline: none;
}

* {
  text-shadow: 1px 2px 3px rgba(105, 117, 132, .35);
}

body {
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  background-color: var(--color5);
}

a { cursor: pointer; }

.botoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: calc(100vh - 20px);
  padding: 10px;
}

.botoes div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.botao-grande {
  height: 30vh;
  width: 40vh;
  font-size: 5.3vh;
  border-radius: 50%;
  text-decoration: none;
  color: var(--color0-5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border: 3px solid var(--color2);
  box-shadow: 2px 2px 3px rgba(105, 117, 132, .25);
  background: var(--color3);
  background: -webkit-linear-gradient(var(--color3), var(--color4));
  background: -o-linear-gradient(var(--color3), var(--color4));
  background: -moz-linear-gradient(var(--color3), var(--color4));
  background: linear-gradient(var(--color3), var(--color4));
  font-weight: bold;
}

.botao-grande img {
  width: 100px;
}

/*.botao-grande#em { background-color: red; }
.botao-grande#ch { background-color: blue; }
.botao-grande#ch:hover { cursor: pointer; }
.botao-grande#ex { background-color: green; }
.botao-grande#co { background-color: purple; }*/

#darker {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .85);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  width: 600px;
  border: 1px solid black;
  box-shadow: 0px 0px 30px black;
}

#fading-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 35vh !important;
}

.popup-top-bar {
  background-color: rgb(50, 50, 50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  font-size: 2em;
  border-bottom: 1px solid black;
  font-weight: bold;
}

.popup-top-bar span {
  color: white;
  line-height: 30px;
  margin-left: 10px;
}

.popup-top-bar a {
  background-color: red;
  border: 1px solid rgb(75, 75, 75);
  line-height: 40px;
  width: 40px;
  margin-right: 5px;
  color: white;
  text-align: center;
}

.popup-content {
  padding: 5px 10px;
  font-size: 1.85em;
  background-color: rgb(200, 200, 200);
}

.popup-buttons {
  background-color: rgb(200, 200, 200);
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.popup-buttons a {
  padding: 5px;
  margin: 5px;
  background-color: rgb(100, 100, 100);
  color: white;
  border: 1px solid rgb(75, 75, 75);
  font-size: 1.6em;
}