/* urbanist-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/urbanist-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* urbanist-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/urbanist-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* urbanist-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/urbanist-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* urbanist-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/urbanist-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* urbanist-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/urbanist-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* urbanist-900 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/urbanist-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  

:root {
 --black: #201e21;
 --white: rgb(249, 240, 215);
 --pink:  #e95278;
 --rosa:  #F7B2BD;
 --green:  #64B6AC;
 --yellow:  #ead24b;
 --border:  3px solid var(--black);
 --shadow: drop-shadow(5px 5px 0px var(--black));
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Urbanist', sans-serif;
    background-color: var(--white);
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}


/* HEADER  */

header {
    background-color:var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 10rem;
}

header a {
    color: var(--black) ;
}

header ul {
    display: flex;
    margin: 0;
}

header ul li {
    margin-left: 1rem;
}

/* HERO SECTION  */
.hero-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: rem;
}

.hero {
    width: 101%;
    height: calc(100vh);
    background-color: var(--black);
    margin: 0;
    border-bottom: 2px solid var(--black);
}

.row1, .row2, .row3{
    display: flex;
    /* height: calc(100vh / 3); */
}

.row1, .row3 {
    height: 32%;
}

.row2 {
    height: 36%;
}

.row1 div, .row2 div , .row3 div{ 
transition: background-color .3s ease, width 1s ease;
border: 2px solid var(--black);
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.hero_heading {
    font-size: 6rem; 
    text-align: right;
    color: var(--white);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--black);
    filter: var(--shadow);
    transition: all .6s ease;
    font-weight: 800;
    margin: 0 1rem;
}

.row3 div h2 {
    font-size: 3rem; 
    text-align: center;
    color: var(--black);
    max-width: 25rem;
}

.hero img {
    height: 50%;  
}

.p { background-color: var(--pink)}
.r { background-color: var(--rosa) }
.g { background-color: var(--green) }
.y { background-color: var(--yellow) }
.b { background-color: var(--black);}
.b2 { width: calc(100% / 3); }
.b3 { width: calc(100% / 3);}
.b4 { width: calc(100% / 3); }
.b5 { width: 56%;
    border-radius: 1rem;; }
.b6 { width: 22%; }
.b7 { width: 22%; }
.b8 { width:  calc(100% / 3); }
.b9 { width: calc(100% / 3);}
.b11 { width: calc(100% / 3); }


/* .b1:hover {width: 40%;}
.b2:hover {width: 40%;}
.b3:hover {width: 55%;}
.b4:hover {width: 40%;} */

.b5:hover {width: 85%;}
/* .b6:hover {width: 45%;}
.b7:hover {width: 45%;} 

.b8:hover {width: 40%;}
.b9:hover {width: 55%;}
.b10:hover {width: 40%;}
.b11:hover {width: 40%;} */


.b5:hover .hero_heading {
    color: var(--yellow);
    filter: drop-shadow(7px 7px 0px var(--black));
    font-size: 6.5rem;
}

.arrow img  {
    height: 4.5rem;
    aspect-ratio: 1/1;
    transition: all .4s ease;
    filter: var(--shadow);

}

.arrow img:hover {
    height: 4.9rem;
    filter: drop-shadow(8px 8px 0px var(--black));

}


.b5 .arrow {
    display: none;
}

.main {
    padding: 5rem;
}

.main-intro {
    text-align: center;
}

/* ARCHIVE */

.explain-container {
    background-color: var(--rosa);
    padding:  5rem 0;
    border-bottom: var(--border);
    background-repeat: repeat;
}

.explain {
    border: var(--border);
    background-color: white;
    margin: 0 16rem;
    box-shadow: 5px 5px 0px var(--black);
    border-radius: 1rem;
    overflow: hidden;
}
.explain p {
    line-height: 1.5;
    font-size: 1.2rem;
    margin-top: 0;
}

.explain-info {
    padding: 4rem;

}

.explain-top {
    background-color: var(--yellow);
    height: 3rem;
    border-bottom: var(--border);
    display: flex;
    align-items: center;
    padding: 0 2rem;
}

.explain-top span {
    border: var(--border);
    background-color: var(--green);
    height: 1.1rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-right: .8rem;
    display: block;
}

.sparkle_r {
    animation: spin_r 8s linear infinite;
}

@keyframes spin_r {
from { rotate: 0deg; }
to { rotate: 360deg; }
}

.sparkle_l {
    animation: spin_l 8s linear infinite;
}

@keyframes spin_l {
from { rotate: 0deg; }
to { rotate: -360deg; }
}

.nav-total {
    display: flex;
    justify-content: center ;
    width: 100%;
    border-bottom: var(--border);
}

