@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: "Gloria Hallelujah", serif;
}
main{
    height: 100vh;
    
    .press-here{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;

        p{
            text-align: center;
            font-size: 37px;
            font-weight: 750;
        }
        img{
            width: 250px;
            background-color: rgb(38, 255, 0);
            border: 6px dashed rgb(251, 0, 255);
            border-radius: 100%;
            padding: 15px;

            animation: rotate 5s ease-in-out infinite alternate forwards;
        }
    }
    
    #message{
        display: none;
        background-image: url(./assets/estrelas.gif);
        width: 100%;
        height: 100%;
        /* display: flex; */
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &.ativo {
            display: flex;
        }
        
        p{
            font-size: 40px;
            text-align: center;
        }
    }
    
    #music{
        height: 100vh;
        display: none;
        /* display: flex; */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        &.ativo {
            display: flex;
        }
        
        .music-play{
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 5px solid #737373;
            border-radius: 16px;       
            padding: 12px;
            gap: 8px;
            

            .info-music{
                img{
                    width: 100%;
                }
                .song , .artist{
                    text-align: center;
                    line-height: 35px;
                }
                .song{
                    font-size: 30px;
                }
                .artist{
                    font-size: 18px;
                }
            }
            .time-music{
                display: flex;
                font-size: 13px;
                color: #7B7B7B;
            }

            .barra-music{
                display: flex;
                width: 100%;
                align-items: center;
                position: relative;
                .barra{
                    width: 100%;
                    height: 5px;
                    position: absolute;
                    &#linha-tempo{
                        background-color: #737373;
                        border: none;
                        z-index: 999;

                        .bolinha {
                            position: absolute;
                            right: -2px;
                            top: -2px;
                            z-index: 9999;
                        }
                    }
                    &#linha-percorrida{
                        background-color: #DADADA;
                    }
                }

            }
    
        }
        .date{
            text-align: center;
            line-height: 50px;
            margin-top: 40px;

            .niver{
                font-size: 70px;
            }
            .aniversariante{
                font-size: 25px;
            }
        }

        .acompanhe-letra {
            position: absolute;
            bottom: 64px;
            color: #737373;
        }

    }
    #lyric{
        height: 100vh;
        display: none;
        /* display: flex; */
        flex-direction: column;
        align-items: center;

        &.ativo {
            display: flex;
        }

        img{
            width: 300px;
        }
        .lyric-music{
            padding: 40px;
            text-align: center;
            font-size: 25px;
        }
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
        scale: 50%;
    }

    to {
        transform: rotate(359deg);
        scale: 120%;
        background-color: rgb(161, 62, 219);
        border: 6px dashed rgb(255, 0, 0);
    }
}