@import url('https://fonts.cdnfonts.com/css/press-start-2p');
@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
@import url('normalize.css');

:root {
    --text-color:       #fff;
    --background-color: #000;
    --border-color:     #fff;
    --shadow-light:     rgba(204, 204, 204, 0.8);
    --shadow-dark:      rgba(0, 0, 0, 1);
    --highlight-color:  #999;
    --font-primary:     'Press Start 2P', monospace;
    --font-secondary:   'Share Tech Mono', monospace;
}

a {
    text-decoration: none;
}

* {
    user-select: none;
}

::selection {
    background: transparent;
}

html {
    font-size:   16px;
    font-family: "Press Start 2P", serif;
    overflow:    hidden;
}

body,
.retro-prompt,
.retro-message {
    background-image: url("../../assets/img/index/fondo_inicio.gif");
    background-size:  0.3rem;
}

svg {
    display:  block;
    position: relative;
    overflow: hidden;
    margin:   0 auto;
}

.retro-prompt,
.retro-message {
    display:         flex;
    position:        fixed;
    left:            0;
    top:             0;
    width:           100%;
    justify-content: center;
    align-items:     center;
    color:           var(--text-color);
}

.prompt-container,
.prompt-message {
    position:   relative;
    background: var(--background-color);
    border:     0.3rem solid var(--border-color);
}

.close {
    position: absolute;
    cursor:   pointer;
    top:      0.5rem;
    right:    0.5rem;
}

.memory-card-list {
    list-style: none;
}

.memory-card-option {
    cursor:     pointer;
    text-align: center;
}

.memory-card-option:focus,
.memory-card-option:hover {
    outline:    none;
    background: var(--highlight-color);
}

.titulo {
    color:           var(--text-color);
    text-align:      center;
    text-decoration: none;
}

.coming {
    color:           var(--text-color);
    text-align:      center;
    text-decoration: none;
    display:         none;
    opacity:         0;
    animation:       fadeIn 5s ease-in-out 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.titulo-animado {
    background:              linear-gradient(
                                     to right,
                                     yellow 50%,
                                     rgba(255, 255, 0, 0.8) 40%,
                                     transparent 70%
                             );

    background-clip:         text;
    -webkit-background-clip: text;
    color:                   transparent;
    background-size:         200% 100%;
    animation:               fillText 1.40s linear infinite, shadowGlow 1.40s linear infinite;
}

@keyframes fillText {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@keyframes shadowGlow {
    0%, 100% {
        text-shadow: 0.38rem 0.25rem 0.1rem var(--shadow-light);
    }
    50% {
        text-shadow: 0.38rem 0.25rem 0.3rem rgba(255, 255, 0, 0.8);
    }
}

.texto-oculto {
    opacity:    0;
    transform:  translateY(-500%);
    transition: opacity 10s, transform 5s;
}

.mostrar-texto {
    opacity:   1;
    transform: translateY(0);
}

#no-memory {
    display: none;
}

#music-player {
    position:         fixed;
    background-color: transparent;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    z-index:          10;
}

#play-pause-btn {
    background-color: transparent;
    color:            var(--text-color);
    border:           none;
    cursor:           pointer;
    outline:          none;
    display:          none;
}

#pause-emoji, #pause-text {
    color:       #3d07e7;
    text-shadow: 0.2rem 0.2rem 0.1rem rgba(67, 1, 231, 0.5);

}

#play-emoji, #play-text {
    color:       #e30b0b;
    text-shadow: 0.2rem 0.2rem 0.1rem rgba(227, 11, 11, 0.5);
}

#pause-emoji {
    margin-right: 0.75rem;
    font-size:    1rem;
}

#play-emoji {
    margin-left:  0.25rem;
    margin-right: 0.5rem;
}

#play-emoji, #play-text {
    font-size: 1.5rem;
}

#pause-text {
    font-size: 1.5rem;
}

#futuro {
    font-family:  Share Tech Mono, monospace;
    word-spacing: 0.5rem;
    text-shadow:  0.38rem 0.25rem 0.3rem rgba(255, 255, 0, 0.8);
}

