@charset "UTF-8";

@font-face {
  font-family: ubuntu;
  src:url("../resources/Ubuntu-Regular.ttf");
}

@font-face {
  font-family: play;
  src:url("../resources/Play-Regular.ttf");
}

*{
  margin: 0px;
  padding: 0px;
}

header{
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0.3em;
  margin: 0.3em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#cabTitulo{
  color: rgb(194, 25, 61);
  font-family: play, helvetica;
  font-size: 1.3em;
  text-align: left;
  padding-top: 2em;
  background: linear-gradient(to right, white, black);
  flex-grow: 1;
}

#cabRamon{
  width: 200px;
  height: 200px;
  background-image: url("../images/donramon.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.teclado{
  background-color: rgb(194, 25, 61);
  padding: 3px 3px 6px 3px;
  width: 248px;
  border-radius: 0px 0px 10px 10px;
}

.botonera{
  /*width: 250px;*/
  margin: 5px 0px;
}

.botonera li>a, .teclado>a{
  font-family: ubuntu, helvetica, sans-serif;
  font-size: 1.3em;
  background-color: rgb(19, 16, 143);
  color: white;
  display: block;
  padding: 0.2em 0.2em;
  margin: 0px 3px;
  text-decoration: none;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
}

.botonera li>a:hover, .teclado>a:hover{
  background-color: rgb(90, 88, 164);
}

input{
  font-size: 1.3em;
  width: 250px;
  border-radius: 10px 10px 0px 0px;
  text-align: right;
}

nav{
  margin: 0.3em;
}

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

ul li{
  flex-grow: 1;
}

#cabBotons li>a{
  display: block;
  font-family: ubuntu, helvetica, sans-serif;
  background-color: rgb(194, 25, 61);
  color: white;
  padding: 0.5em;
  margin-right: 3px;
  text-decoration: none;
  text-align: center;
  border-radius: 20% 20% 20% 20%;
}

#cabBotons li>a:hover{
  background-color: rgb(196, 102, 122);
}

section{
  font-family: ubuntu, helvetica, sans-serif;
  /*font-size: 20px;*/
  margin: 0.3em;
  padding: 20px;
  padding-left: 40px;
  border-top-left-radius: 20% 25px;
  border-top-right-radius: 20% 25px;
  border-bottom-left-radius: 20% 25px;
  border-bottom-right-radius: 20% 25px;
  background-color: #a8aeff;
  /*display: flex;
  flex-wrap: wrap;*/
}

section h1, section h2, section h3, section h4 {
  color: #1252b3;
  font-family: ubuntu,helvetica;
}