* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-style: 1rem;
    color: #5F2300;
}



:root {
    --margin-grid: 2rem;
    --primary-color: #FF55A0;
    --secondary-color: rgb(85, 50, 20);
    --terciary-color: white;
}

@media (max-width: 992px) {
    :root {
        --margin-grid: 1.5rem;
    }
}

@media (max-width: 576px) {
    :root {
        --margin-grid: 1rem;
    }
}

.container-fluid {
    padding-left: var(--margin-grid);
    padding-right: var(--margin-grid);
}

.row {
    --bs-gutter-x: 1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--terciary-color);
    text-shadow: 0px 0px 5px #FF55A0;
}


*::selection {
    color: #FF55A0;
    background: yellow;
}

i::selection {
    color: yellow;
    background: #FF55A0;
}


html {
    scroll-behavior: smooth;
}

body {
    cursor: url('../img/cursor-02.png'), auto;
}



/*=========== HEADER ========= */

header.menu {
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-items: center;
    height: 4rem;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 var(--margin-grid);
    font-size: .8rem;
    background-image: linear-gradient(rgb(255, 85, 160), white);

}

header.menu img {
    width: 5.5rem;
    height: auto;
    mix-blend-mode: multiply;
}

@media (max-width: 576px){
    header.menu  img {
    width: 5rem;
    height: auto;
    }
}

header.menu nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
}

@media (max-width: 576px) {
    header.menu nav ul {
        display: flex;
        gap: .5rem;
        list-style: none;
    }
}


body.playground header.menu-playground {
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-items: center;
    height: 4rem;
    width: 100%;
    top: 0;
    left: 0;
    padding: var(--margin-grid);
    font-size: .8rem;
}

body.playground header.menu-playground img {
    width: 5rem;
    height: auto;
}

body.playground header.menu-playground nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
}

@media (max-width: 576px) {
    body.playground header.menu-playground nav ul {
        display: flex;
        font-size: .8rem;
        gap: .5rem;
        list-style: none;
    }
}

/*=========== MAIN ========= */

main {
    margin-top: 4rem;
    min-height: calc(100dvh - 4rem);
}


/*=========== HOME ========= */

main.home .home-image {
    padding: var(--margin-grid);
    width: 100%;
    margin-top: 10rem;
    margin-bottom: 15rem;
}

@media (max-width: 576px) {
    main.home .home-image {
        margin-top: 8rem;
        margin-bottom: 5rem;
    }
}

main.home .home-image img {
    width: 100%;
    height: auto;
}



main.home .division {
    display: flex;
    justify-content: center;
    padding: var(--margin-grid);
    filter: drop-shadow(0px 0px 10px aquamarine);
}

@media (max-width: 576px) {
    main.home .division {
        margin-bottom:5rem;
    }
}

main.home .division img {
    width: 30%;
    height: auto;
}
@media (max-width: 576px) {
    main.home .division img {
        opacity: 0;
    }
}

/*=========== HOME LIST ========= */

main.home section.list {
    padding-top: 12rem;
}

main.home section.list .card {
    border: 1px solid var(--secondary-color);
    padding: 1rem;
    border-radius: 10rem;
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    main.home section.list .card {
        border: 1px solid var(--secondary-color);
        padding: 1.5rem;
        border-radius: 10rem;
        margin-bottom: 1rem;
        height: 4rem;
        align-items: center;
    }
}

main.home section.list .card:hover {
    box-shadow: 0px 0px 20px #FF55A0;
}

main.home section.list .card .card-title {
    font-size: 1rem;
}

main.home section.list a:hover {
    text-shadow: 0px 0px 0px;
}


main.home section.list .card .card-type {
    text-align: left;
}

@media (max-width: 576px) {
    main.home section.list .card .card-type {
        font-size: 0rem;
    }
}


main.home section.list .card .card-date {
    text-align: right;
}



main.home .more-soon {
    padding-top: 4rem;
    font-family: "filmotype-yale", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 5rem;
    color: var(--secondary-color);
    text-shadow: 0px 0px 5px #FF55A0;
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    main.home .more-soon {
    padding-top: 0rem;
    font-family: "filmotype-yale", sans-serif;
    font-weight: 0;
    font-style: normal;
    font-size: 0rem;
    color: var(--secondary-color);
    text-shadow: 0px 0px 5px #FF55A0;
    display: flex;
    justify-content: center;
    opacity: 0;
    }
}

main.home .more-soon-alt img {
    opacity: 0;
    margin-top: 0rem;
    width:0rem;
}

@media (max-width: 576px) {
    main.home .more-soon-alt img{
        margin-top: 2rem;
        width:10rem;
        opacity: 100;
}
}




/*=========== WORK ========= */

main.work section.info {
    position: sticky;
    top: 4rem;
    padding-right: 2rem;
    overflow: visible;
}

@media (max-width: 576px) {
    main.work section.info {
    margin-top: 3rem;
    padding-right: 2rem;
    }
}


main.work section.info .info-title {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 2rem;
}

@media (max-width: 576px) {
    main.work section.info .info-title {
        font-size: 1.5rem;
    }
}


main.work section.info .info-details {
    display: flex;
    justify-content: left;
    margin-bottom: .25rem;
}

