/* https://www.w3schools.com/howto/howto_css_two_columns.asp */
/* https://developer.mozilla.org/es/docs/Web/CSS/box-sizing */
/* Así definimos el comportamiento de caja para todos los elementos */
* {
    box-sizing: border-box;
  }

h1  {

  color: red;

}

body  	{

  background-color: rgb(252 197 2);

}

#about:hover, #practicas:hover, #volver:hover, #mick:hover  {

  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
 

}

a:any-link {

  color: white;
  font-family: "Rouge Script", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 140%;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

}

#t2 {

  display: none;

}
  
/* Crear columnas de ancho diferente que se colocan una a continuación de la otra */
.columna {
  float: left;
  padding-top: 10px;

}

.izquierda {

  width: 30%;
  height: 685.2px;

  }

.derecha {
  width: 70%;
  height: 685.2px;

}

/* Clear floats despues de las columnas para eliminar la superposición */
.filla:after {
content: "";
display: table;
clear: both;
}

#c1 {
  background-color: black;
  border-radius: 25px;
}

/* estilos para imágenes https://www.w3schools.com/css/css3_images.asp */
/* posicionamiento de imágenes https://www.w3schools.com/css/css_positioning.asp */

img {
    width: 100%;
    height: auto;
}

.iresponsive {
    padding: 0 6px;
    float: left;
    width: 50%;
  }

/* Más sobre diseño web responsive https://www.w3schools.com/css/css_rwd_intro.asp */

.chewy-regular {
  font-family: "Chewy", serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  -webkit-text-stroke: 1px black;
}

#about  {

  width: 80%;
  height: clamp(10%, calc(695.2px - (0.101 * 100vw) - 492.362px), 20%);
  background-color: rgb(193 43 45);
  border: 3px solid rgb(106, 15, 17);
  padding: 0px;
  margin-left: 10%;
  margin-top: 2%;
  border-radius: 10px;

}

#practicas  {

  width: 80%;
  height: clamp(10%, calc(695.2px - (0.101 * 100vw) - 492.362px), 20%);
  background-color: rgb(253 196 2);
  border: 3px solid rgb(219 157 28);
  padding: 0px;
  margin-left: 10%;
  margin-top: max(calc(15px - 1vw), 10px);
  border-radius: 10px;

}


/*Imagen principal del curriculum*/

#princimg {

  height: min(50%, 27.5vw);
  width: auto;
  aspect-ratio: 1/1;
  border: 2px solid black;
  border-radius: 8%;
  background-color: #ccc;
  margin: auto;
  float: none;
  display: flex;
  padding: 6px;

}

#contacto {

  width: 100%;
  padding: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;

}

.titulos  {

  text-align: center;
  margin: 0;

}

#listacontactos {

  padding: 0 10%;
  width: 100%;
  color: white;
  margin-left: 5%;
  margin-top: 10px;
  margin-bottom: 10px;

}

#listacontactos li p {

  display: inline;
  font-size: 13.4px;
  word-break: break-all;

}

.lista  {

  padding-bottom: 5px;
  padding-top: 5px;

}

.fila {

  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0px;

}

.arriba {

  margin-top: clamp(0px, calc(900px - 92vw), 45%);
  height: min(22%, 10vw);

}

.abajo  {

  height: 65%;

}

#educacion, #idiomas {

  /*30% ancho*/
  width: 30%;
  height: auto;
  margin-left: 10%;
  margin-right: 10%;
  background-color: black;
  border-radius: 50%;
  aspect-ratio: 1/1;

}

#experiencia_laboral  {

  width: 48%;
  padding: 0;
  margin-left: 26%;
  background-color: black;
  border-radius: 50%;
  aspect-ratio: 1/1;

}

#educacion h2, #idiomas h2, #experiencia_laboral h2  {

  color: white;
  width: 70%;
  float: none;
  margin: auto;
  margin-top: 10%;
  padding: 0;
  font-size: 110%;

}

#experiencia_laboral h2 {

  margin-top: 8%;
  font-size: 135%;

}

dl {

  color: white;
  margin: 6%;
  margin-bottom: 0px;
  width: 88%;
  height: 50%;
  font-size: 0.95vw;
  padding: 0;
  padding-left: 2%;

}

dt {

  margin-top: 0.3vw;

}

dd  {

  margin-top: 0.15vw;
  margin-left: 3vw;

}

.listas {

  font-size: min(1.3vw, 16px);

}

#lista_grande {

  font-size: 0.8vw;
  width: 70%;
  margin-left: 10%;
  margin-top: 1%;
  word-break: break-word;
  font-family: Arial, Helvetica, sans-serif;

}

ul  {

  padding-left: 20%;

}


