@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');

html, body {
  scroll-behavior: smooth;
  margin: 0px;
  background-color: #4d0019;
}

/*INICIO*/

#inicio{
  background-image: url(../sanseverino/img/inicio/fondo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

#titulo0{
  display: flex;
  float: right;
  margin-top: 20vh;
  margin-right: 7vw;
  font-family: 'Dancing Script', cursive;
  font-size: 7.5vw;
  color: white;
}

#botones{
  padding-top: 13vh;
  margin-left: 6vw;
  width: 20vw;
}

#boton1{
  padding: 3vh;
  margin-left: 3vh;
  margin-bottom: 3vh;
  background-color: #4d0019;
  width: 20vw;
  text-align: center;
  border-radius: 15px;
}

#boton2{
  padding: 3vh;
  margin-left: 3vh;
  background-color: #4d0019;
  width: 20vw;
  text-align: center;
  border-radius: 15px;
}

#boton3{
  padding: 3vh;
  margin: 3vh;
  background-color: #4d0019;
  width: 20vw;
  text-align: center;
  border-radius: 15px;
}

#boton4{
  padding: 3vh;
  margin: 3vh;
  background-color: #4d0019;
  width: 20vw;
  text-align: center;
  border-radius: 15px;
}

#boton5{
  padding: 3vh;
  margin: 3vh;
  background-color: #4d0019;
  width: 20vw;
  text-align: center;
  border-radius: 15px;
}

.boton a{
  align: center;
  color: white;
  text-decoration: none;
  font-family: 'Secular One', sans-serif;
  font-size: 1.5vw;
}

.boton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 20px #4d0019;
}

#subtitulo0{
  text-align: center;
  width: 30vw;
  margin: auto;
  margin-top: 4vh;
  font-family: 'Secular One', sans-serif;
  font-size: 3vw;
  color: white;
}

#volver{
  position: absolute;
  top: 8px;
  right: 16px;
}

/*PERFIL*/

#perfil{
  background-color: #4d0019;
  height: 100vh;
  width: 100vw;
}

#titulo1{
  color: #4d0019;
  font-family: 'Dancing Script',   cursive;
  text-align: center;
  background-color:  #ffcccc;
  font-size: 60px;
  border-style: solid;
  border-color: #4d0019;
}

#fotoperfil{
  display: flex;
  float: right;
  margin-left: auto;
  margin-right: 12vw;
  margin-bottom: 5vh;
  border-style: solid;
  border-color: #330000;
  border-width: 5px;
}

li{
  font-family: 'Secular One', sans-serif;
  font-size: 3.8vh;
  color: white;
  padding-top: 4vh;
  margin-left: 9vw;
}

.botonfuturo a{
  color: white;
  text-decoration: none;
  font-family: 'Secular One', sans-serif;
  font-size: 1.5vw;
}

#futuroboton{
  background-color: #990030;
  width: 10vw;
  text-align: center;
  border-radius: 15px;
  margin-top: 7vh;
  margin-left: 30%;
}

#futuroboton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 30px #990030;
}

/*FUTURO*/

#futuro{
  background-color: #4d0019;
  height: 100vh;
  width: 100vw;
}

.texto1{
  font-family: 'Secular One', sans-serif;
  font-size: 3.6vh;
  color: white;
  text-align: center;
  margin-left: 4.5vw;
  width: 90%;
}

#textofuturo{
  width: 100vw;
}

#fotos{
  display: flex;
  flex-direction: row;
  margin-bottom: 3vh;
}

#fotofuturo{
  margin: auto;
}

.botonillia a{
  color: white;
  text-decoration: none;
  font-family: 'Secular One', sans-serif;
  font-size: 1.5vw;
}

#illiaboton{
  background-color: #990030;
  width: 15vw;
  text-align: center;
  border-radius: 15px;
  margin: auto;
}

#illiaboton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 30px #990030;
}

#fotofuturo:hover{
 transform: scale(1.15);
}

/*ILLIA*/

#illia{
  background-color: #4d0019;
  height: 120vh;
  width: 100vw;
}

.texto2{
  font-family: 'Secular One', sans-serif;
  font-size: 3.6vh;
  color: white;
  text-align: center;
}

#fotosillia{
  margin-left: 1.5vw;
}

#fotoillia:hover{
  transform: scale(1.35);
  transition: transform 1s;
}

#galeriaboton{
   background-color: #990030;
  width: 15vw;
  text-align: center;
  border-radius: 15px;
  margin: auto;
  margin-top: 1vw;
}

.botongaleria a{
  color: white;
  text-decoration: none;
  font-family: 'Secular One', sans-serif;
  font-size: 1.5vw;
}

#galeriaboton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 30px #990030;
}

/*GALERIA*/

#galeria{
  background-color: #4d0019;
  height: 165vh;
  width: 100vw;
  margin-top: 3vw;
}

#contenido{
  width: 95%; 
  height: 7%; 
  position: absolute;
  left: 2.5%; 
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 700px;
  margin: 0 auto;
  transition: all 150ms linear;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}

/*RANDOM*/

#random{
  background-color: #4d0019;
  height: 100vh;
  width: 100vw;
}

#textorandom{
  font-family: 'Secular One', sans-serif;
  font-size: 3.9vh;
  color: white;
  text-align: center;
  margin-left: 4.5vw;
  width: 90%;
}

#receta{
   font-family: 'Secular One', sans-serif;
  font-size: 3.4vh;
  color: white;
  padding-top: 3vh;
  margin-left: 1.3vw;
  width: 50%;
  text-align: justify;
}

#carrot{
  display: flex;
  float: right;
  margin-left: 3vw;
  margin-right: 8vw;
  margin-bottom: 5vh;
  border-style: solid;
  border-color: #330000;
  border-width: 5px;
}

.botoninicio a{
  color: white;
  text-decoration: none;
  font-family: 'Secular One', sans-serif;
  font-size: 1.5vw;
}

#inicioboton{
  background-color: #990030;
  width: 10vw;
  text-align: center;
  border-radius: 15px;
  margin-top: 7vh;
  margin-left: 30%;
}

#inicioboton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 30px #990030;
}


.subir{
  position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 2.5vw;
    margin-bottom: 1.5vw;
    z-index:2;
}