@import url(core.css);
@import url(popup.css);

.theme-hero {
    text-align: center;
    align-items: center;
}

.hero-img {
    width: 25%;
    border: 5px solid var(--primary);
    box-shadow: 4.25px 4.25px 4.25px rgba(0, 0, 0, 0.1), 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.options-container {    
    width: 100%;
    margin-top: 5rem; 
    margin-bottom: 1rem; 
}

.options-list {
    margin: auto;
    width: 800px;
    display: flex;
    justify-content: end;
}

.options-btn {

}

.text-container {
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translate(-50%);

    background-color: var(--white200);
    /* width: 275px; */
    height: 300px;
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden;
    box-shadow: 4.25px 4.25px 4.25px rgba(0, 0, 0, 0.1), 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.phrase-container {
    position: relative;
    transition: all 2s;
    top: 0px;
    padding: 0;
}

.phrase-caps-lock {
    text-align: center;
    color: red;
}

.phrase-list {
    width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
    row-gap: 25px;
}

.phrase-char {
    font-family: var(--font);
    width: 16.4px;
    font-size: 1.75rem;
}

.keyboard-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 10rem;


}

.keyboard-img {
    margin: auto;
    width: 750px;
}

/* popup */


.popup-content {
    position: relative;
    display: grid;
    grid-template-areas: 
        "fireworks-l title title fireworks-r"
        "fireworks-l accimg acc fireworks-r"
        "fireworks-l wpmimg wpm fireworks-r"
        "fireworks-l timeimg time fireworks-r"
        "fireworks-l home next fireworks-r";
    align-content: center;
    gap: 20px;
    margin: 0 auto;
}

.fireworks-results {
    position: relative;
    width: 256px; 
    height: 256px; 
    background-image: url('/static/media/sprites/fireworks_256.png'); /* Path to your sprite sheet */
    background-repeat: no-repeat;
    animation: play 1s steps(10) forwards;
}

@keyframes play {
  from { background-position: 0 0; } 
  /* to { background-position: -1920px 0; } */
  /* to { background-position: -3840px 0; } */
  to { background-position: -7680px 0; }
}

.fireworks {
    width: 256px; 
    height: 256px; 
}

.fireworks-results-l {
    grid-area: fireworks-l;
    
}

.fireworks-results-r {
    grid-area: fireworks-r;
}


.title-results {
    grid-area: title;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.results-img {
    margin: auto;
}

.acc-results-img {
    grid-area: accimg;
}

.wpm-results-img {
    grid-area: wpmimg;
}

.dur-results-img {
    grid-area: timeimg;
}

.results-text {
    background-color: var(--white100);
    border-radius: 10px;
    width: 120px;
    height: 30px;

    box-shadow: 4.25px 4.25px 4.25px rgba(0, 0, 0, 0.1), 5px 5px 5px rgba(0, 0, 0, 0.2);

    color: var(--primary);
    text-shadow: 1.25px 1.25px 1.25px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(0, 0, 0, 0.7);

    margin-left: 1rem;
    font-size: 1.5rem;
    text-align: center;
}

.acc-results {
    grid-area: acc;
}

.wpm-results {
    grid-area: wpm;
}

.dur-results {
    grid-area: time;
    
}

.go-home {    
    grid-area: home;
    margin: auto;
    margin-top: 4rem;    
}

.go-next-test {
    grid-area: next;
    margin: auto;
    margin-top: 4rem;
}