/* EXTRA SMALL - MOBILE S - MOBILE M - MOBILE L*/
@media screen and (max-width: 35rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.3rem;
    }

    svg {
        width:  90vw;
        height: 30vh;
    }

    .retro-prompt,
    .retro-message {
        height:    50%;
        font-size: 0.7rem;
    }

    .prompt-container,
    .prompt-message {
        position:   relative;
        padding:    1.5rem;
        border:     0.1rem solid var(--border-color);
        margin-top: 30rem;

        & p {
            word-spacing: -0.2rem;
        }
    }

    .close {
        top:       0.25rem;
        right:     0.25rem;
        font-size: 0.8rem;
    }

    .memory-card-list {
        margin:  0 auto;
        padding: 0;
    }

    .memory-card-option {
        padding:    0.5rem;
        border:     0.1rem solid var(--border-color);
        margin-top: 1rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.1rem 0.1rem 0.05rem var(--shadow-light);
    }

    .titulo {
        font-size:   2rem;
        text-shadow: 0.4rem 0.4rem 0.2rem var(--shadow-light);
        margin-top:  10vh;
    }

    .coming {
        font-size:   1rem;
        text-shadow: 0.5rem 0.5rem 0.2rem var(--shadow-light);
        margin-top:  15vh;
    }

    #music-player {
        bottom: 0;
        left:   59vw;
        height: 6rem;
    }

    #pause-emoji, #pause-text {
        text-shadow: 0.15rem 0.15rem 0.1rem rgba(67, 1, 231, 0.5);
    }

    #play-emoji, #play-text {
        text-shadow: 0.15rem 0.15rem 0.1rem rgba(227, 11, 11, 0.5);
    }

    #pause-emoji {
        font-size: 0.7rem;
    }

    #play-emoji,
    #play-text,
    #pause-text {
        font-size: 1rem;
    }
}

/* SMALL */
@media screen and (min-width: 35.01rem) and (max-width: 48rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.5rem;
    }

    svg {
        width:  90vw;
        height: 30vh;
    }

    .retro-prompt,
    .retro-message {
        height:    50%;
        font-size: 1.2rem;
    }

    .prompt-container,
    .prompt-message {
        padding:    1.5rem 1.96rem 1.98rem 1.8rem;
        border:     0.1rem solid var(--border-color);
        margin-top: 30rem;

        & p {
            margin-left: 1.2rem;
        }
    }

    .close {
        top:   0.25rem;
        right: 0.25rem;
    }

    .memory-card-list {
        padding-left:  1.2rem;
        padding-right: 1rem;
    }

    .memory-card-option {
        padding:       1rem;
        border:        0.1rem solid var(--border-color);
        margin-top:    1rem;
        margin-bottom: 1rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.15rem 0.15rem 0.1rem var(--shadow-dark);
    }

    .titulo {
        font-size:    3rem;
        text-shadow:  0.4rem 0.4rem 0.2rem var(--shadow-light);
        margin-top:   10vh;
        word-spacing: -1rem;
    }

    .coming {
        font-size:   3rem;
        text-shadow: 0.5rem 0.5rem 0.2rem var(--shadow-light);
        margin-top:  15vh;
    }

    #music-player {
        bottom: 0;
        left:   83vw;
        height: 4rem;
    }

    #pause-emoji {
        font-size: 0.7rem;
    }

    #play-emoji,
    #play-tex,
    #pause-text {
        font-size: 1rem;
    }
}

/* MEDIUM  - TABLET*/
@media screen and (min-width: 48.01rem) and (max-width: 64rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.5rem;
    }

    svg {
        width:  90vw;
        height: 30vh;
    }

    .retro-prompt,
    .retro-message {
        height:    70%;
        font-size: 1.2rem;
    }

    .prompt-container,
    .prompt-message {
        padding:    1.5rem 1.96rem 1.98rem 1.8rem;
        border:     0.1rem solid var(--border-color);
        margin-top: 30rem;

        & p {
            margin-left: 1.2rem;
        }
    }

    .close {
        top:   0.25rem;
        right: 0.25rem;
    }

    .memory-card-list {
        padding-left:  1.2rem;
        padding-right: 1rem;
    }

    .memory-card-option {
        padding:       1rem;
        border:        0.1rem solid var(--border-color);
        margin-top:    1rem;
        margin-bottom: 1rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.15rem 0.15rem 0.1rem rgba(0, 0, 0, 1);
    }

    .titulo {
        font-size:    3rem;
        text-shadow:  0.4rem 0.4rem 0.2rem var(--shadow-light);
        margin-top:   10vh;
        word-spacing: -1rem;
    }

    .coming {
        font-size:   3rem;
        text-shadow: 0.5rem 0.5rem 0.2rem var(--shadow-light);
        margin-top:  15vh;
    }

    #music-player {
        bottom: 0;
        left:   81vw;
        height: 10vh;
    }

    #pause-emoji {
        font-size: 0.7rem;
    }

    #play-emoji,
    #play-text,
    #pause-text {
        font-size: 1rem;
    }
}

/* LARGE */
@media screen and (min-width: 64.01em) and (max-width: 80rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.5rem;
    }

    svg {
        width:  90vw;
        height: 30vh;
    }

    .retro-prompt,
    .retro-message {
        height:    60%;
        font-size: 1rem;
    }

    .prompt-container,
    .prompt-message {
        position:   relative;
        padding:    2rem 2.4rem 2rem 2.4rem;
        border:     0.2rem solid var(--border-color);
        margin-top: 30rem;

        & p {
            margin-left: 1.2rem;
        }
    }

    .memory-card-list {
        padding-left:  1.2rem;
        padding-right: 1rem;
    }

    .memory-card-option {
        padding:       1rem;
        border:        0.2rem solid var(--border-color);
        margin-top:    1rem;
        margin-bottom: 1rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.15rem 0.15rem 0.1rem var(--shadow-dark);
    }

    .titulo {
        font-size:    3rem;
        text-shadow:  0.4rem 0.4rem 0.2rem var(--shadow-light);
        margin-top:   13vh;
        word-spacing: -1rem;
    }

    .coming {
        font-size:    3rem;
        text-shadow:  0.5rem 0.5rem 0.2rem var(--shadow-light);
        margin-top:   18vh;
        word-spacing: -3rem;
    }

    #music-player {
        bottom: 0;
        left:   80vw;
        height: 10vh;
    }

    #pause-emoji, #pause-text {
        text-shadow: 0.25rem 0.25rem 0.1rem rgba(67, 1, 231, 0.5);
    }

    #play-emoji, #play-text {
        text-shadow: 0.25rem 0.25rem 0.1rem rgba(227, 11, 11, 0.5);
    }
}

