/* SINTAXIS: selector + propiedad + valor
selector {propiedad: valor}*/

/* VIEWPORT: Tamaño total que tiene a disposición (como el margen) si le quiero indicar a la imagen que ocupe 50 puntos de pantalla de ancho, se pone como 50 vw NOTA: EL HEIGHT ES VH Y EL WIDTH ES VW pero ambos son viewports */

/* DIFERENCIA ENTRE VIEWPORTS Y PORCENTAJE: viewports es sobre el tamaño de la pantalla, el porcentaje es sobre el tamaño del padre (Artículo, sección, whatever) los pixeles NO se adaptan, siempre ocupan los mismos pixeles */
@font-face {
    font-family:"plotfont";
    src: url(../Media/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}
body{background-color: #EADDC8;font-size: 16px;}
/* SI AL FONDO LE QUIERO APLICAR UNA IMAGEN PONEMOS BACKGROUND-IMAGE */
h1{color:#3A1E1E;font-size: 40px;font-family:"plotfont",serif;text-align: start;}
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  flex-wrap: wrap;}
.header-left {display: flex;align-items: center;gap: 15px;flex: 1;min-width: 250px;}
.site-text {display: flex;flex-direction: column;justify-content: center;text-align: left;}
.site-title {margin: 0;white-space: nowrap;}
/* Unidades de medida: px (texto usualmente) em y rem usualmente ancho y alto */

/*PRIMERA MANERA DE TRAER FUENTES:  Para la fuente puedo ir a google fonts, seleccionar cualquiera, él da un ejemplo de la fuente y le damos get font, le damos get embed code  y ahí puedo clickear import y copiar la linea sin la etiqueta style, en el inicio del css pegamos como @import url, luego podemos poner font family y copio y pego el family EN LA ETIQUETA DONDE NECESITO EL ESTILO */

/* SEGUNDA MANERA DE TRAER FUENTES: Descargo la fuente y la guardo en media, luego ponemos @font face, esa recibe dos propiedades font family y src en font family ponemos un nombre x, luego en source ponemos ./ y el archivo de la fuente. Luego más abajo ponemos ya en la etiqueta que le vayamos a dar estilo font-family (el nombre de la fuente) */

p{color:#4A3B36;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;text-align: justify;white-space: pre-line;line-height: 1.6;margin-bottom: 20px;}
.home-description {display: flex;align-content:center;}
.center-video iframe {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
h2 {color: 	#5C3C34;}
.tagline {
  font-weight: 400;
  font-size: 2.1rem;
  margin: 0;
}
.subtitle {color:	#5C3C34;}
/* El punto subtitle es una class, como es específico, se salta la regla del estilo de h2  */
ol{color:	#9C5C55; text-decoration: none;}
ul{color: 	#9C5C55;text-decoration: none;}
.steps {list-style-type:upper-roman;text-decoration: none;}
.logo{width: 14vw;height: 18vh;max-width: 200px;max-height: 200px; border-radius: 50%;object-fit:fill;object-position:right;}
/* Para hacer el logo circular, solo ponemos .logo que es la class con la que puse el logo en
index.html y luego ponemos las características - object fit es para que no se deforme y border
radius es para que sea circular*/
.left-side{display: flex;align-items: center;gap: 15px;}
.our-links {
  display: flex;
  /* el flex organiza los elementos para que no quede tan desordenado */
  flex-direction: column;
  justify-content: flex-end;
  align-items: left;
  gap: 12px;
  margin-right: 20px;
  margin-top: 20px;
  min-width: 250px;
}
.our-links a {
  background-color: #EADDC8;
  color: #3A1E1E;
  text-decoration: underline;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 4px 8px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  width: fit-content;
  display: flex;
  justify-content: end;
  position: sticky;
  left: 100vh;
}

/* PARA UN RESETEO BÁSICO SE PONE *( margin:0 padding:0 box-sizing: border-box) esto para que la página no tenga bordes y cositas que vienen de default*/

/* PARA ELIMINAR EL PUNTO DEL UL (lista desordenada) se pone la etiqueta ul o li para aplicar solo a un item, list-style: none */

/* PARA EL OL se puede poner list-style y los números que quiera poner */
/* GALLERY */
.gallery { display: flex;
  justify-content: center; 
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* smartphone??? */
  padding: 20px;}
.gallery img { width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.gallery img:hover { transform: scale(1.05) rotate(1deg); }
footer{color:	#9C5C55 ;display: flex;justify-content: space-around;align-items: center;}
.social-media{
  width: 1%;height: auto;max-width: 60px;
  min-width: 30px;display: flex;justify-content: space-around;
}
/* .flex {  
  position: absolute;
  flex-wrap: row wrap;
  justify-content: space-around;} */