* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1px;
}
a{
    color: unset;
    text-decoration: none;
}

@font-face {
    font-family: font1;
    src: url('../fonts/Super\ Meatball.ttf') format('truetype'),
    
}

@font-face {
    font-family: font2;
    src: url('../fonts/SuperMario256.ttf') format('truetype'),


}
@font-face {
    font-family: font3;
    src: url('../fonts/Acumin-RPro.otf') format('truetype'),


}
:root {
    --primary-color: rgb(248, 237, 248);
        --tertiary-color: #002620;
    --secondary-color: #5e3c6b;
    --accent-color: rgb(171, 128, 80);
    --font-1:font1;
    --font-2:font2;
    --font-3:font3;
  

    --padding: 100px 58px
}






  /* footer*/

    footer {
        min-height: 65vh;
        padding: var(--padding);
        position: relative;
        overflow: hidden;

        background: var(--primary-color);
    }

    footer .container {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

    footer li {
        list-style-type: none;
    }

    footer .text {
        display: grid;
        grid-template-columns: min(600px, 90%) auto;
        gap: 30px;
        justify-content: space-between;
    }

    footer .one {
        /* width: min(450px, 90%); */

    }

    footer .one p {
        font-family: var(--font-3);
        font-size: 20px;
        margin-top: 12px;
    }

    footer .one h1 {
        font-size: 70px;
        text-wrap: nowrap;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        gap: 7px;
        font-family: var(--font-3);
        font-size: 20px;
    }

    footer .two {
        display: flex;
        justify-content: space-between;
        gap: 60px;
        font-family: var(--font-1);
        font-size: 30px;
    }


    footer .content {
        min-height: 35vh;
        padding: 30px 25px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        /* border: 1px solid rgba(71, 71, 71, 0.583); */
        background: rgb(248, 237, 248);
        box-shadow: 5px 5px 0px var(--tertiary-color), rgb(255, 255, 255) 0px 3px 1px 0px inset;
        background-color: var(--secondary-color);
        color: var(--primary-color);

    }

    footer .content h2 {
        font-size: 50px;

    }

    footer .content .input {
        display: flex;
        width: min(700px, 90%);
        /* background-color: var(--secondary-colo       r); */
        border: unset;
        border-radius: 10px;
        align-items: center;
        padding: 0px 10px;
        overflow: hidden;
        height: 55px;
        padding-right: unset;
        box-shadow: 5px 5px 0px var(--tertiary-color), rgb(255, 255, 255) 0px 3px 1px 0px inset;
        background-color: var(--primary-color);
    }

    footer .content .input input {
        border: none !important;
        background: unset !important;
        color: black;
        position: relative;
        top: 4px;
        font-size: 20px;
    }

    footer .content a {
        padding: 20px 20px;
        position: relative;
        left: 5px;

        transition: all .2s ease;

        &:hover {
            background-color: var(--secondary-color);

        }
    }

    footer .content .input a i {
        color: rgb(0, 0, 0);
        height: 100%;
    }

    footer .content p {
        font-family: var(--font-3);
        width: min(950px, 100%);
        font-size: 20px;
    }


    footer .bottom {}

    footer .bottom .line {
        background-color: var(--secondary-color);
        height: 2px;
        width: 100%;

        background-color: var(--secondary-color);
    }

    footer .bottom h6 {
        font-family: var(--font-3);
        font-size: 20px;
        text-align: center;
    }