/*EXTRA-LARGE*/
@media screen and (min-width: 80.01rem) and (max-width: 120rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.5rem;
    }

    svg {
        width:  80vw;
        height: 30vh;
    }

    .retro-prompt,
    .retro-message {
        height:    60%;
        font-size: 1.2rem;
    }

    .prompt-container,
    .prompt-message {
        position:   relative;
        padding:    2.5rem 3rem 2.5rem 3rem;
        border:     0.3rem solid var(--border-color);
        margin-top: 30rem;

        & p {
            margin-left: 1.2rem;
        }
    }

    .memory-card-list {
        padding-left:  1.2rem;
        padding-right: 1rem;
    }

    .memory-card-option {
        padding:       1rem;
        border:        0.3rem solid var(--border-color);
        margin-top:    1rem;
        margin-bottom: 1rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.1rem 0.1rem 0.1rem var(--shadow-dark);
    }

    .titulo {
        font-size:    3rem;
        text-shadow:  0.4rem 0.4rem 0.1rem var(--shadow-light);
        margin-top:   10vh;
        word-spacing: -1rem;
    }

    .coming {
        font-size:   3rem;
        text-shadow: 0.4rem 0.4rem 0.1rem var(--shadow-light);
        margin-top:  15vh;
        position:    relative;
    }

    #music-player {
        bottom:  0;
        left:    85vw;
        height:  6rem;
        z-index: 10;
    }

    #pause-emoji, #pause-text {
        text-shadow: 0.25rem 0.25rem 0.1rem rgba(67, 1, 231, 0.5);
    }

    #play-emoji, #play-text {
        text-shadow: 0.25rem 0.25rem 0.1rem rgba(227, 11, 11, 0.5);
    }

    #futuro {
        position: absolute;
        left:     40rem;
        top:      2rem;
    }
}

/* Escritorio  XXL*/
@media (min-width: 120.01rem) {
    body,
    .retro-prompt,
    .retro-message {
        background-size: 0.5rem;
    }

    svg {
        width:  100vw;
        height: 25vh;
    }

    .retro-prompt,
    .retro-message {
        height:    100%;
        font-size: 2rem;
    }

    .prompt-container,
    .prompt-message {
        padding:    4rem 6.9rem 6.9rem 4rem;
        border:     0.4rem solid var(--border-color);
        box-shadow: 0.3rem 0.3rem 0.1rem var(--shadow-light);
        margin-top: 30rem;

        & p {
            margin-left: 2.5rem;
        }
    }

    .memory-card-option {
        padding:    2rem;
        border:     0.5rem solid var(--border-color);
        box-shadow: 0.3rem 0.3rem 0.1rem var(--shadow-light);
        margin-top: 3rem;
    }

    .memory-card-option:focus,
    .memory-card-option:hover {
        text-shadow: 0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 1);
    }

    .titulo {
        font-size:    5rem;
        text-shadow:  0.5rem 0.5rem 0.1rem var(--shadow-light);
        word-spacing: -1rem;
    }

    .coming {
        font-size:   5rem;
        text-shadow: 0.5rem 0.5rem 0.1rem var(--shadow-light);
        line-height: 2rem;
        position:    relative;
    }

    .titulo,
    .coming {
        margin-top: 18vh;
    }

    #music-player {
        bottom: 0;
        left:   86vw;
        height: 9rem;
    }

    #pause-emoji, #pause-text {
        text-shadow: 0.4rem 0.5rem 0.3rem rgba(67, 1, 231, 0.5);
    }

    #play-emoji, #play-text {
        text-shadow: 0.4rem 0.5rem 0.3rem rgba(227, 11, 11, 0.5);
    }

    #pause-emoji {
        margin-right: 0.75rem;
        font-size:    2rem;
    }

    #play-emoji {
        margin-left:  0.25rem;
        margin-right: 0.5rem;
    }

    #play-emoji,
    #play-text,
    #pause-text {
        font-size: 3rem;
    }

    #futuro {
        word-spacing: 1.5rem;
        text-shadow:  0.38rem 0.25rem 0.3rem rgba(255, 255, 0, 0.8);
        position:     absolute;
        left:         40rem;
        top:          3rem;
    }
}