/* initial adjustments */

 body {
    margin: 0px;
    width: 100vw;
    background-color: #000000;
 }


 /* Add a black background color to the top navigation */
.topnav {
  /* background-color: rgb(0, 0, 0);*/
  background-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0.8) 90%, rgba(255,255,255,0.3) 100%);
  overflow: hidden;
  height: 7lvh;
}

#logo-container{
    padding: 0;
    transform: translateX(calc(50vw - 50%));
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

a img{
  height: 7lvh;
  width: 120px;
  object-fit: contain;
}

/*
Add an active class to highlight the current page
.topnav a.active {
  background-color: rgba(132, 169, 140, 1);
  color: white;
}
*/

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* media queries */

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 860px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  #logo-container{
    transform: translate(calc(50vw - 50%))
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 860px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*canvas*/

#main_canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.floating_box{
  position: absolute;
  background-image: linear-gradient(10%, 'rgba(228,0,64,190.0.4)');
  color: 'rgba(0,0,0,1)';
}

.sectionContainer{
  padding: 0;
  border: 0;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
}


.decorationCanvas{
  width: 100%;
  height: 60lvh;
}

.sub_container{
  padding: 0;
  border: 0;
  width: 100vw;
}

.bg_canvas{
  width: 100vw;
  height: 90lvh;
}

/*estilo de contenedor principal*/

#landing_container {
  position: relative;
  height: 80lvh;
  max-width: 100vw;
  overflow: hidden;
  padding: 0;
}

/*estilos de overlay*/

/* overlay encima del canvas */
.overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* efecto fade-in con blur */
.fade-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  animation: fadeBlur 1.6s ease forwards;
}

/* segunda línea con delay */
.delay {
  animation-delay: 0.7s;
}

/* keyframes de fade + blur */
@keyframes fadeBlur {
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

/* estilo hacker oscuro */
.overlay h1 {
  color: #000000;
  text-shadow:
    0 0 10px rgba(238, 241, 240, 0.8),
    0 0 20px rgba(15, 15, 15, 0.4);
}

.overlay p {
  color: #313332;
  letter-spacing: 2px;
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(8px);
  transition:
    opacity 1s ease,
    transform 1s ease,
    filter 1s ease;
}

/* estado visible */

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.badge-bar {

  position: absolute;
  right: 40px;
  top: 7lvh;

  display: flex;
  gap: 12px;

  z-index: 3;

  opacity: 0;
  transform: translateY(20px);
  animation: badgeFade 1s ease forwards;
  animation-delay: 1.2s;
}

.badge {

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(0,255,136,0.08);

  border: 1px solid rgba(0,255,136,0.35);

  color: #00ff88;

  font-size: 0.85rem;

  text-decoration: none;

  backdrop-filter: blur(6px);

  transition: all 0.25s ease;
}

/* hover glow */

.badge:hover {

  transform: translateY(-2px);

  background: rgba(0,255,136,0.18);

  box-shadow:
    0 0 10px rgba(0,255,136,0.6),
    0 0 25px rgba(0,255,136,0.35);
}


@keyframes badgeFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.subhero {
  margin-top: 10lvh;
  max-width: 80vw;

  border-radius: 9px;
  background-color: white;


}

@media (min-width: 768px){
  .subhero{
    font-size: 10vw;
  }
}

@media (max-width: 768px){
  .subhero{
    font-size: 4vw;
  }
}

.section-container {
  width: 100vw;
  height: 100lvh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.subsection-overlay{
  height: 100%;
  width: 70%;
  position: relative;
  z-index: 2;
  color: #6e747f;
  text-shadow: 2px 2px 1px 0px rgba(rgba(24, 22, 22, 0.726), green, blue, alpha);
  background-color: rgba(59, 59, 59, 0.9);
  transform: translateX(100vw);
  /*border-radius: 20px 0 0 20px;*/

}

.backgrounded-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.flex-container{
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 8lvh;
  height: 8dvh;
  height: 8lvh;
  background-color: black;
  align-items: center;
}

#detail-section{
  flex: 1.5 1 600px;
  text-align: center;
}

#medal-container{
  flex: 1 1 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}


.lucid-heading{
  font-weight: 400;
  font-size: 2.4lvh;
  margin: 1lvh;
}

