@font-face {
    font-family:  CaveatBrush ;
    src: url(fuentes/CaveatBrush.ttf);
}

@font-face {
    font-family:  Lost ;
    src: url(fuentes/Lost.ttf);
}

:root{
    --fondo-color: #ffffff;
    --fondo-transparente:   hwb(34 53% 13% / 0);

    --color-texto: rgb(71, 71, 71);
    --color-titulo:  rgb(17, 82, 50);
    --color-botones-hover:  rgb(253, 190, 25);
    --color-botones:  rgba(236, 234, 234, 0.695);
    --border-color: rgba(240, 248, 255, 0.684);
    --color-footer:  rgb(54, 54, 54);
    --color-sombra:  rgb(179, 177, 177);

    
    --fuente:    'Mulish', sans-serif;
    --fuente2:    Lost;
    --fuente-size-normal:  1.1em;
    --fuente-size-titulo:  1.2em;
    --fuente-size-sub:  1.4em;
    --fuente-texto-barra: 2em;
    --fuente-size-peke:  0.95rem;
   
}

*{
    margin: 0;
    top: 0;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

html{
    height: 100%;
}

body {
    font-family: var(--fuente);
    background: var(--fondo-color);
    color: var(--color-texto);
    font-size: var(--fuente-size);
    min-height: 100%;
}


.grid-container > * {
 background-color:var(--fondo-color);
} 

.header{
    grid-area: header;
    margin: 0;
    top: 0;
    background-color: var(--fondo-color);
}

.nav{
    grid-area: nav;
    background-color: var(--fondo-color);
    margin: 0;
    top: 0;
}




.pagina{
    grid-area: pagina;
    background-color: rgb(255, 255, 255);
    margin: 0;
    top: 0;
}



.footer{
    grid-area: footer;
    background-color: rgb(255, 255, 255);
    margin: 0;
    top: 0;
}

.grid-container{
    display: grid;
    gap: 5px;
    grid-template: 
    "header" 50px
    "pagina" auto
    "footer" auto;
}


.float{
	position:fixed;
	width:40px;
	height:40px;
	bottom:40px;
	right:10px;
  top: 68px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:6px;
}



@media (min-width:934px){
  
.grid-container{
    gap: 5px;
    grid-template: 
        "header header" 50px   
        "pagina pagina" auto
        "footer footer" auto;
    }

    .float{
        position:fixed;
        width:40px;
        height:40px;
        bottom:4px;
        right:15px;
      top: 5px;
        background-color:#25d366;
        color:#FFF;
        border-radius:50px;
        text-align:center;
      font-size:30px;
        box-shadow: 2px 2px 3px #999;
      z-index:100;
    }
    .float:hover {
        text-decoration: none;
        color: #25d366;
      background-color:#fff;
    }
    
    .my-float{
        margin-top:6px;
    }



}


@media (orientation: landscape) {




}