:root {
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-primary: #303030;
    --color-secondary: #4b9f91;
    --color-tertiary: #0088a8;
    --color-fourth: #01abc4;
    --color-fifth: #ddd5c8;
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    font-family: system-ui;
}

body {
    overflow-x: hidden;
}

/* Button styles */
.button_1_style {
    background-color: var(--color-secondary);
    color: var(--color-white);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.button_2_style {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out,border 0.4s ease-in-out;
}

.button_2_style:hover {
    background-color: var(--color-fifth);
    color: var(--color-primary);
    border: 2px solid transparent;
}

.button_1_style:hover {
    background-color: var(--color-fifth);
    color: var(--color-primary);
}
/* ################## */

.menu_container {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 100;
    position: fixed;
    clip-path: circle(0% at 100% 0);
    transition: all .6s ease-in-out;

    & img {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 100px;
        cursor: pointer;
    }

    & .nav_links_container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        & img {
            display: none;
        }

        & button {
            font-size: 60px;
            color: #e1e1e1;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            border: none;
            background: none;
            text-transform: uppercase;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: color;

            & a {
                text-decoration: none;
                color: #fff;
            }
        }

        & button:focus,
        button:hover {
            color: #fff;
        }

        & button:focus:after,
        button:hover:after {
            width: 100%;
            left: 0%;
        }

        & button:after {
            content: "";
            pointer-events: none;
            bottom: -2px;
            left: 50%;
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: #fff;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: width, left;
        }

        & #hover_link:after {
            width: 100% !important;
            left: 0%;
            color: #fff;
        }
    }
}

.menu_transition {
    clip-path: circle(150% at 100% 0);
}

.nav_container {
    width: 100vw;
    height: 15vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    & .nav_img_container {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;

        & img {
            height: 100%;
        }
    }

    & .nav_links_container {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & img {
            height: 100px;
            display: none;
        }

        & button {
            font-size: 20px;
            color: #e1e1e1;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            border: none;
            background: none;
            text-transform: uppercase;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: color;

            & a {
                text-decoration: none;
                color: #fff;
            }
        }

        & button:focus,
        button:hover {
            color: #fff;
        }

        & button:focus:after,
        button:hover:after {
            width: 100%;
            left: 0%;
        }

        & button:after {
            content: "";
            pointer-events: none;
            bottom: -2px;
            left: 50%;
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: #fff;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: width, left;
        }

        & #hover_link:after {
            width: 100% !important;
            left: 0%;
            color: #fff;
        }
    }
}

.header_container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.8) 100%
        ),
        url("../assets/imgs/header.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    & h1 {
        color: var(--color-white);
        width: 80%;
        margin-bottom: 2%;
        text-align: center;
        font-size: 70px;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }

    & .buttons_header_container {
        width: 38%;
        height: 9%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & .button_1_style {
            width: 48%;
            height: 80%;
            font-size: 22px;
        }

        & .button_2_style {
            width: 48%;
            font-size: 25px;
            height: 80%;
            color: var(--color-fifth);
            border-color: var(--color-fifth);
        }

        & .button_2_style:hover {
            color: var(--color-primary);
        }
    }
}

.about_container {
    width: 98vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;

    & .about_img_container {
        width: 40%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .about_text_container {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;

        & h2 {
            font-size: 50px;
            color: var(--color-primary);
            line-height:90px;
        }

        & p {
            color: var(--color-primary);
            opacity: .9;
            width: 80%;
        }
    }
}

.galeria_container {
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .galeria_imgs_container {
        width: 100%;
        height: 90%;
        display: inline-flex;
        overflow-x: scroll; 

        & img {
            width: 50%;
            height: 100%;
            object-fit: cover;
            float: left;
            outline: 10px solid var(--color-primary);
        }
    }

    & .galeria_text_container {
        display: flex;
        width: 90%;
        height: 10%;
        align-items: center;
        justify-content: space-between;

        & button {
            width: 11%;
            cursor: pointer;
            border-radius: 5px;
            height: 80%;
            font-size: 15px;
            display: flex;
            border: 1px solid var(--color-primary);
            background-color: transparent;
            align-items: center;
            padding: 0px 10px;
            justify-content: space-between;
        }
    }
}

.socio_container {
    width: 100vw;
    height:60vh;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, .3);
    background-image:url('../assets/imgs/papel-arrugado.webp');
    background-position: center;
    background-size: cover;

    & h2{
        font-size: 50px;
        width: 80%;
        height: 30%;
        text-align: center;
    }

    & .buttons_socio_container {
        width: 40%;
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & button {
            width: 47%;
            height: 35%;
            font-size: 20px;   
        }
    }
}

