:root{
    /*colour*/
    --principal-M: #0000FF;
    --principal-L: #0000FF20;

    --neutral-black: #000000;
    --neutral-white: #FFFFFF;
    --neutral-white-80: #FFFFFF80;

    --transparent:#FFFFFF00;
    
    /*typography*/
    --body: "Space Mono", courier, monospace;
    --title: /*'Pp-mondwest-regular',*/ "argent-pixel-cf", georgia, 'Times New Roman', times, serif;

    font-size: 16px;
}

/*text styles*/
p{
    font-family: var(--body);
    color: var(--neutral-black);
    background-color: var(--neutral-white);
	line-height: 1.2em;
}

.large{
    font-size: 1.125em;
    line-height: 1.2em;
}

strong, b{
    /*font-weight: 700;*/
    font-family: var(--title);
    /*font-size: 1.2em;*/
}
h1 {
    font-family: var(--title);
    font-size: 2.5em;
    color: var(--neutral-black);
    background-color: var(--neutral-white);
}

h2{
    font-family: var(--body);
    font-size: 1.5em;
}

h3{
    font-family: var(--title);
    font-size: 1.2em;
    color: var(--neutral-white);
    background-color: var(--principal-M);
}

a {
    font-family: var(--body);
    color: var(--principal-M);
    background-color: var(--neutral-white);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: var(--body);
    color: var(--principal-M);
    background-color: var(--neutral-white);
    font-size: 1em;
    text-decoration: none;
    padding: 1px;
}

button img{
    fill: var(--neutral-white);
    background-color: none;
}

iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
}

/*box styles*/
body{
    background-image: url("../img/BGpages.webp");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-attachment: fixed;
    background-color: var(--neutral-white);
    display: flex;
    flex-direction: column;
    padding: 0px 32px;
    gap:24px;
}

header{
    display: flex;
    flex-direction: row;
    width:100%;
    height: 20vh;
    justify-content: right;
    align-items:end;
    max-width: 1520px;
}

header img{
    height: 50%;
}
/*class styles*/
.headerColumn{ /*elementos del header en vertical*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.pagesMenu{ /*Navegación entre páginas desde las páginas*/
    display: flex;
    font-size: 0.875em;
    gap: 24px;
}

.showVideos{ /*Bloque dentro del body que contiene los videos en 00*/
    display: flex;
    flex-direction: column;
    gap:24px
}

.content{ /*Un bloque horizontal de contenido dentro del body*/
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    max-width: 1520px;
    max-height: 75vh;
    justify-self: center;
    align-items: center;
}

.threeFour{ /*Columna de 3/4 - 75%*/
    display: flex;
    flex-direction: row;
    width:75%;
    gap: 8px;
    max-height: inherit;
     overflow: hidden;
}

.threeFour p, a{
    width: fit-content;
}

.threeFour iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
}

.threeFour img{
    max-height: 600px;
}

.oneFour{ /*Columna de 1/4 - 25%*/
    display: flex;
    flex-direction: column;
    /*padding: 16px;*/
    width: 25%;
    gap: 8px;
}

.twoThird{ /*Columna de 2/3 - 66%*/
	display: flex;
	flex-direction: row;
	width: 66%;
}

.oneThird{ /*Columna de 1/3 - 33%*/
	display: flex;
	flex-direction: column;
	width: 33%;
}

.proyectList{ /*Navegación a páginas desde el home*/
    display: flex;
    flex-direction: column;
    gap: 4px
}

.proyectList a{
    width: fit-content;
}

.navbar{ /*Barra de sorting*/
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 8px;
}

.dropdown{
    position: relative;
    display: inline-block;
    padding: 0px;
}

.dropdown-sort{
    display: none;
    /*flex-direction: column;*/
    position: absolute;
    float: right;
    background-color: var(--neutral-white);
    /* margin-top: 16px; */
    padding:0px;
    z-index: 1;
    cursor: pointer;
    right: 0;
}

.dropdown:hover .dropdown-sort {
    display: block;
}

.dropdown-sort p{
    padding: 0px;
    color:var(--principal-M) ;
}

.buttonInv{
    color: var(--neutral-white);
    background-color: var(--principal-M);
}
.twoImg{
    display: grid;
    grid-template-columns: auto auto;
    gap: 24px;
}

.fourImg{
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap:12px;
}

.sixImg{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 24px;
}

.eightImg{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    gap: 24px;
}

/*.preview{
    height: 200px;
    border: 2px dotted; /*Required for border-image
    border-color: var(--neutral-white);
    padding: 16px;
    border-image: url(../img/borde.webp) 15 round;
}*/
.preview p{
  /*display: inline-block;/* or inline-block */
  height:100px;
  overflow: hidden;
}

.footer{
    margin: 0px auto 32px auto;
    display: flex;
    
}

.nav{
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.nav a{
    display: inline-flex;
    align-items: center;
}

.nav img{
    display: inline-block;
    width: 24px;
}
.nav p{
    display: inline-block;
    color: var(--principal-M);
}

/*Responsive*/
@media only screen and (max-width:600px) {
    .body{padding:0px 16px}
    .content{flex-direction: column;}
    .threeFour{width: 100%;}
    .oneFour{width:100%}
    .eightImg{grid-template-columns: auto auto; gap: 16px}
}

@media only screen and (min-width: 601px) and (max-width:989px){
    .content{flex-direction: column;}
    .threeFour{width: 100%;}
    .oneFour{width:100%}
    .eightImg{grid-template-columns: auto auto auto auto; gap: 24px}
}

@media only screen and (min-width: 990px) {
    
}

@media only screen and (min-width: 1520px){
    header{margin: 0px auto}
    .content{margin: 0px auto}
}