/*@import "https://fonts.googleapis.com/css?family=Arimo";
@import "https://fonts.googleapis.com/css?family=Open Sans";
@import "https://fonts.googleapis.com/css?family=Quicksand";
@import "https://fonts.googleapis.com/css?family=Staatliches";
*/
@import "https://fonts.googleapis.com/css?family=Arimo";
@import "https://fonts.googleapis.com/css?family=Bitter";
@import "https://www.w3schools.com/w3css/4/w3.css";
@font-face{
    font-family: "Arimo";
    src:url(Arimo.eot);
        /*url(Arimo.woff) format('woff'),
        url(Arimo.ttf) format('truetype');*/
}

:root {
  --claro: #9ac19d;
  --oscuro: #1d422f;
}

h1,h2 {font-family: "Bitter";}
h3,h4,h5,h6 {font-family: "Arimo";}
h1,h2,h3,h4,h5,h6,p:hover{cursor: default;}
body {
  font-family: "Arimo";
  background-color: rgb(255, 255, 255);}
a{text-decoration: none;}
a:active, a:hover{
  color: var(--claro);
  cursor: pointer;
}
a:hover{
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
a{
  transition: all ease-in-out 0.2s;
}
#menu {
  padding: 0.5rem;
  color: #ffffff;
  background-color: var(--oscuro);
  font-family: "Arimo";
}

#banner {
  padding: 1rem;
  color: #ffffff;
  /*background-color: var(--oscuro);*/
  font-family: "Arimo";
  /*background-image: linear-gradient(var(--oscuro), #1c3227);
  background-image: linear-gradient(var(--claro), #92b395);*/
}
.banner-item {
  padding: 0.5rem;
  border-radius: 25px; 
  background-color: var(--claro);
}

#cuerpo {
  padding: 1rem;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex: 1;
  /*background-color: #e0e8e5;*/
  /*background-image: linear-gradient(45deg, #ffff, #ffff,#ffff,#ced8d4);*/
  /*background-image: linear-gradient(to right, #ced8d4, #ffff,#ffff,#ced8d4);*/
}
#pie{
  padding: 5px;
  text-align: center;
  background-color: var(--claro);
  color: #ffffff;
  font-family: "Arimo";
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
}

#fractalCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* para que quede detrás del contenido */
  width: 100%;
  height: 100%;
}

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

/* From Uiverse.io by felipesntr */ 
.boton_b {
  border: 2px solid var(--oscuro);
  background-color: var(--claro);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.5em 1.2em 0.5em 1em;
  margin: 3px;
  transition: all ease-in-out 0.2s;
  font-size: 16px;
}

.boton_b:hover {
  background-color: var(--oscuro);
  box-shadow: 0 2px;
  transform: translate(0, -2px);
  color: #fff;
}

.boton_c {
  border: 2px solid var(--oscuro);
  background-color: var(--oscuro);
  color: white;
  font-style: bold;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.5em 1.2em 0.5em 1em;
  margin: 3px;
  transition: all ease-in-out 0.2s;
  font-size: 16px;
}

.boton_c:hover {
  /*border: 2px solid rgb(164, 164, 164);var(--claro);*/
  background-color: rgb(63, 63, 63);
  box-shadow: 0 2px;
  transform: translate(0, -2px);
  color: rgb(164, 164, 164);/*var(--claro);*/
}

.boton_d {
  border: 2px solid rgb(164, 164, 164);
  color: rgb(63, 63, 63);
  background-color: rgb(225, 225, 225);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.4em 1em 0.4em 1em;
  margin: 3px;
  transition: all ease-in-out 0.2s;
  font-size: 16px;
}

.boton_d:hover {
  background-color: var(--claro);
  border: 2px solid var(--oscuro);
  color: var(--oscuro);
  box-shadow: 0 2px;
}

/*Para cambiar el color al seleccionar texto*/
::-moz-selection { /* Code for Firefox */
  color: var(--oscuro);
  background: var(--claro);
}

::selection {
  color: var(--oscuro);
  background: var(--claro);
}
/*CODIGO EJEMPLO PARA DROPDOWN
    <div class="dropdown">
        <button>Food</button>
        <div class="content">
            <a href="">Apple</a>
            <a href="">Orange</a>
            <a href="">Banana</a>
        </div>
    </div>
*/
.dropdown{
    display: inline-block;
}
.dropdown button{
    background-color: hsla(0, 0%, 0%, 0);
    color: white;
    border: none;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}
.dropdown a{
  background-color: var(--claro);
    display: block;
    color: black;
    text-decoration: none;
    padding: 5px 0px;
    transition: all ease-in-out 0.2s;
    border: 2px solid #1d423c;
    border-radius: 4px;
}
.dropdown .content{
    text-align: center;
    opacity: 0; /*Oculta el contenido*/
    transform: translateY(-10px); /*Lo pone "debajo" del menu dropdown*/
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    min-width: 100px;
    transition: all ease-in-out 0.2s;
}
.dropdown:hover .content{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.dropdown a:hover{
    color: white;
    font-weight: bold;
    background-color: #1d423c;
    border: 2px solid var(--claro);
    display: block;
    transition: all ease-in-out 0.2s;
}

/*
EFECTO SUBRALLADO ANIMADO. Ejemplo:
  <button class="underline">
      <img src="../imagenes/logo_casa.png" style="width:25px;filter: invert(100%);"></img>
      Magdalena Noé
  </button>
*/
.underline{
    position: relative;
    color: white;
    background-color: hsla(0, 0%, 0%, 0);
    border: none;
    cursor: pointer;

}
.underline::after{
content: '';
position: absolute;
height: 2px;
left: 0;
bottom: 0;
width: 0;
background: white;
transition: width .3s;
}

.underline:hover:after{
width: 100%
}

.hipervinculo{
    text-decoration: underline;
    color: #3a923c;
}
.hipervinculo:hover{
    color: var(--claro);
}

.copy_popup{
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--claro);
  color: var(--oscuro);
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
/* CANVAS:
<div id="contenedor_canvas">
  <canvas id="fractalCanvas"></canvas>
  <div id="sobre_canvas">
    <h2>Hola mundo</h2>
    <p>Todo este texto estara sobre el canvas</p>
  </div>
</div>

canvas {  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
#contenedor_canvas { 
  position: relative; 
  width: 100vw; 
  height: 100vh;}
#sobre_canvas {
  position: relative;
  z-index: 1;
}*/