:root
{
 --folder-radius:.4rem;
 --paper-clip-w: clamp(1.15vw, 1.75rem, 20px);
 --col-red:#FB875D;
 --col-red-trans:#FB875D32;
 --col-red-line:#FB875D16;
 --col-orange:#FCD27B;
 --col-blue:#4F80DA;
 --col-blue-trans:rgba(79, 128, 218, .64);
 --col-blue-line:rgba(79, 128, 218, .08);
 --col-white:#FFF6D9;
 --tab_tab_w: clamp(15rem, 17rem, 20rem);
 --tab_tab_h: calc(var(--tab_tab_w) * .3);
 --nav_tab_w: clamp(7vw, 9rem, 220px);
 --folder-height: calc(var(--tab_tab_h) * 2.25);
 --folder-y-offset: calc(var(--tab_tab_w) * 2);
 --folder-peek: calc(var(--folder-height) * .1);
 --less-width: clamp(80vw, 80vw, 900px);
 --less-width-gutter: calc((100% - var(--less-width)) * .5);
 --file-inset: calc(var(--less-width) * .05);
 --envelope-fold-w: clamp(2vw, 3rem, 60px);
 --envelope-extra-w: 45vw;
 --text-outline: 0px -1px 0px black,0px 1px 0px black,1px 1px 0px black,-1px -1px 0px black;
}

*, *::before, *::after {
  box-sizing: border-box;
  max-width: 100%;
}

.chunky-button
{
    display:flex;
    text-decoration:none;
    font-family: "Turret Road";
    font-weight: 800;
    font-size: .75rem;
    color: white;
    border: thin solid black;
    text-shadow: var(--text-outline);
    background: var(--col-blue);
    padding: .4rem 1.25rem;
    border-radius: .25rem;
    line-height:110% !important;
}

.about-me-header
{
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    width: 100%;
    text-shadow: var(--text-outline);
    padding: 3rem 2rem 0rem 3rem;
}
.color-bar,
.color-bar-2
{
    	z-index: -1;
    	position: absolute;
	width:100%;
	height:44%;
	background-color:var(--col-red);
	border-top:solid thin black;
	border-bottom:solid thin black;
}

.color-bar-2{
	height:50%;
	top:64%;
	background-color:var(--col-orange);
	border-top:none;
        box-shadow:0px -.5rem 1rem rgba(0,0,0,.064);
}

.file-mask{
	width: calc(var(--less-width));
	height: 1px;
    	clip-path: inset(-50000% -200% 0% -200%);
        transform: translateY(3.25rem);
	position:sticky;
	top:90px;
}

.faux-folder{
height:6rem;
}

#about_me{
width:100%;
display:flex;
flex-direction:column;
position:relative;
align-items: center;
}

.about-me-tab
{
margin-top:15%;
align-self:start !important;
left:var(--less-width-gutter);
}

.contact-tab
{
	right:var(--less-width-gutter);
}

nav
{
    display: flex;
    flex-direction: row;
    padding-right:2rem;
    padding-left:2rem;
    align-items: flex-start;
    width: 100vw;
    justify-content: space-between;
    position: fixed;
    transition: all 1s;
    z-index: 100;
    backdrop-filter:blur(10px);
    background:var(--col-blue-trans);
    height:3rem;
}

.nav-sub-items
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
}
nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 2rem;         /* Inset horizontal */
  width: calc(100% - 4rem);        /* Solo ocupa la mitad */
  height: 1px;
  background-color: black;
}


.welcome-tag
{
    align-self:flex-start;
    display: flex;
    position: relative !important;
    transition: all 1s;
    font-size: clamp(1rem, 2vi , 1.5rem);
    height: clamp(1rem, 2vi , 1.5rem);
    color: white;
    font-family: "turret road" !important;
    left: 2rem;
    top: 5rem;
    font-weight:800;
    text-shadow:var(--text-outline);
    min-height:1rem;   
}

