@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@100;300;400;700;900&display=swap');
        body {
            font-family: 'Roboto', sans-serif;
        }
        
        .link {
            text-decoration: none;
            font-size: 20px;
            display: inline-block;
            padding: 7px;
            width: max-content;
            border: 1px solid #fff;
            border-radius: 10px;
            color: #fff;
        }
        
        .link:hover {
            background: #000;
            color: #fff;
            border: 0 solid #000;
        }
        
        a {
            text-decoration: none;
            color: rgb(13, 150, 192);
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            overflow: auto;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.452);
        }
        
        .contenido-modal {
            position: relative;
            background-color: #000;
            margin: auto;
            width: 30%;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);
            animation-name: modal;
            animation-duration: 1s;
        }
        
        h4,
        h6 {
            font-size: 28px;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            color: rgb(117, 33, 196);
            text-shadow: rgb(74, 13, 241) 1px 0 10px;
        }
        
        .modal-body {
            background-color: #000;
        }
        
        @keyframes modal {
            from {
                top: -330px;
                opacity: 0;
            }
            to {
                top: 0;
                opacity: 1;
            }
        }
        
        .close {
            color: #f2f2f2;
            font-size: 30px;
            font-weight: bold;
        }
        
        .close:hover {
            color: #7f8c8d;
            text-decoration: none;
            cursor: pointer;
        }
        
        .modal-header,
        .footer {
            padding: 8px 16px;
            background: #34495e;
            color: #f2f2f2;
        }
        
        p {
            text-align: justify;
            color: #ecf0f1;
        }
        
        .modal-body {
            padding: 20px 16px;
            background-color: #000;
        }
        
        @media screen and (max-width:900px) {
            .contenido-modal {
                width: 70%;
            }
            .textos {
                padding: 150px;
            }
            .modal-body {
                padding: 20px 16px;
                background-color: #000;
            }
        }
        
        @media screen and (max-width:500px) {
            a {
                text-decoration: none;
                color: rgb(13, 150, 192);
            }
            .nav__resposnsive-button {
                filter: invert(1);
            }
            .textos {
                padding: 50px;
            }
            .modal {
                display: flex;
                flex-direction: column;
                position: fixed;
                z-index: 1000;
                overflow: auto;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.452);
            }
            .contenido-modal {
                position: relative;
                background-color: #fefefe;
                margin: 85px;
                width: 65vw;
                box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);
                animation-name: modal;
                animation-duration: 1s;
            }
            .modal-body {
                display: flex;
                flex-direction: column;
                width: 65vw;
                background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
                text-shadow: 3px 3px 2px #4539e9;
            }
        }


        /*
        figure
        */
        .figure {
            width: 100%;
            height: 100%;
            place-content: space-evenly;
            display: grid;
            grid-template-areas: contenido;
            cursor: pointer;
            overflow: hidden;
        }
        
        .figure:hover .show{
            transform:translate(0, 0) rotate(0deg);
            -moz-transform:translate(0, 0) rotate(0deg);
            -ms-transform:translate(0, 0) rotate(0deg);
            -o-transform:translate(0, 0) rotate(0deg);
            -webkit-transform:translate(0, 0) rotate(0deg);
        }
        
        .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            grid-area: contenido;
        }
        
        .show {
            background-color: rgba(45, 8, 71, 0.781);
            grid-area: contenido;
            display: grid;
            place-items: center;
            color: #ffff;
            font-size: 2rem;
            transform: translate(100%, 100%) rotate(265deg);
            -webkit-transform: translate(100%, 100%) rotate(265deg);
            -moz-transform: translate(100%, 100%) rotate(265deg);
            -ms-transform: translate(100%, 100%) rotate(265deg);
            -o-transform: translate(100%, 100%) rotate(265deg);
            transition: transform .5s;
        }