/* ------------------- FONT FACES -----------------------------*/

@font-face {
  font-family: 'ocr-a bt';
  src: url('https://static.wfonts.com/data/2015/07/22/ocr-a/ocr-a bt.woff') format('woff');
  font-display: swap;
}



/* ------------------ MEDIA QUERIES ------------------------- */

@media (max-width: 600px) {
    .visible-menu {
    visibility: hidden; }

}
@media (min-width: 600px) {
  .hamburger { visibility: hidden; }
  .menu {visibility: hidden;}
  
}



/* ---------------------  STYLES   --------------------------------*/

:root {
    --yello: rgb(255, 217, 0);
    --blu: #0bd3c2;
    --main-bg-color: #F2F3DF;
    --main-tx-color: #4B3F3F;
    --secondary-bg-color: #f7f3d2;
    --primary-font: 'ocr-a bt', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --secondary-font: "JetBrains Mono", monospace;
    --default-padding: clamp(3.75rem, 8vw, 6.25rem) 16px;
    --bar-width: 30px;
    --bar-height: 4px;
    --hamburger-gap: 6px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    

}


.header-ul {

    height: fit-content;
}

.header-ul li {
    display: inline;
}

.text-style-1 {
 font-family: var(--secondary-font);
 text-shadow: 2px 2px var(--yello);
}


html {
    background-color: var(--main-bg-color);
    font-size: 1vw;
    
}

.header {
    width: 100%;
    height: 25vh;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    max-width: 2400px;
    margin: 2vw auto;
}

.image-wrapper {
  width: 100%;
  height: clamp(290px, 40vw, 900px); 
  position: relative;
  margin: auto;
  overflow: hidden;
}

.image-wrapper-overflow {
    display: flex;
    align-items: center;
    justify-content: center;
}


#daw {
    max-width: 1000px;
}

#persona {

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;

}


.header a {
    max-height: 50px;

}

li {
list-style: none;
}

.header li a {
    display: inline;

    
}

.hidden-menu:hover, .visible-menu:hover   {

    background-color: aquamarine;

    z-index: -2;
    animation-name: marker;
    animation-duration: 1s;
    border-radius: 5px;
}

.menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    transition: translate var(--animation-timing);
    padding: 0.5rem 1rem;
    width: 100vw;
    min-height: 50vh;
    z-index: 5;
    background-color: transparent;
    opacity: 20;
    align-items: center;
    

}


.hamburger {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);

    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    border: none;
    width: max-content;
    height: max-content;
    position: absolute;
    z-index: 10;
    cursor: pointer;

}

.hamburger::after,
.hamburger::before,
.hamburger input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--main-tx-color);
    transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing),
    translate var(--animation-timing), background-color var(--animation-timing);
    transform-origin: left center;
}

.hamburger input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger input:checked {
    opacity: 0;
    width: 0;

}

.hamburger:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2.5);

}
.hamburger:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2.5);
}

.hamburger:has(input:checked) + .menu {
    visibility: visible;
}


.hamburger:not(:has(input:checked)) + .menu {
    visibility: hidden;
}

.description {
    font-family: var(--secondary-font);
    
}

section {
    padding: var(--default-padding);
    display: flex;
    flex-direction: column;
    gap: 15vh;
}

.heading-text {
    font-family:'ocr-a bt', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 4rem;
    color: var(--main-tx-color);
    letter-spacing: 2rem;
    text-transform: uppercase;
    margin: auto;
    height: 100%;

}

figure {
    display: block;
}

.heading-text-container {
    width: 30%;
    justify-self: flex-end;
    margin-right: auto;
}
.container {
   max-width: 1280px ;
}

.container, .image-container {
    width: 100%;
    margin: auto;

}


.image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}


.description {
    font-family: var(--secondary-font);
    display: block;
    text-align: center;
    font-size:  clamp(10px, 5vw, 30px) ;
    color: var(--main-tx-color);
    text-shadow: 2px 2px var(--blu);
    margin-top: 10vh;

}

#year {

    font-size: 30px;
    font-family: var(--primary-font);
    color: var(--main-tx-color);
    width: 100%;
    text-align: right;
    padding: 0 20%;
    margin: auto;
    justify-content: center;
    align-items: center;

}



.down-btn {
    background-color: var(--main-tx-color);

    width: 120px;
    height: 50px;
    margin-top: auto;
    position: absolute;
    top: calc(100% - 50px);
    left: calc(40% - 52px);

}

.down-btn:hover {
    
    animation-name: button;
    animation-duration: 3s;
    background-color: transparent;
    transition-timing-function: ease-out;
    border-color: var(--blu);
    

}


.empty-wrap {
    border: none;
    justify-content: center;
    background-color: transparent;
    min-height: 10vh;
}



.textbox {
    display: flex;
    justify-content: center;
}


#inputs {
    position: absolute;
    width: 20%;
    z-index: 1;
    left: 26%;
    bottom: 55%;

}

#timeline {
    margin-top: 37% ;
    width: 100%;

}


a {
    font-family: var(--secondary-font);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--main-tx-color);
    font-size: 25px;
    padding: 0 15px;

}

.a-img {
    all: unset;
}

@keyframes marker {
        0% {
            width: 0%;
            background-color: rgb(255, 217, 0);
        }
        3% {
            width: 1%;
        }
        100% {
             width: 5%;
         }

}

@keyframes button {
        0% {
        
            background-color:  var(--main-tx-color);
            border-color:  rgb(255, 217, 0);
        }

        10% { background-color: rgb(255, 217, 0);}

        40% {background-color: var(--blu)}

        80% {
             
             background-color: var(--blu);
             border-color: var(--blu);
         }

}


.text-wrap{
 display: flex;
 justify-content: center;
}

ul {
    all: unset;
}

.item {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
}

.list {
    max-width: 800px;
    text-decoration: none;
    list-style: none;
    margin: auto;

    
}

.item-description {
    display: inline-block;
    font-weight: 300;
    margin: 5% auto;

}

.text-wrap {
    height: 20%;
}



figure, figcaption {
    font-size: 14px;

    height: fit-content;
}

figure img {

    height: clamp(100px, 30vw, 450px);
    box-shadow: 5px 5px var(--yello);

}

figure img:hover {
    filter: brightness(40%);
}



footer {
    font-family: var(--secondary-font);
    font-size: 12px;
    height: 20vh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 70px auto auto;
}

h2 {
    color: var(--main-tx-color);
    font-size: clamp(40px, 5vw, 50px);
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: -30px;
    width: 100%;
}