:root {
  --main-color: #685C2A;
  --main-color-gradient: #D5BD8D;
  --secondary-color: #6B853B;
  --received-color: #4B946A;
  --font-main: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: none; 
    -webkit-user-select: none; 
    background-color:#685C2A;
    /*
    background-image: url('./back.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    */
    background-attachment: fixed;
    background-image:linear-gradient(top, var(--main-color) 0%, var(--main-color-gradient) 51%);
    background-image:-webkit-linear-gradient(top, var(--main-color) 0%, var(--main-color-gradient) 51%);
    background-image:-ms-linear-gradient(top, var(--main-color) 0%, var(--main-color-gradient) 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, var(--main-color)),
        color-stop(0.51, var(--main-color-gradient))
    );
    font-family: var(--font-main);
    font-size:18px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}
	
/* Container principal */
.app {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
}


/* Títulos */
.cl, .lit {
  text-align: center;
  font-family: var(--font-main);
  font-weight: bold;
  color: var(--main-color);
  margin-top: 0;
}

.cl {
  font-size: 50px;
}

.lit {
  font-size: 28px;
  margin-top: -10px;
}

/* Evento */
.event {
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  margin: 0 30px;
  padding: 5px 0;
  text-align: center;
}

@media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) {
  .event {
    font-size: 20px;
  }
}

.event.listening {
  background-color: var(--secondary-color);
  display: block;
}

.event.received {
  background-color: var(--received-color);
  display: none;
}

/* Loader */
.loader {
  border: 8px solid #ccc;
  border-top: 8px solid var(--main-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 0.4s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Animação de piscar */
@keyframes fade {
  0%, 100% { opacity: 1.0; }
  50% { opacity: 0.4; }
}

.blink {
  animation: fade 3s infinite;
}

/* Desenvolvedores */
.developers {
  margin-top: 10px;
  text-align: center;
}

.developers a {
  display: inline-block;
  margin-top: 10px;
  text-align: center;
}

.developers img {
  width: 200px;
  height: 200px;
  margin-top: 80px;
}