.talleres_container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 100px 0;

    & h2 {
        height: 10%;
        width: 80%;
        text-align: center;
        color: var(--color-primary);
        font-size: 50px;
    }

    & .talleres_img_container {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & .taller {
            width: 29%;
            height: 80%;
            overflow: auto;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            & img {
                width: 100%;
                height: 40%;
                object-fit: cover;
            }

            & h3 {
                width: 90%;
                height: 22%;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 28px;
                color: var(--color-primary);
            }

            & p {
                width: 90%;
                letter-spacing: 1px;
                text-align: center;
                color: var(--color-primary);
                opacity: .9;
                height: 38%;
            }
        }
    }

    & button {
        height: 8%;
        width: 23%;
        font-size: 20px;
    }
}

.footer_container {
    width: 100vw;
    height: 15vh;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .footer_redes_container {
        width: 40%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        & img {
            height: 50px;
            object-fit: contain;
        }
    }

    & .footer_copyright_container {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-fifth);
    }
}

@media (max-width: 900px) {

    .nav_container {
        & .nav_links_container {
            & img {
                width: 80px;
                display: inline-block;
            }

            & button {
                display: none;
            }
        }
    }

    .header_container {
        & .buttons_header_container {
            width: 70%;
            height: 10%;
            margin: 20px 0;
        }
    }

    .galeria_container {
        height: 60vh;

        & .galeria_text_container {
            font-size: 20px;

            & button {
                width: 18%;
                height: 70%;
            }
        }
    }

    .socio_container {
        height: 40vh;

        & h2 {
            height: 20%;
        }

        & .buttons_socio_container {
            width: 70%;
            height: 50%;
        }
    }

    .talleres_container {
        & .talleres_img_container {
            flex-wrap: wrap;
            & .taller {
                height: 42%;
                width: 45%;
            }
        }

        & button {
            height: 10%;
            width: 35%;
            margin: 50px 0;
        }
    }

    .footer_container {
        & .footer_redes_container {
            width: 80%;

            & img {
                height: 70px;
            }
        }
    }

}

@media (max-width: 450px) {
    .menu_container {
        & img {
            width: 80px;
        }

        & .nav_links_container {
            & button {
                font-size: 50px;
            }
        }
    }

    .nav_container {
        & .nav_links_container {
            & img {
                display: inline-block;
                width: 80px;
            }

            & button {
                display: none;
            }
        }
    }

    .header_container {
        & h1 {
            width: 95%;
            font-size: 40px;
        }

        & .buttons_header_container {
            width: 95%;

            & .button_1_style {
                font-size: 18px;
            }
        }
    }

    .about_container {
        height: 100vh;
        & .about_img_container {
            display: none;
        }

        & .about_text_container {
            width: 95%;
            display: flex;
            align-items: center;
            justify-content: center;

            & h2 {
                font-size: 40px;
            }
        }
    }

    .galeria_container {
        .galeria_imgs_container {
            & img {
                width: 100%;
                height: 100%;
            }
        }

        .galeria_text_container {
            font-size: 22px;
            flex-direction: column;
            height: 35%;
            
            & p {
                margin: 20px 0;
            }

            & button {
                width: 40%;
                height: 80%;
            }
        }
    }

    .socio_container {
        height: 50vh;

        & h2 {
            width: 95%;
            height: 35%;
            font-size: 40px;
        }

        & .buttons_socio_container {
            width: 90%;
        }
    }

    .talleres_container {
        height: 250vh;
        margin: 50px 0;

        & .talleres_img_container {
            & .taller {
                width: 80%;
                height: 30%;
            }
        }

        & button {
            height: 5%;
            width: 60%;
        }
    }

    .footer_container {
        height: 20vh;
    }
}