.nav-container {
    display: flex;
}

.nav-container span img {
    height: 8rem;
}

.website-nav {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 4rem;
    margin: 0 3rem;
}

.website-nav h3 {
    text-align: center;
    max-width: 40rem;
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
}

.heading_intro , .explain_heading, .container_imp_dat h1{
    font-size: 3.5rem; 
    color: var(--rosa);
    -webkit-text-stroke-width: 2.7px;
    -webkit-text-stroke-color: var(--black);
    filter: drop-shadow(3px 3px 0px var(--black));
    font-weight: 900;
    margin: 0;
    margin-bottom: .9rem;
    display: inline-block;
}

.explain_heading, .container_imp_dat h1 {
    color: var(--yellow);
}

 button {
    background-color: var(--yellow);
    padding: .5rem 1rem ;
    font-size: 1.1rem;
    margin: 0 .4rem;
    box-shadow: 5px 5px 0px var(--black);
    border: var(--border);
    transition: all .3s ease;
    border-radius: .5rem;
    font-family: 'Urbanist', sans-serif;
    color: var(--black);
}
button:hover {
    background-color: var(--pink);
    box-shadow: 8px 8px 0px var(--black);

} 

.active {
    background-color: var(--pink);
}

.all_2023 {
    /* background-color: rgb(243, 187, 187); */
    /* margin-bottom: 1rem; */
    margin-top: 2rem;
    padding-bottom: 4rem;
    width: 100%;
    /* border-bottom: var(--border); */
}

.all_2022 {
    margin-top: 2rem;
}

.all_websites{
    display: flex ;
    flex-wrap: wrap;
    justify-content: space-between
 
}

.heading_year {
    color: var(--black);
    font-size: 1.8rem;
    margin-bottom: 0;
    border-bottom: 4px solid var(--rosa);
    display: inline-block;
    padding-bottom: .3rem;
}

.year_description {
    font-size: 1.1rem;
    margin-top: .6rem;
}

.display_website {
    width: calc(100% / 2 - 3.4rem);
    margin: .5rem 0 .5rem 0;
    margin-bottom: 1.5rem;
    background-color: white;
    /* border-radius: 14px; */
    overflow: hidden;
    border: var(--border);
    padding: 1rem;
    box-shadow: 5px 5px 0px var(--black);
    transition: all .3s ease;
    border-radius: 1rem;
}

.display_website:hover {
    box-shadow: 9px 9px 0px var(--black);
}

.website_preview {
    background-color: var(--main);
    width: calc(100% - 8px);
    display: inline-block;
    aspect-ratio: 1 / .56;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--yellow);
    border: var(--border);
    border-radius: .5rem;
    
}

.website_preview img {
    width: 101%;
    transition: all .3s ease;
    /* opacity: 0; */
}

.display_website:hover .website_preview img {
    width: 105%;
}

.card-info {
    padding: 1rem;
}
.card-info h2 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 800;
    border-bottom: 4px solid var(--green);
    display: inline-block;
    color: var(--black);
    padding-bottom: .3rem;
    margin-top: .6rem;
}

.team_names {
    letter-spacing: 2px;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--black);
    margin-top: .6rem;
}



.footer {
    color: var(--black);
    border-top: var(--border);
    margin: 0;
    text-align: center;
    padding: 1rem;
}

.footer ul {
    padding: 0;
}

.footer ul li a {
    color: var(--black);
    font-size: 1rem;
    padding-bottom: .1rem;
    margin: 0 .4rem;
}

.footer ul li a:hover {
    border-bottom: 4px solid var(--rosa)
}

.container_imp_dat {
    margin: 5rem 10rem;
    padding: 3rem 5rem;
    border: var(--border);
    background-color: white;
    box-shadow: 5px 5px 0px var(--black);
    margin-top: 0;
    border-radius: 1rem;
}

.container_imp_dat h1 {
    display: block;
    margin-bottom: 0;
}

.container_imp_dat h2 {
    margin: 2rem 0 .6rem 0;
    border-bottom: 4px solid var(--rosa);
    display: inline-block;
    color: var(--black);
    padding-bottom: .3rem;
    font-size: 1.4rem;
    
}
.container_imp_dat p {
    margin-top: 0;
    font-size: 1.1rem;
}

.back {
    margin: 0 10rem;
    margin-top: 5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    display: inline-block;
    padding-bottom: .3rem;
    border-bottom: 4px solid var(--white);
}

.back:hover {
    border-bottom: 4px solid var(--rosa);    
}

.back a{
    color: var(--black);
    font-size: 1.3rem;
}

.back span img {
    height: 1rem;
    margin-right: .7rem;
}