main.work section.info .info-date {
    font-size: 1rem;
    border: 1px solid var(--secondary-color);
    padding: .5rem;
    border-radius: 10rem;
    width: 4rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.work section.info .info-regime {
    font-size: 1rem;
    border: 1px solid var(--secondary-color);
    padding: .5rem;
    border-radius: 10rem;
    width: 10rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .25rem;
}

main.work section.info .info-type {
    padding-bottom: .5rem;
    font-size: 1rem;
    border: 1px solid var(--secondary-color);
    padding: .5rem;
    margin-bottom: 1rem;
    border-radius: 10rem;
    width: 9.2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


main.work section.info .info-sinopsis {
    font-size: 1rem;
    line-height: 1.3rem;
    margin-bottom: 2rem;
}

@media (max-width: 576px) {
    main.work section.info .info-sinopsis {
        margin-bottom: 2rem;
    }
}


main.work section.info .buttons {
    display: flex;
    justify-content: left;
    position: sticky;
    margin-top: 3rem;
}

@media (max-width: 576px) {
    main.work section.info .buttons {
        position: sticky;
        margin-top: 5rem;
        margin-bottom: 2rem;
    }
}


main.work section.info .buttons .button-back {
    border: 1px solid var(--secondary-color);
    padding: 1rem;
    border-radius: 10rem;
    margin-bottom: 1rem;
    width: 3rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.work section.info .buttons .button-back:hover {
    box-shadow: 0px 0px 10px #FF55A0;
}

main.work section.info .buttons .button-back img {
    height: 1.5rem;
}

main.work section.info .buttons .button-forward {
    border: 1px solid var(--secondary-color);
    padding: 1rem;
    border-radius: 10rem;
    margin-left: .25rem;
    width: 3rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.work section.info .buttons .button-forward img {
    height: 1.5rem;
}

main.work section.info .buttons .button-forward:hover {
    box-shadow: 0px 0px 10px #FF55A0;
}

main.work section.single-image {
    margin-top: 2rem;
}

main.work section.single-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: .5rem;

}

main.work section.single-image iframe {
    width: 100%;
    height: auto;
    display: block;
    padding-bottom: .5rem;

}




/*=========== ABOUT ========= */

main.about {
    margin-top: 6rem;
    font-size: 2.5rem;
    line-height: 1.4;
}

@media (max-width: 576px) {
    main.about {
    margin-top: 7rem;
    font-size: 1.5rem;
    line-height: 1.4;
    }
}

main.about .contacts {
    font-size: 1rem;
    margin-top: 10rem;
    line-height: 1.8;
}

@media (max-width: 576px) {
    main.about .contacts {
    font-size: 1rem;
    margin-top: 10rem;
    line-height: 1.8;
    }
}


main.about .snail {
    display: flex;
    justify-content: right;
    margin-top: 10rem;
}

main.about .snail img {
    width: 15rem;
    height: auto;
    transform: scaleX(-1);
    filter: blur(0px);
}

main.about .snail img:hover {
    width: 15rem;
    height: auto;
    transform: scaleX(-1);
    filter: blur(0px);
    rotate: 0deg;
    transition: 0s;
}

@media (max-width: 576px) {
    main.about .snail img {
    width: 10rem;
    height: auto;
    transform: scaleX(-1);
    }
}


main.about img {
    width: 2.5rem;
    height: auto;
    filter: blur(5px);
}

main.about img:hover {
    filter: blur(0px);
    rotate: 360deg;
    transition: 1s;
}

@media (max-width: 576px) {
    main.about img {
    width: 1.5rem;
    height: auto;
    filter: blur(0px);
    }
}

@media (max-width: 576px) {
    main.about img:hover {
    filter: blur(0px);
    rotate: 0deg;
    transition: 0s;
    }
}


/*=========== PLAYGROUND ========= */

body.playground {
    background: url('../img/sky.jpg') no-repeat center center fixed;
    background-size: cover;
}

body.playground img {
    height: 100%;
    margin: 0;
    padding: 0;
}

main.playground .strawberry {
    display: flex;
    justify-content: center;
    filter: drop-shadow(0px 0px 10px white);
    margin-top: 4rem;
}

@media (max-width: 576px) {
    main.playground .strawberry{
    margin-top: 8rem;
    }
}

main.playground .strawberry img {
    width: 4rem;
    height: auto;
}

main.playground .title {
    display: flex;
    justify-content: center;
    font-family: "filmotype-yale", snas;
    font-size: 5rem;
    color: var(--terciary-color);
    margin-top: 2rem;
    text-shadow: 0px 0px 5px white;
    text-align: center;
    line-height: 1;

}

@media (max-width: 576px) {
    main.playground .title {
    margin: 2rem;
    font-size: 3.5rem;
    line-height: 1;
    }
}


main.playground .text {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    color: var(--terciary-color);
    margin-top: 2rem;
    text-shadow: 0px 0px 5px white;
}

@media (max-width: 576px) {
    main.playground .text {
    margin: 2rem;
    }
}

@media (max-width: 576px) {
    main.playground .title
    main.playground .text {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 50%;
    }
}


main.playground .projects {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 6rem;
}


main.playground .projects img {
    width: 12rem;
    height: auto;
    margin-bottom: 4rem;
}

main.playground .projects img:hover {
    filter: drop-shadow(0px 0px 5px hotpink);
}

main.playground .projects .container-fluid {
    text-align: center;
}