.medal{
  height: 100%;
  flex: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.medal-image{
  max-width: 40%;
  object-fit: contain;
  clip-path: circle(50%);
  max-height: 40%;
}

@media (min-width: 768px){
  .subhero{
    font-size: 2vw;
  }

  .lucid-detail{
  font-weight: 200;
  font-size: 1.2vw;
  margin: 1lvh;
}
}

@media (max-width: 768px){
  .subhero{
    font-size: 4vw;
    font-weight: 400;
  }

  .lucid-detail{
    font-weight: 200;
    font-size: 10pt;
    margin: 1lvh;
  }
}

.fredoka-subsection-title {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 6vw;
  color: rgb(240, 232, 219);
}

/*badges*/

.badges-vertical-list {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: flex;
  flex-direction: column;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -15px;
  opacity: 0;
  animation: slideInBadge 0.5s ease-out forwards;
}

.badge-item:first-child {
  margin-top: 0;
}

.badge-img {
  width: 5lvh;
  height: 5lvh;
  border-radius: 50%;
  border: 1px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.8);
  background: #333;
}

.badge-text {
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2lvh;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  text-shadow: 1px 1px 2px black;
}

@keyframes slideInBadge {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.delay-1 { animation-delay: 0.2s; z-index: 3; }
.delay-2 { animation-delay: 0.4s; z-index: 2; }
.delay-3 { animation-delay: 0.6s; z-index: 1; }

.badge-item:hover {
  z-index: 10;
  transform: translateX(5px);
  transition: transform 0.2s;
}


/* fonts */

.bruno-ace-sc-regular {
  font-family: "Bruno Ace SC", sans-serif;
  font-style: normal;
}

.alata-regular {
  font-family: "Alata", sans-serif;
  font-style: normal;
}

.landing-heading {
  font-size: 7vw;
  font-weight: 600;
  font-style: normal;
}

.landing-text {
  font-size: 2.5vw;
  font-weight: 100;
  text-shadow: #000000 0 0 1vw;
  letter-spacing: 0;
}



/* animations */

@keyframes slideInFromRight {
  from {
    transform: translateX(100vw);

  }
  to {
    transform: translateX(30vw);
  }
}

.slideIn{
  animation: slideInFromRight 2s forwards;
}

/* ribbon */

#detail-section h3 {
  color: white;
  font-size: 5lvh;
  font-weight: 800;
  margin-top: 1lvh;
  margin-bottom: 0;
}

#detail-section article {
  color: white;
  font-size: 1.1vw;
  font-weight: 300;
  margin-top: 0.2vw;
  margin-left: 3vw;
  margin-right: 3vw;
}

@media (max-width: 768px){
  #detail-section h3 {
  font-size: 40px;
}
  #detail-section article {
    font-size: 11px;
  }
}

/*Detailed sections*/

.subsection-title{
  font-weight: 800;
  font-size: 10lvh;
  color: white;
  text-align: center;
  margin-top: 2lvh;
  margin-bottom: 0;

}

.subsection-subtitle{
  font-weight: 200;
  font-size: 1.4lvh;
  color: white;
  text-align: center;
  margin-top: 0;
  text-shadow: 0 0 2lvh rgba(255, 255, 254, 0.877)
}

.subsection-text{
  font-size: 1.1vw;
  color: white;
  margin-left: 5vw;
  margin-right: 5vw;
  text-align: justify;
}

@media (max-width: 768px){
  .subsection-title{
    font-size: 40px;
  }

  .subsection-subtitle{
    font-size: 9px;
  }

  .subsection-text{
    font-size: 12px;

  }
}

.date-container {
    z-index: 10;
    transform: translateX(3vw);
    font-size: 5vw;
    position: absolute;
    text-shadow: 5px 10px 10px #ffffff;
    font-weight: bolder;
}

.date-container p {
    border: solid 1px white;
    border-radius: 6vw;
    background-color: white;
}

/* main description */

#main-description {
  min-height: 80lvh;
  background-color: white;
}

#main-description article{
  padding-top: 1vw;
}

#main-description p{
  padding: 0 5vw 0 5vw;
  text-align: center;
  font-size: 1.4vw;
}

.card p {
  padding: 0 1.2vw !important;
  font-size: 1.2vw !important;
}

.card li{
  font-size: 0.9vw;
}

.card a{
  text-decoration: none;
  color: white;
}

@media (max-width: 768px){
  #main-description p{
    font-size: 11px;
  }
  .card li{
    font-size: 10px;
  }
  .card p {
  padding: 0 1.2vw !important;
  font-weight: bold;
  font-size: 11px !important;
}
}


/* cards */

.card-container{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;

}

.card{
    min-width: 30vw;
    min-height: 200px;

    background: rgba(255, 255, 255, 0.12); /* transparencia */
    backdrop-filter: blur(10px); /* efecto glassmorphism */

    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: left;

    color: white;
    font-size: 1.2rem;
    text-align: justify;

    border: 1px solid rgba(255,255,255,0.15);
    margin-top: 1.5rem;

}

@media (max-width: 768px){
  .card{
    min-width: 90vw;
    min-height: 10lvh;
    margin-top: 0.5rem;
  }
}

/*amazingDrawing*/

.amazingDrawing {
  width: 100%;
  height: 100%;
  image-rendering: auto;
}