@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

Body {
  background-image: url("Imagen/fondo.jpg"); 
background-attachment: fixed;
background-color: white;
background-size: 100%;
margin: 0;
font-family: 'Anton', sans-serif;}

:root {
  --main-bg-color:rgb(0, 0, 0);
}

header {
padding-top: 15px;}

header nav 
{background-color: rgba(0, 0, 0, 0.85);
display:inline-block;
width: 100%;
}

.banner {
background-image: url("Imagen/fondo-bandera-paraguaya.jpg"); 
background-size:contain;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
color:rgba(191, 8, 90, 0);
-webkit-text-fill-color: transparent;
text-decoration:underline 4px white;
-webkit-text-stroke: 1px white;
font-size: 60px;
float:left;
position: relative;
width: 300px;
left: 30px;
margin-top: 0;
}

.check-boton {
font-size: 30px;
color:white;
float: right;
padding:20px;
margin-right: 20px;
cursor: pointer;
display:none;
}

#check{
  display:none;
}

header nav ul {
  font-family: arial;
list-style: none;
margin: 0;
float:right;
position: relative;
right: 30px;
}

header nav ul li{
display: inline-block;
height: 30px;
padding:45px 20px 0px 20px;
text-align: left;
position:relative;}

li a {text-decoration: none;
color: white;
display: block;}

header nav ul li a::before {
content:"";
width: 0%;
height: 3px;
left:0;
bottom: 5px;
background: #00bfff;
position: absolute;
transition: 0.3s ease-out;
}
header nav ul li a:hover::before {
width: 100%;
}

.encabezado {
  padding-bottom: 50px;
}
.imagentitulo{
  float:right;
  animation-name: imagenprincipal;
animation-duration: 2s;
transition-timing-function:ease-in;
}

@keyframes imagenprincipal 
{0% {clip-path: circle(0.0% at 100% 0);}
100%{clip-Path: circle(141.4% at 100% 0);}
}

.imagentitulo img {
width: 350px;
}

.iconos {
display: flex;
flex-wrap: wrap;
justify-content:space-around;
padding: 20px;
}
.iconos a{
text-decoration: none;
color: black;
}
.contenedor {
background-color: hsla(0, 0%, 100%, 0.80);  
display: block;
margin-top: -25px;
}

h1 {padding: 1rem 5%;
}
h2 {padding: 1rem 5%;}
p {
  font-family:Arial, Helvetica, sans-serif;
  padding: 0 8%;}
h3 {
  color:#black;
}

.idfotos {
  font-family: 'Oleo Script', cursive;
padding: 40px 0px;
display: flex;
width: 100%;    
background-color: black;
flex-wrap: wrap;
justify-content:space-evenly;
animation-name: aparecer;
animation-duration: 6s;
transition-timing-function: linear;} 

.zona {
  text-align: center;
}


@keyframes aparecer {
  0% {padding-top: 500px}
  100% {padding-top: 40px;}

}

.h4 {
  font-family: 'Oleo Script', cursive;
  text-decoration: underline;
  margin: 0;
  text-align: center;
  font-size: 3rem;
  color: black;
  background-color: #ff551b;
  position:relative;
animation-name: titulos;
animation-duration: 3s;
transition-timing-function: ease-out;
}
@keyframes titulos {
0% {left:-500px;
color: #00aae4;
background-color: black; 
clip-path: polygon(100% 0, 100% 0, 100% 100%, 78% 100%);}
100% { left:0px;
  background-color: #ff551b;
  color: black;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

}

section {float:left;
position: flex;
margin: 20px;
padding: 10px;
text-align: center;
box-shadow: 6px 6px 6px 0px #00aae4;
background-color: white;
border-radius: 0px 5px 5px 5px;
  }
  section img {
width: 230px;
height: 230px;
border-radius: 200px;
  }
  .capa {
    background-color: pink;
    width: 100%;
    text-align: center;
    padding: 10px;
   }
.iconos {
  text-align: center;
}
.iconos img {
  width: 180px;
animation-name: icono;
transition-property: widht;
animation-duration: 4s;
transition-timing-function: linear;
}

@keyframes icono{
  0% {width: 0%;}
  100% {width: 180px;}
}
article h3 {width: 250px;}


footer {
font-family:Arial, Helvetica, sans-serif;
  border-top: 1px solid #9208BF;
font-size: 1rem;
color: grey;
padding: 20px 0 20px 0;
display: flex;
margin:0;
background-color: black;
flex-wrap: wrap;
justify-content:space-evenly;
}
footer nav{
  height: 250px;
  box-shadow: 3px 3px 3px 3px #5B07B5;
}
footer ul {
  padding: 10px;
list-style: none;

}

footer ul li {
    padding: 5px;
    }

.mapa {
  text-align: center;
  background-color:black;
  box-shadow: 3px 3px 3px 3px #5B07B5;
  text-underline-position: auto;
  color:black;
}
.mapa h2{
  color: grey;
  padding: 10px;
}
.mapa h3 {
  color: grey;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.9rem;
}

@media only screen and (max-width: 860px) {

  body{background-image: url(/Imagen/textura-papel.avif);
  margin:0;}
  /*sidebar{display:none;}*/
  
  header {padding-top: 0;}


  .banner {
 left:0;

  }

  .check-boton {
    display:block;
    }
  nav{
    text-align: center;
  }
  header nav ul {
    font-family: 'Anton', sans-serif;
  display: block;
  z-index: 1;
  top: 90px;  
  position:absolute;
  width: 100%;
  height: 100vh;
  background-color: #ff551b;
  padding: 0;
  left: -100%;
  transition: all .5;
}
header nav ul li {
display: block;
text-align: center;
width: 100%;
margin: 0;
padding: 35px 0 35px 0;
font-size: 40px;
line-height: 30px;
box-shadow: #00bfff 0px 6px 0px -3px;
}
#check:checked ~ ul{
  left: 0px;
}
.imagentitulo{
  float: none;
  text-align: center;
} 
}