:root {
    --b1: #212121;
    --b2: #5D4037;
    --l1: #fff9e6;
    --l2: #fceeba;
    --c1: #EC407A;
    --c2: #42A5F5;
    --c3: #2AA63E;
    --c4: #FFEE58;
    --c5: #FF7043;
}

* {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

body {
    margin: 0;
    background: var(--l1);
    width: 100%;
    overflow: hidden;
    color: var(--b2);
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.f-1 {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

.f-2 {
        font-family: "Modak", system-ui;
        font-weight: 400;
        font-style: normal;
}
.f-3 {
    font-family: "Vampiro One", system-ui;
    font-weight: 400;
    font-style: normal;
}
.f-4 {
    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
main {
    margin: 1rem;
    border: 2px dashed var(--b2);
    background: #FCEEBA;
    width: calc(100% - 2rem - 4px);
    height: calc(100vh - 2rem - 4px);
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    position: relative;
}

.intro{
    top:0;
    left:0;
    z-index:99;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FCEEBA;
    display: grid;
    overflow: hidden;
    place-items: center;
    visibility: hidden;
    animation: into 2s ease-out  ;
}

@keyframes into {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

header {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    width: calc(80% - 40px);
    button {
        border-radius: 35px;
        padding: 8px 8px 6px 8px;
        background: white;
        box-shadow: 3px 3px 0 var(--b2);
    }
    button:hover {

        background: var(--l1) !important;
        transition: 0.2s;
        transform: translate(1px,1px);
        box-shadow: 1px 1px 0 black;
    }
}
.h-t {
    text-align: center;
    color: var(--b2);
    text-decoration: none;
    font-size: 2rem;
}
.h-nav {
    border: 2px solid var(--b2);
    background: #FFF9E6 ;
    border-radius: 25px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-right: 8rem;
    a {
    text-decoration: none;
    color: var(--b1);
    }
}
.n-act {
    border: 1px solid var(--b2);
    color: var(--l1);
    border-radius: 15px;
    padding: 6px 10px;
    background: var(--c5);
}

.section-a {
    background: #DB2777FF ;
    border-top: 3px solid var(--b2);
    color: #FFF9E6;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2rem 3rem;
}
.a-ls {
    width: 40%;
}
.a-rs {
    width: max-content;
}
.a-title-1 {
    color: #FFF9E6;
    font-size: 4rem;

}
.a-buy{
    position: absolute;
    right: 0;
    bottom: 2%;
    border-radius: 35px;
    padding: 10px 16px;
    background: white;
    box-shadow: 3px 3px 0 var(--b2);
    color: var(--c5);
    font-size: 2rem;
    border: 3px solid var(--b2);
}
.a-buy:hover {
    background: var(--l1) ;
    transition: 0.2s;
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 black;
}
.h-1 {
    background-image: linear-gradient(to right, #f6bb26 0%, rgba(94, 234, 212, 0.87) 100%);
    background-position: left bottom;
    background-size: 100% 2em;
    background-repeat: no-repeat;
    padding: 0.1rem 0.52rem;
    color: #ffffff;
}

.a-span {
    border-left: 11px dashed #ffffff;
    filter: drop-shadow(0px 0px 2px #ffffff);
}
.c-bg {
    position: absolute;
    width: 600px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 35px;
    background: transparent;
    transition: background-color 0.3s ease-in-out;
}
.a-img-c {
    position: relative;
    width: 600px;
    height: 100%;
    background: honeydew;
    border-radius: 35px;
    border: 5px solid var(--l1) ;
    transition: 1s;
    img {
        bottom:0;
        left: 50%;
        position: absolute ;
        width: 12rem;
    }
    img:nth-child(1) {
        rotate: -15deg ;
        left: 15%;
        z-index: 2;
        width: 10rem;
    }
    img:nth-child(2) {
        rotate: -8deg ;
        left: 28%;
        z-index: 3;
        width: 11rem;
    }
    img:nth-child(3) {
        left: 40%;
        z-index: 6;
    }
    img:nth-child(4) {
        rotate: 8deg;
        left: 55%;
        z-index: 5;
        width: 11rem;
    }
    img:nth-child(5) {
        left: 70%;
        rotate: 10deg;
        z-index: 4;
        width: 10rem;
    }
    img:nth-child(6) {
        rotate: -15deg;
        left: 0;
        z-index: 1;
        width: 8.5rem;
    }
}
.a-img-c img:hover {
    transition: 0.2s;
    transform: scale(1.1) ;
    rotate: 0deg;
    width: 12rem;
    filter: drop-shadow(0px 3px 4px rgb(255, 255, 255));
    z-index: 10;
}

.sl:hover ~ .c-bg {
    background: #c4ff5d;
}
.sm:hover ~ .c-bg{
    background: #FFDF20;
}
.sb:hover ~ .c-bg {
    background: #615FFF;
}
.sp:hover ~ .c-bg {
    background: #E1712B;
}
.ss:hover ~ .c-bg {
    background: #FF6467;
}
.sw:hover ~ .c-bg {
    background: #7CCF35;

}

.c-text {
    z-index: 11;
    position: absolute;
    top: 0;
    left: 50%;
}

.t-b {
    * {
        border: 1px #030000 dotted;
    }
}

.section-b {
    border-top: 3px solid var(--b2);
    background: var(--b1);
    width: calc(100% - 4rem - 4rem);
    padding: 3rem 4rem;
    height:60%;
    color: var(--l1);
    position: relative;
}
.b-title-1 {
    font-size: 3em;
    background: #121FCF;
    background: linear-gradient(to bottom right, var(--c1) 10%, var(--l2) 45%, var(--c2) 80%, var(--l2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.b-line-c {
    position: relative;
    width: 100%;
    height: 12em;
    overflow: hidden;

}
.b-line-c-a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 12em;
    box-shadow: 0 22px 29px 8px rgba(33, 33, 33, 0.6) inset , 0 -24px 29px 8px rgba(33, 33, 33, 0.80) inset;
}
.b-list {
    top: 0;
    left: 0;
    position: absolute;
    transition: ease-in 0.1s;
    animation: list-up 25s infinite linear ;
    margin: 0;
    li {
        background: linear-gradient(to bottom right, var(--c3) 10%, var(--l2) 45%, var(--c4) 80%, var(--l2) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.5em;
        margin: 0.5em 0;
    }
}
@keyframes list-up {
    from {
        top: 0;
    }
    to {
        top: -300%;
    }
}

.b-d-img-1 {
    position: absolute;
    width: 15%;
    top: 10%;
    right: 4%;
    z-index: 13;
}
.b-d-img-2 {
    position: absolute;
    width: 12%;
    top: 35%;
    right: 0;
    z-index: 13;
}

.section-c {
    border-top: 2px solid var(--b2);
    background: var(--b1);
    position: relative;
    width: calc(100% - 8rem);
    height: auto;
    padding: 8rem 4rem 3rem 4rem ;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 4rem;
    color: white;

}
.c-nt {
    border-radius: 35px;
    padding: 3rem 4rem;
        position: relative;
    div:nth-child(1) {
        font-size: 4rem;
    }
    div:nth-child(2) {
        font-size: 1rem;
        padding: 1rem 0 2rem 0;
    }

}
.c-nt:hover {
    transform: scale(1.1);
    z-index: 4;
    transition: ease-in 0.1s;
    div:nth-child(1) {
        filter: drop-shadow(0px 0px 2px #000000);
    }
    div:nth-child(2) {
        filter: drop-shadow(0px 0px 2px #000000);
    }
}
.c-nt-i1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.5rem;
    transform: rotate( -25deg);
}
.c-nt-i2 {
    width: 100%;
    border-radius: 30px;
    margin: auto;
}
.c-title {
    position: absolute;
    background: linear-gradient(to bottom right, var(--c5) 10%, var(--l2) 45%, var(--c4) 80%, var(--l2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    top: 1rem;
    left: 10rem;
    font-size: 4em;
    color: var(--l1);
}
.c-1 {
    background: #ffe359;
}
.c-2 {
    background: #385db2;
}
.c-3 {
    background: #efa98f;
}
.c-4 {
    background: #ff7e91;
}
.c-5 {
    background: #afea90;
}
.c-6 {
    background: #ffdb52;
}

.section-d {
    border-top: 3px solid var(--b2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 230px;
    gap: 8px;
    padding: 6rem 8rem;
    background: var(--c2);
    *{
        border-radius: 20px;
        object-fit: cover;
        width: 100%;
        height: 100%;
        border: 5px solid var(--l2);
    }
}
.d-img-1 {
    grid-row: span 2 / span 2;
}
.d-img-2 {
    grid-row: span 2 / span 2;
}
.d-img-5 {
    grid-row: span 2 / span 2;
}
.d-img-6 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}
.d-img-7 {
    grid-row: span 2 / span 2;
}

footer {
    padding: 3rem 6rem;
    background: var(--b1);
    border-top: 5px solid var(--b2);
    color: var(--l2);
    display: flex;
    flex-direction: row;
    height: 20vh;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.f-vb {
    border-left: 3px solid var(--l2);

}
.f-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    span {
        font-size: 2em;
    }
    a {
        text-decoration: none;
        color: var(--l2);
        text-align: center;
    }
}
.foo-1-title {
    font-size: 3em;
}
.f-img-c {
    position: absolute;
    top: -10px;
    left: 0;
    display: flex;
    flex-direction: row;
    gap:0;
    align-items: baseline;
    img:nth-child(even) {
        width: 64px;
        translate: -40%;
        top: 0;
        right: 0;
    }
    img:nth-child(odd) {
        width: 32px ;
        rotate: 90deg;
    }
    animation: p 16s infinite linear;
}
@keyframes p {
    from {
        left: -50%;
    }
    to {
        left: 100%;
    }
}