@import url("http://fonts.googleapis.com/css?family=Nunito");

:root {
  --persian-green: #00ada0; 
  --st-tropaz: #2c5aa0;
  --wild-strawberry: #ff2a7f;
  --candlelight: #ffd91e;
  --violent-violet: #1a0856;
  --waikawa-gray: #606898;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito';
  background-color: var(--waikawa-gray);
}

.w-container {
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: whitesmoke;
}

.diff {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.diff5 {
  background-color: rgb(255, 119, 119);
}

.diff4 {
  background-color: rgb(255, 156, 119);
}

.diff3 {
  background-color: rgb(255, 255, 117);
}

.diff2 {
  background-color: rgb(202, 255, 122);
}

.diff1 {
  background-color: rgb(118, 255, 118);
}

.tiempo {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: darkgray;
}

.tiempo5 {
  background-color: rgb(255, 119, 119);
}

.tiempo4 {
  background-color: rgb(255, 156, 119);
}

.tiempo3 {
  background-color: rgb(255, 255, 117);
}

.tiempo2 {
  background-color: rgb(202, 255, 122);
}

.tiempo1 {
  background-color: rgb(118, 255, 118);
}

.area {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.area-programacion {
  background-color: #d28888;
}
.area-teoria {
  background-color: #84BCDA;
}
.area-datos {
  background-color: #F487B6;
}
.area-arquitectura {
  background-color: #F7A278;
}
.area-redes {
  background-color: #B288C0;
}
.area-software {
  background-color: #ABEDC6;
}
.area-grafica {
  background-color: #81A684;
}
.area-seguridad {
  background-color: #C8E9A0;
}
.area-hci {
  background-color: #7CE577;
}
.area-investigacion {
  background-color: #ffd395;
}
.area-machinelearning {
  background-color: #FED766;
}
.area-sistemas {
  background-color: #AEC5EB;
}
.area-industria {
  background-color: #B76D68;
}
.area-otro {
  background-color: #91AEC1;
}

.respuesta-head{
  font-weight: bold;
  margin-top: 10px;
}

.respuesta-fecha {
  color: var(--waikawa-gray);
  font-weight: bold;
}

.respuesta-texto {
  margin-bottom: 10px;
}

div.ramo_gigante {
  font-size: xx-large;
}

div.link {
  text-align: center;
  margin: 10px 20px;
}

#left {
  width: 400px;
  float: left;
}

#left {
  width: 400px;
  float: left;
}

select option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}