@import url('https://fonts.googleapis.com/css?family=Lemonada&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');


*{
    margin: 0;
    padding: 0;
}

/*Variables*/
:root{
--bannerBackground:rgba(178,255,255,0.7);
--bannerShadowColor:blue;
--bannerBorderColor:black;
}



#banner {
    color: rgb(255, 0, 0);
    width: 97%;
    font-size: 24px;
    background: url("tabla6.jpg");
    text-align: center;
    padding: 10px;
    margin: 5px 5px 20px 3px;
    border: 2px solid var(--bannerBorderColor);
    box-shadow: 1px 2px 3px var(--bannerShadowColor);
    font-family: 'Lemonada', cursive;
}

.Title{
    color:rgb(255, 0, 0);
    text-shadow: 1px 1px 2px black,-1px -1px 2px black;
}

#data{
    outline: none;
    color: #000000;
    background-color: aqua;
    border: none;
    padding: 12px;
    border: 1px solid var(--bannerBorderColor);
    width: 200px;
}

#data::placeholder, .bton{
    font-family: 'Roboto Condensed', monospace;
    font-size: 15px;
}

#dataCompletaBtn{
    width: 200px;
}

.bton{
        background: #000000;
        color:white;
        font-size: 15px;
        width: 120px;
        height: 40px;
        cursor: pointer;
        border: 1px solid black;
        overflow:hidden;
        position:relative;
}

#dataCompletaBtn{
    width:200px;
}

.bton:after {
    background: white;
    content: "";
    height: 155px;
    left: -75%;
    opacity: .25;
    position: absolute;
    top: -80%;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.20, 1, 0.22, 1);
    width: 50px;
  }
th{
    border: 10px;
    border-color: #ff0000;
}
.bton:hover:after{
    left:120%;
}

#dataList {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    display:flexbox;
    margin-left: 35px;
    margin-right: 890px;
}

#dataList li {
    color: rgb(0, 0, 0);
    border: 3px solid #ff0000;
    border-bottom: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 40px;
    text-align: center;
}
#dataList  li {
    list-style-position: inside;
    border-color: #ff0000;
    background: #ffffff;
    border-bottom: 3px solid #ff0000;
    border-top: 3px solid rgb(255, 0, 0);
    text-align: center;
}
a{
    color: #ff0000;
    font-size: 25px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin-left: 35px;
}
#dataList ul {
  border: 3px solid #ffffff;
  border-bottom: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  width: 180px;
  }
.reporte {
    background: #eeeff5;
    padding: 10px;
    color: rgb(0, 0, 0);
    font-size: 18px;
}
.reporte:empty {
    padding: 0;
}
.reporte span {
    padding: 10px;
}


#tablaDeFrecuencias{
    border-collapse : separate;
    width: 100%;
    border: 23px;
    background-color: #faf9ff;
}
tr:nth-child(even) {
    background: #00ffc8;
}