/* Responsive layout - cuando el ancho de pantalla es menor a 600px, muestra las columnas apiladas. */
/* Así conseguimos que el contenido se vea bien en dispositvos móviles */

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

  .columna {
    width: 100%;
    min-width: 255px;
  }

  .iresponsive {
      width: 100%;
  }

  #c1 {

    height: 100%;
    padding-top: 0;

  }

  #princimg {

    width: 94%;
    height: auto;
    margin: 3%;

  }

  #contacto {

    padding: 0;
    margin: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 80%;

  }

  #listacontactos {

    width: 90%;
    margin-top: 1%;
    margin-bottom: 1%;

  }

  #about, #practicas  {

    width: 90%;
    height: auto;
    aspect-ratio: 8/1;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 3%;

  }

  #practicas  {

    margin-top: 0;

  }

  #c2 {

    height: auto;
    min-width: 255px;

  }

  #educacion, #idiomas, #experiencia_laboral  {

    width: 100%;
    margin: 0px;
    margin-top: 5px;
    padding: 0 6px;
    aspect-ratio: 1/1;

  }

  #experiencia_laboral  {

    min-width: 255px;

  }

  .fila {

    padding: 0 10px;
    margin: 0;
    height: 100%;

  }

  .arriba {

    margin-top: 10px;

  }

  #educacion h2, #idiomas h2, #experiencia_laboral h2  {

    color: white;
    width: 70%;
    float: none;
    margin: auto;
    margin-top: 10%;
    padding: 0;
    font-size: 200%;
  
  }

  #experiencia_laboral h2 {

    width: 60%;
    margin-top: 8%;

  }

  .listas {

    padding-top: 8%;
    padding-left: 10%;
    font-size: 120%;

  }

  dd  {

    margin-top: 3%;
    margin-bottom: 5%;
    margin-left: 8%;
    font-size: 80%;

  }

  #lista_grande {

    padding: 0;
    padding-left: 7%;
    padding-top: 5%;
    padding-right: 7%;
    margin: 2%;
    width: 96%;
    font-size: max(2vw, 6.1px);

  }

}

/* CSS about me */

#c3 {

  width: 40%;
  height: 100%;
  min-height: 685.2px;

}

#c4 {

  width: 60%;
  height: 100%;

}

#volver  {

  width: 80%;
  height: clamp(10%, calc(695.2px - (0.101 * 100vw) - 492.362px), 20%);
  background-color: rgb(88, 88, 88);
  border: 3px solid rgb(0, 0, 0);
  padding: 0px;
  margin-left: 10%;
  margin-top: 2%;
  border-radius: 10px;

}

#mick  {

  width: 80%;
  height: clamp(10%, calc(695.2px - (0.101 * 100vw) - 492.362px), 20%);
  background-color: rgb(180, 0, 0);
  border: 3px solid rgb(53, 0, 0);
  padding: 0px;
  margin-left: 10%;
  margin-top: 0;
  border-radius: 10px;

}

.rectangulos  {

  background-color: rgba(8, 8, 8, 0.3);
  border-radius: 10px;
  border: 4px solid rgb(8, 8, 8);
  margin: 1%;
  width: 98%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;

}

#f1 {

  margin-top: 1%;
  height: 25%;
  margin-bottom: 0;

}

#f2 {

  margin-top: 0.5%;
  height: 65%;

}

#amigos {

  margin: 0;
  height: 100%;

}

#amigosi, #amigosd  {

  width: 40%;
  margin: 0;
  height: 100%;
  margin-left: 5%;

}

#amigos img {

  width: min(100%, 130px);
  border: 3px solid black;
  border-radius: 10px;
  margin-left: 15%;
  margin-top: 1%;

}

#amigos dl  {

  margin: 0;
  margin-bottom: 2%;

}

#amigos dt  {

  font-size: 17px;

}

#amigos dd  {

  font-size: 13.3px;
  margin-left: 10%;
  margin-top: 5%;

}

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

  #t1 {

    display: none;

  }

  #t2 {

    display: block;

  }

  #c3, #c4  {

    width: 98%;
    margin-left: 1%;
    min-height: 0;

  }

  #volver, #mick  {

    width: 96%;
    height: 10%;
    margin-left: 2%;
    margin-top: 2px;

  }

  .rectangulos  {

    margin-top: 8px;

  }

  #f2 {

    margin-top: 8px;

  }

  #amigosi, #amigosd  {

    width: 100%;

  }

  #amigos img {

    width: min(80%, 200px);
    margin-left: 10%;
    margin-top: 5%;
  
  }
  
  #amigos dt  {
  
    font-size: 30px;
  
  }
  
  #amigos dd  {
  
    font-size: 18px;
    margin-left: 8%;
    margin-top: 3%;
  
  }

}