/*
breakpoints Bootstrap:
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px

  https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
/*
  d-none                      ocultar en todos
  d-block                     mostrar en todos

  d-lg-none                   ocultar en screens lg o mayores (+992)
  d-none d-sm-block           ocultar solo en xs (-576)
  d-none d-lg-block           muestra en screens lg o menores
  d-md-none d-lg-block        ocultar en screens md o menores, mostrar a partir de lg (-992)
  d-block d-sm-none           ver solo en xs
  d-none d-sm-block d-md-none ver en screens sm o menores, ocultar a partir de md (-768)

https://getbootstrap.com/docs/4.0/utilities/display/
*/

@font-face {
    font-family: "fuenteSpaceMono";
    src: url("./tipografia/SpaceMono/SpaceMono-Regular.ttf");
}
@font-face {
    font-family: "fuenteTerminal";
    src: url("./tipografia/TerminalGrotesque/terminal-grotesque.ttf");
}
@font-face {
    font-family: "fuenteNeueHaasGrotesk";
    src: url("./tipografia/NeueHaasGrotesk/NHaasGroteskTXPro-75Bd.ttf");
}

html {
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
    background-color: #000;
    color: #ffffff; /*el color de la letra debería definirse por separado, a no ser que todas sean BLANCO*/
    padding: 0;
    margin: 0;
    }

/* Básicamente tít. principal (mi nombre) */
  h1 {
      font-family: fuenteTerminal;
      text-align: center;
      color: white;
  }

/* Títulos helvética (seccs) */
  h2 {
    font-family: fuenteNeueHaasGrotesk;
    color: white;
  }

  p {
      font-family: 'Space Mono', monospace;
      color: #f0f0f0;
  }

/* TAMAÑOS RESPONSIVE para TEXTO
sm = móvil    md = computer

h1 = "Gabriel Aljundi" y "Pepperoncino" 
h2 = "Still lifes for the 2020 season"
p = "Photography" + "> see more"
*/
.h1-sm { /*Títulos telf*/
  font-size: calc(1.5em + 6vw);
}
.h1-md { /*Títulos pc*/
  font-size: calc(2em + 6vw);
}
  .h2-sm { /*Títulos telf*/
    font-size: calc(1.5em + 5vw);
  }
  .h2-md { /*Títulos pc*/
    font-size: calc(1em + 2.5vw);
  }
  .p-sm { /*Txt telf*/
    font-size: calc(0.6em + 2.2vw);
  }
  .p-md { /*Txt pc*/
    font-size: calc(0.5em + 1vw);
  }

  svg {
      color: white;
  }

  video {
    filter: opacity(0.5);
  }

  .about {
    background: rgb(9,9,9);
    background: linear-gradient(180deg, rgba(9,9,9,1) 0%, rgba(14,14,14,1) 10%, rgba(0,93,174,1) 40%, rgba(1,93,174,1) 51%, rgba(9,95,170,1) 55%, rgba(243,137,73,1) 92%, rgba(255,139,68,1) 100%);
    background-attachment: fixed;
  }

  .link-about-sm { /* enlace about en el nav, movil */
    margin-left: 4%; 
    text-decoration: none; 
    color: #fff; 
    text-align: left; 
    font-family: fuenteSpaceMono; 
    display: inline-block; 
    vertical-align: middle; 
    font-size: calc(1rem + 1vw);
  }

  .link-about-md {
    margin-left: 10px; 
    color: #fff; 
    text-align: left; 
    font-family: fuenteSpaceMono; 
    display: inline-block; 
    vertical-align: middle; 
    font-size: calc(0.9rem + 0.3vw);
  }

  .carousel {
    max-width:100%;
  }

  .rot {
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}

.statement-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: auto;
  font-weight: bold;
}

.small-iframe {
  display: block;
  background: #000;
  border: none;
  width: 100vw;
}

/* CV centrar verticalmente*/
.CV-outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 98%;
  width: 100%;
}
.CV-middle {
  display: table-cell;
  vertical-align: middle;
}
.CV-inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* REEL responsivo */
.reel-container {
  position: relative;
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  overflow: hidden;

  /*border-style: solid;
  border-width: 5px;*/
}

.reel-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max-content;
}

.reel-container img {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max-content;
}

.iframe-container-s {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 85%;
  padding-top: 85%; /* 1:1 a ratio */
}

.iframe-container-m {
  margin-left: 22.5%;
  margin-right: 0;
  padding: 0;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 55%;
  padding-top: 55%; /* 1:1 a ratio */
}

.iframe-container-l {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  width: 40%;
  padding-top: 40%; /* 1:1 a ratio */
}

.dc-iframe {
  position: absolute;
  top:0;
  bottom:0;

  width: 100%;
  height: 100%;
  
  border-style: solid;
  border-color: #575757;
  border-width: 1px;
}

.dots {
  position: absolute;
  border-image-slice: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#0a0a0a 80%, transparent 10%);
  background-size: 10px 10px;
}