* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*fonts*/
.mogra-regular {
    font-family: "Mogra", system-ui;
    font-weight: 400;
    font-style: normal;
}

.gorditas-regular {
    font-family: "Gorditas", serif;
    font-weight: 400;
    font-style: normal;
}
/*fonts*/

#container {
    display: grid;
    text-align: left;
    overflow: hidden;
    font-size: 2.074rem;
}

h1{
font-family: "Mogra", system-ui;
}

body {
    background-color: #E5F8B3;
    font-family: "Gorditas", serif;     
    font-size: clamp(2.074rem, 2.5vw, 1.1rem);
    width: 100%;
}

img {
   width: 100%; 
}

/*header*/

header{
    background-color: #527F24;
    font-size: 2.074rem;
    padding: 0.5rem;
    width: 100%;
}

/*nav*/

nav a{
    color: #94d789;
}

nav a:hover{
    color: #fdfefc;
}

nav a:hover {
    transform: 0.75s;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 3rem;
}


/*header*/

/*body*/

#description-txt, #type-txt, #collection-txt {
    padding: 1rem;
    margin: 1rem;
    background-color: #CCE36E;
    border: 0.5rem solid #80A450;
    border-radius: 4rem;
    font-size: clamp(1rem, 3vw, 1.6rem);
}
 

#img-description, #img-type{
        display: grid;
        display: inline-block ;
        grid-template-columns: 1fr;
        padding: 1rem;
        justify-items: center;
        align-content: center;
        position: relative;
        width: 100%;
    }

.simikitty{
        width: 50%;
    }
.simiwork{
        width: 50%;
    }

.simikitty, .simiwork{
    animation: movingsmisk;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}


@keyframes movingsmisk {
    0% {
            transform: translateX(-20px);
        }
    
    
        50% {
            transform: translateX(400px) rotateZ(180deg);
        }
    
        100% {
            transform: rotate (360deg);
        }
    }
 

.title-scroller {
    font-size: 3rem;
    overflow: hidden;
    display: flex;
    user-select: none;
    gap: 2rem;
    width: 100vw;
}

.title-scroller ul {
    list-style: none;
    flex-shrink: 0;
    display: flex;
    min-width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    font-family: "Mogra", system-ui;;
    color: #fdfefc;
    background-color: #527F24;

    animation: scroll 20s linear infinite
}

 @keyframes scroll {
            from {
                transform: translateX(-90%);
            }
            to {
                transform: translateX(30%);
            }
        }

#smiski-line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    width: 70%;
    position: relative;
    overflow: hidden;
    
}

#smiski-line h1 {
font-family: "Gorditas", serif;
font-size: 1.5rem;
}

#smiski-line img:hover{
    transition: 0.5s;
    transform: scale(1.25);
}


.inside-cont {
    padding: 2rem;
}

.slider-wrapper {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
}

.slider {
    display: flex;
    aspect-ratio: 16/9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    border-radius: 0.5rem;
}

.slider img {
    flex: 1 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
}

.slider-nav {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.slider-nav a {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition-property: opacity ease 250ms;
}

.slider-nav a:hover {
    opacity: 1;
}

footer{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    font-size: 0.9rem;
    text-align: center;
}
    
@media screen and (min-width: 666px) {
    #smiski-line {
        width: 50%;
        grid-template-columns: 1fr;
    }

    .title-scroller {
        font-size: 2rem;

    }

}

@media screen and (min-width: 888px) {
    #smiski-line {
        width: 60%;
        grid-template-columns: 1fr 1fr;
    }

    .title-scroller {
        font-size: 2.5rem;

    }
}


@media screen and (min-width: 999px) {
        #smiski-line  {
                width: 50%;
                grid-template-columns: repeat(2, 4fr);
            }

        .title-scroller {
            font-size: 3rem;

            }

        @keyframes movingsmisk {
            0% {
                transform: translateX(-20px);
            }
    
    
            50% {
                transform: translateX(900px) rotateZ(180deg);
            }
    
            100% {
                transform: rotate (360deg);
            }
        }
}