* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0;
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

body{
  background-image: url("../images/18623494_10155354942569920_1080982077963106788_o.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-position: center;
  background-color: #000000;
}

/* ===== Header ===== */
@media (max-width:600px){
  header {
    display:inline-grid;
    align-content:center;
    position: sticky; top: 20;
    justify-content:center;
    box-sizing: 100px;
    padding: 30px 5%;
  }
}

@media (min-width:600px){
  header {
    display:flex;
    justify-content:space-around;
    position: sticky; top: 20;
    justify-content: space-between;
    box-sizing: 100px;
    align-items: center;
    padding: 10px 10%;
  }
}

.logo {
  cursor: pointer;
  align-items: center;
  width: 3.5rem;
}

.nav__links a,
.cta,
.overlay__content a {
  font-family: 'Gabarito', cursive;
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
}

.nav__links {
  list-style: none;
  display: flex;
  flex-shrink: 3;
}

.nav__links li {
  padding: 10px 10px;
}

.nav__links li a {
  transition: color 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}

.cta {
  padding: 12px 12px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease 0s;
}

.cta:hover {
  background-color: rgba(0, 136, 169, 0.8);
}

/* ===== Video mask ===== */
video {
  width: 100%;
  height: auto;
  min-height: 150px;
  -webkit-mask-image:url("../images/mask_003b.png");
  mask-mode: alpha;
  mask-size: contain;
  /*border-radius:8px;*/
}

/* ===== Grids ===== */
/*
.videos_grid{
  display:grid;
  animation: fadeInAnimation ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1em;
}
*/

@media (max-width:500px){
  .videos_grid{
    display:grid;
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    grid-template-columns: 1fr;
    padding-left: 5%;
    padding-right: 5%;
    grid-gap: 1em;
  }
}

@media (min-width:700px){
  .videos_grid{
    display:grid;
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    padding-left: 5%;
    padding-right: 5%;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
  }
}

@media (min-width:1000px){
  .videos_grid{
    display:grid;
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
  }
}

/* ===== Video titles ===== */
.border_videos {
  padding: 8px 8px;
  background-color: rgba(0,0,0,0.45);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Gabarito', cursive;
  font-weight:100;
  font-size: 0.8em;
  color: #EFFBFF;
  text-decoration: none;
}

.border_videos_title {
  animation: fadeInAnimation ease 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  padding: 8px 12px;
  background-color: rgba(0,0,0,0.45);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Gabarito', cursive;
  font-weight:100;
  font-size: 1em;
  color: #EFFBFF;
  margin-bottom: 10px;
  text-decoration: none;
}

.big-text {
  padding: 8px 8px;
  background-color: rgba(0,0,0,0.45);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Gabarito', cursive;
  font-weight:100;
  font-size: 1em;
  color: #EFFBFF;
  text-decoration: none;
}

.small-text {
  padding: 8px 8px;
  background-color: rgba(0,0,0,0.45);
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-weight:100;
  font-size: 0.75em;
  color: #EFFBFF;
  text-decoration: none;
}

/* ===== Cards (original) ===== */
.card-central{
  display: flex;
  align-items:stretch;
  flex-direction: column;
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border-radius: 18px;
  margin: 20px;
  background: url("../images/semantic2.png");
}

.card-central-about{
  display: flex;
  align-items:stretch;
  flex-direction: column;
  border-radius: 18px;
  margin: 50px;
  background: url("../images/turntable.jpg");
}

/* ===== Text blocks (original) ===== */
.border_text_big{
  display: flex;
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  overflow:inherit;
  border-radius: 18px;
  font-size: 1.75em;
  background-color: RGBA(0,0,0,0.6);
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  font-family: 'Gabarito', cursive;
  font-weight: 500;
  color: #ABABAB;
  text-decoration: none;
  align-self: center;
  border: none;
}

.border_text_medium{
  display: flex;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  overflow: hidden;
  background-color: RGBA(0,0,0,0.35);
  font-size: 1.2em;
  padding-left: 40px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-top: 15px;
  font-family: 'Gabarito', cursive;
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
  align-self: center;
}

.border_text_small{
  display: flex;
  animation: fadeInAnimation ease 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  overflow: hidden;
  border: 10px;
  padding-top: 10px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 30px;
  font-family: 'Gabarito', cursive;
  font-weight: 500;
  font-size: 0.85em;
  color: #edf0f1;
  text-decoration: none;
  align-self: center;
}

/* ===== Gallery ===== */
.ul_img_gallery{
  display: flex;
  flex-wrap: wrap;
}

.li_img_gallery {
  height: 40vh;
  flex-grow: 1;
}

.img_gallery {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.text.gallery{
  max-width: 200px;
}

/* =========================================================
   TYPOGRAPHY NORMALIZATION (so About & Experience match)
   ========================================================= */
.border_text_big p {
  font-family: 'Gabarito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.6em;   /* unified with card_001.css */
  font-weight: 600;   /* unified with card_001.css */
  line-height: 1.25;
  margin: 0 0 10px 0;
}

.border_text_medium p {
  font-family: 'Raleway', sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

.border_text_small p {
  font-family: 'Raleway', sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   OVERRIDES (darken panels, remove bright card images)
   ========================================================= */
/* Remove bright images embedded inside the cards */
.card-central { background: none !important; }
.card-central-about { background: none !important; }

/* Darker panels + slight blur for readability */
.border_text_big {
  background-color: rgba(0,0,0,0.90) !important;
  border-radius: 12px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.border_text_medium {
  background-color: rgba(0,0,0,0.75) !important;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.border_text_small {
  background-color: rgba(0,0,0,0.65) !important;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}