@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style: none;
 }
 
 
 html {
    background: lightblue;
    background-size :cover;
    height: 100%;

    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

body {
    margin-top: 12em;

    width: 100%;
    height: calc(100vh - 12em);

    background: green url(../images/grass-texture.jpg);
    background-size:200px;
    background-repeat: repeat;

    @media (max-width: 1000px) {
        margin-top: 18em;
        width: 100%;
        height: calc(100vh - 18em);
        background: green url(../images/grass-texture.jpg);
        background-size: 200px;
        background-repeat: repeat;
    }

    main {
        height: 100%;
        width: 100%;

        dialog  {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            width: 70vw;
            height: 50vh;


            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3em;

            border-radius: 1em;

            border: none;
            background:  linear-gradient(#fe5e10 ,#ff915c );

            button {
                padding: 1em 2em;
                font-family: 'DM Sans', sans-serif;
                font-weight: 1000;
            }

            &::backdrop {
                background-color: rgba(255, 255, 255, 0.8);
            }

            p {
                font-size: 2em;
                color: white;
                padding: 0 1em;
                font-family: 'DM Sans', sans-serif;
                font-weight: 1000;
                text-align: center;
            }

        }

        .animal {
            position: absolute;
            z-index: 4;
            font-size: 3em;
            width: 60px;
            height: auto;
            transition: ease-in-out 6s;
            transform-origin: center center; 
            animation-play-state: paused;
        }

        .shopbutton {
            position: absolute;
            bottom: 1em;
            left: 1em;
            z-index: 9;
            padding: 1em 3em;
            background: linear-gradient(#fe5e10 ,#ff915c );
            border-bottom: 5px solid #e44600;
            
            border-radius: 50px;
            transition: ease 1s;

            @media (prefers-reduced-motion) {
                transition: 0s !important;
            }

            font-size: 1.2em;
            text-transform: uppercase;

            color: white;
            text-decoration: none;

            font-family: 'DM Sans', sans-serif;
            font-weight: 1000;

            justify-content: center;
            align-items: center;
            display: flex;
            gap: 10px;

            &:hover {
                transform: scale(1.05);
                transition: ease 1s;
            }

            .shop-svg {
                color: white;
                width: auto;
                height: 20px;
                transform: rotate(90deg);
                transition: ease 1s;

                fill: none;
                stroke: #fff;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 9px;
            }


        }

        .removeallbutton {
            position: absolute;
            bottom: 1em;
            right: 1em;
            z-index: 9;
            padding: 0.5em 2em;
            background: linear-gradient(#fe5e10 ,#ff915c );
            border-bottom: 5px solid #e44600;
            
            border-radius: 50px;
            transition: ease 1s;
            @media (prefers-reduced-motion) {
                transition: 0s;
            }
            font-size: 1.2em;
            text-transform: uppercase;

            text-decoration: none;

            font-family: 'DM Sans', sans-serif;
            font-weight: 1000;

            justify-content: center;
            align-items: center;
            display: flex;
            gap: 10px;

            g {
                fill: white;
            }

            &:hover {
                transform: scale(1.05);
                transition: ease 1s;
            }

            svg {
                width: 2em;
                height: 2em;
                fill: white;
            }


        }

        .fence {
            position: absolute;
            top: 100px;
            height: 100px;
            width: 100%;
            background: url(../images/Fence.png);
            background-repeat: repeat-x;
            background-size: contain;
            z-index: 1;

            @media (max-width: 1000px) {
                top: 200px;
            }

        }

        section {

            position: absolute;
            bottom: -200px;
            width: 100%;
            height: 200px;
            background: linear-gradient(#fe5e10 ,#ff915c ) ;

            display: flex;
            transition: ease 1s;

            @media (prefers-reduced-motion) {
                transition: 0s;
            }
            z-index: 5;
            overflow-y: scroll;

            ul {

                display: flex;
                align-items: center;
                flex-wrap: wrap;
                list-style: none;
                padding: 1em 2em;
                gap: 2em;
                flex-wrap: wrap;
                overflow: scroll;

                li {
                    
                    

                    a {
                        
                        background-color: yellow;
                        height: 2em;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        padding: 1em 2em;
                        border-radius: 10px;
                        font-family: 'DM Sans', sans-serif;
                        font-weight: 1000;
                        color: black;
                        text-transform: uppercase;
                        text-decoration: none;

                        &:hover {
                            transform: scale(1.1);
                        }
                        

                    }

                }

            }

        }

    }

}

footer {
    left: -300px;
    top: 0;
    z-index: 10;
    position: absolute;
    background: linear-gradient(#fe5e10 ,#ff915c );
    height: 100%;
    width: 300px;
    max-width: 300px;
    padding: 2em 0;

    transition: ease 1s;

    @media (prefers-reduced-motion) {
        transition: 0s;
    }

    display: flex;
    flex-direction: column;
    align-items: center;



    #menu {
        left: 300px;
        padding: 10px;
        background: linear-gradient(#fe5e10 ,#ff915c );
        border-radius: 0 10px 10px 0;
        position: absolute;
        top: 5%;
        z-index: 3;

        height: 30px;
        width: 20px;

        @media (max-width:1000px) {
            height: 50px;
        }
        

        svg {

            height: 30px;
            fill: none;
            stroke: #fff;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 9px;

            transition: ease 0.4s;

            @media (prefers-reduced-motion) {
                transition: 0s;
            }
            transform: rotate(180deg);

            @media (max-width:1000px) {
                height: 50px;
            }

        }
    
    }
    .teamwebsite {
        font-family: 'DM Sans', sans-serif;
        font-weight: 1000;
        padding: 1em 2em;
        background-color: white;
        border-radius: 10em;
        margin-top: 1em;
        text-decoration: none;
        color: black;
    }

    .cats-galore {
        width: fit-content;
        height: fit-content;
        position: absolute;
        bottom: 5em;
        left: 0;
    }

    ul {
        z-index: 2;

        gap: 2em;
        justify-content: center;
        display: flex;
        flex-direction: column;

        li {
            justify-content: center;
            display: flex;
            flex-direction: column;
            color: white;
           

            &:nth-of-type(1) {
                justify-content: center;
                display: flex;
            }

            img {
                width: 100px;
                border-radius: 1em;
                border: 5px solid white;
            }

            summary {
                font-family: 'DM Sans', sans-serif;
                font-weight: 1000;
                font-size: 1.5em;
                list-style: revert;
                color: white;
                transition: ease 1s;


            }

            
            p {
                font-family: 'DM Sans', sans-serif;
                font-weight: 1000;
                max-width: 200px;
            }


        }



    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.shopsection ul::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.shopsection ul {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.death {
    transform: scale(50) !important;

    @media (prefers-reduced-motion) {
        transform: scale(1) !important;
    }

}