.cursor
{
  display: inline-block;
  width: 0.125em;
  background-color: currentColor; /* Usa el color del texto */
  margin-left: 0.1em;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  50% { background-color: transparent; }
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav-item{
    width: var(--nav_tab_w);
    position: relative;
    transform:translateY(calc( var(--nav_tab_w) * -.08));
}

.nav-item.active path{
	fill:var(--col-red);
}

.nav-item::after{
    content:attr(data-title);
    font-size: min(2vw, 1.25rem);
  display: block;
  position:absolute;
  left:0px;
  top:.8rem;
  text-align: center;
  color:black;
  font-weight: 500;
  width:var( --nav_tab_w);
}
.nav-item svg{
    width: 100%;
}

.name-title{
       font-weight: 400;
    font-size: clamp(5rem, 9vi , 50px);
    font-family: "p22-cusp-round" !important;
    color: white;
    text-align: center;
    width: 100vw;
    height: 85vh;
    margin:0px;
    padding-top:clamp(9rem, 10vh, 300px);
    text-shadow: 0px -1px 0px black,0px 1px 0px black,1px 1px 0px black,-1px -1px 0px black, .45rem .45rem 0px var(--col-orange), 
    1rem 1rem 1rem rgba(0,0,0,.25);
    box-sizing: border-box;
}

.name-subtitle{
       font-weight: 800;
    font-size: calc(.66 * clamp(5rem, 9vi , 50px));
    font-family: "turret road" !important;
    color: white;
    text-align: center;
    width: 100vw;
    margin:0px;
    text-shadow: 0px -1px 0px black,0px 1px 0px black,1px 1px 0px black,-1px -1px 0px black;

    box-sizing: border-box;
}
h3{

    font-family: "p22-cusp-round" !important;
}

html{
      box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    
}
body
{
    box-sizing: border-box;
    align-items: center;
    background-color: var(--col-blue);
    font-family: "Turret Road", sans-serif;;
    margin: 0px;
    min-height: 100vh;
    
    display: flex;
    flex-flow: column;
    flex-grow:1;
}

#tabs
{
    width: var(--less-width);
    align-items: center;
    display: flex;
    flex-flow: column;
    clip-path: inset(-100% 0% 1px 0% round var(--folder-radius));
   /* overflow: hidden;*/
}

.tab-holder
{
    width: var(--less-width);
    display: flex;
    flex-direction: column;
    position:sticky;
    top:0px;
    /*transition:all .5s;
     filter: drop-shadow(-1px -1px 8px rgba(0,0,0,.5)); */
}

.tab-holder.selected {
    /* font-weight: 900 !important;
    text-decoration: underline; */
}

.tab
{
        width:100%;
        display: flex;
        min-height: var(--folder-height);
        border-radius: var(--folder-radius) var(--folder-radius) 0 0;
        transition: all 1s ease-in-out;
}

.tab-content{
    width:100%;
    padding: 2rem 2rem 2rem 2rem;   
    transition: all .4s;
    font-size: clamp(1.5vw, 1.0rem, 20px);;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    border-radius: .5rem;
    column-gap: 3rem;
    border: black 1px solid;
}

.tab-content-time, .tab-content-cat
{
font-family: Turret Road;
font-weight: 800;
font-size:  clamp(1.5vw, 1.0rem, 20px);
line-height: 100%;
letter-spacing: 0%;

}
.tab-content-time{
text-align:right;
}
.tab-content-title
{
color: #FFF;
 text-shadow:var(--text-outline);
font-family: "Turret Road";
font-size: 2.5rem;
font-style: normal;
font-weight: 800;
line-height: 85%;
}
.tab-content-body
{
font-family: Turret Road;
font-weight: 400;
font-style: Regular;
font-size: clamp(1.5vw, 1.0rem, 20px);
line-height: 100%;
}

.tab-content-bar{
grid-column: 1 / span 2;
height:1px;
width:100%;
background-color:black;
justify-self:center;
margin-bottom:1.5rem;
}
.tab-content-img{
margin-top:1.5rem;
border: 1px solid black;
grid-column: 1 / span 2;
width:100%;
height:200px;
background-color:gray;
justify-self:center;
}

.faux-tab.tab_content{
 display:none;
}

.faux-tab-tab,
.tab-tab{
        width:var(--tab_tab_w);
        align-self: end;
        position: relative;
        transform: translate(-.5rem, .36rem);
}

.tab-tab::after{
    content:attr(data-title);
    font-size: 1.25rem;
  display: block;
  position:absolute;
  left:0px;
  top:1rem;
  text-align: center;
  color:black;
  width:var(--tab_tab_w);
}

.tab-holder:nth-child(even) svg path
{
    fill:var(--col-red) !important;
}

.tab-holder:nth-child(even) .tab-content
{
    background-color:var(--col-red) !important;
}

.tab-holder:nth-child(odd) svg path
{
    fill:var(--col-orange) !important;
}
.tab-holder:nth-child(odd) .tab-content
{
    background-color:var(--col-orange) !important;
}



#cotent_holder
{
    justify-self: center;
    width: 100%;/*clamp(90%,550px, 90% );*/
    padding: clamp(10%,50px, 20rem);
    box-sizing:border-box;
    display: flex;
    justify-items: center;
    align-items: center;
    padding-bottom: 3rem;
    padding-top: 3rem;
    flex: 1;
    justify-content: center;
    align-items: start;
}

.content-subsection{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.fancy-img
{
    position: relative;
    width: 100%;
    transform: rotate(-4deg) scale(1.2);
    filter:brightness(.7);
    transition: all 1s;
}

.fancy-img-hldr
{
    width: 70%;
    clip-path: border-box;
}
.text-block{
display: flex;
flex-direction: column;
width: 30%;
}

.content-subsection:hover .fancy-img{
    transform: rotate(0deg) scale(1);
    filter:brightness(1);
}

.content-subsection h3
{
    margin-top: 0rem;
    margin-bottom: .25rem;
}

.content-subsection p
{
    margin-top: 0;
}

.adornment {
    position:absolute;
    top: 20rem;
    left: 19rem;
    width: 10rem;
    transition: all 1s;
    @starting-style{
        opacity: 0;
        transform: scale(.7) rotate(110deg);
    }
}

.adornment.hide{
        opacity: 0;
        display: none;
    }

.content-section
{
    display: flex;
    flex-flow: column;
    gap: 4rem;
}

.content-section.hidden{
 display:none;
}

@media (max-width: 600px) 
{
}

.folder-with-file
{
width: var(--less-width);
max-height: 240px;
position: relative;
transform: translateY(0px);
transition: all 1s .25s ease-out;
 @starting-style{
        transform: translateY(100%);
    }
}
.file{
    font-family:"Turret Road";
    font-size: min(3.5vw, 1.8rem);
    padding: 5vh 8vw 13vh 8vw;
    background-color: white;
    margin-left: var(--file-inset);
    margin-right: var(--file-inset);
    z-index: -2;
    width:-webkit-fill-available;
    transform: translateY(-90%);
    transition: all .4s 1s ease-out;
    box-shadow:0 0 .25rem .25rem rgba(0,0,0, .15);
   @starting-style
    {
        transform: translateY(100px);
    }

         background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0%,
      transparent 5%,
      var(--col-blue-line) 6%
    ),
    linear-gradient(to right, transparent 5%, var(--col-red-line) calc(5% + 2px), transparent calc(5% + 4px));

  background-repeat: repeat, no-repeat;
}

.file::after
{
content: "";
    background-image: url(../img/orange_paper_clip_ml_cropped.png);
    position: absolute;
    width: var(--paper-clip-w);
    height: calc(var(--paper-clip-w) * 4.2);
    background-size: contain;
    background-repeat: no-repeat;
    right: calc(var(--paper-clip-w) * 1.25);
    top: calc(var(--paper-clip-w) * -0.2);
}

.first-folder-message{
        content: "scroll to see my work folder";
/*    font-size: clamp(1rem, 4vh, 32px); */
    font-size: min(2.25vw, 1.25rem);
    padding-top: calc(2* min(2.25vw, 1.25rem));

    font-weight: 400;
    color: black;
    width: 100%;
    text-align: center;
}

.first-folder-message svg
{
    fill:black;
    animation: bajar 2s ease-in-out infinite;
}

.first-folder-message svg path
{
    fill:black;
}

@keyframes bajar {
  0% {
    transform: translateY(0rem);        /* justo encima del contenedor */
  }

  50% {
    transform: translateY(1rem);
  }
 
  100% {
    transform: translateY(0rem);
  }
}


.folder-cover
{
position: relative;
}
.folder-cover .tab{
    background-color: var(--col-red);
    height: max-content;
}
.folder-cover .fake-tab-tab{
    fill:var(--col-red);
}

.main-container{
box-sizing: border-box;
width: 100%;
max-width:850px;
display: flex;
flex-direction: column;
align-items: center;
}

.envelope{
  
    box-sizing: border-box;
width: 100%;
padding:4rem;
background-color: var(--col-orange);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
filter:drop-shadow(0px -4px 10px rgba(0,0,0, .25));
}
.envelope::after,
.envelope::before
{
    pointer-events: none;
    touch-action: none ;
}
.envelope::after
{
        content: "";
    width: var(--envelope-extra-w);
    height: 4rem;
    position: absolute;
    /* background-color: var(--col-orange); */
    top: -3.95rem;
    left: 0rem;
    z-index: 1000;
    border-bottom: 4rem solid var(--col-orange);
    border-right: var(--envelope-fold-w) solid transparent;
}

.envelope::before
{
    content: "";
    width: var(--envelope-extra-w);
    height: 4rem;
    position: absolute;
    /* background-color: var(--col-orange); */
    top: -3.95rem;
    left: calc((100% - var(--envelope-extra-w)) );
    z-index: 1000;
    border-bottom: 4rem solid var(--col-orange);
    border-left: var(--envelope-fold-w) solid transparent;
}

.envelope-second::after,
.envelope-second::before
{
     border-bottom: 4rem solid var(--col-blue);
}

.envelope-second{
    width: 100%;
    background-color: var(--col-blue);
    padding:0;
    padding-top: clamp(30vh, 50vh,250px);
    padding-bottom: 0;
    margin-top:calc(-4 * var(--tab_tab_h));
}

.folder-cover-second {
width:100%;

}
.envelope-second .file{
    transition: all 1s 0s;
    font-size: clamp(3vw, 4rem, 50px);
        transform: rotate(2deg) translateY(0);
}
.visible .file{
        transform: rotate(2deg) translateY(-85%);
}

.envelope-header{
       font-weight: 400;
    font-size: clamp(3.5rem, 7vi , 6.4rem);
    font-family: "p22-cusp-round" !important;
    color: black;
    text-align: center;
    width: 100%;
    
    margin:0px;
    padding-top:clamp(3rem, 3vh, 120px);
    padding-bottom:clamp(4rem, 3vh, 100px);
    text-shadow: .45rem .45rem 0px var(--col-white);
    box-sizing: border-box;
}


@media screen and (max-width: 415px) {

    :root
{
    --less-width: clamp(90vw, 90vw, 50rem);
    --nav_tab_w: clamp(6vw, 8rem, 120px);
    --envelope-extra-w: 32vw;
}
nav
{
width:100vw !important;
}

.envelope-second .file{
        font-size: clamp(1vw, 2rem, 20px);
        transform: rotate(2deg) translateY(-85%);
}
}