body {
    /* background-image: url("../images/MLP_The_Movie_background_art_-_Canterlot_plaza.jpg"); */
    /* background-image: url("../images/bg2r2ss_by_mlp_vector_collabs-d52otvk.png"); */
    background-image: url("../images/my_little_pony_wallpaper_by_chellytheeevee-d4gmf3g.png");
        background-size: 100%;
    font-family: 'Kodchasan', sans-serif;
    font-size: 16px;
}

p {
    line-height: 100%;
}

.main {
    margin: 20px;
}

h2 {
    font-size: 24px;
}

.val {
    font-size: 20px;
}

b {
    font-weight: bold;
}

.container {
    width: 660px;
    /* background-color: rgba(255, 255, 255, 0.95); */
    background-color: white;
    opacity: 0.97;
    filter: alpha(opacity=97);
    margin: 0 auto;
}

/* header */
header {
    background-color: lavender;
    padding: 20px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

/* Target Number vs Current Total */
#numbers {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 100px;
}

/* Target Number vs Current Total */
#score {
    text-align: center;
    margin: 0 auto;
    width: 150px;
}

/* crystal images */
.crystal {
    width: 150px;
    height: 150px;
    text-align: center;

}

.crystal:hover,  .crystal:active {
    opacity: 0.75;
    filter: alpha(opacity=75);
}

/* target number */
#target {
    background-color: lightgoldenrodyellow;
    padding: 20px;
    width: 200px;
    display:block;
    float: left;
}

/* last clicked */
/* #last-clicked {
    background-color: lavenderblush;
    padding: 10px;
} */

/* current total */
#current {
    background-color: lightcyan;
    padding: 20px;
    width: 200px;
    display:block;
    float: right;
}

/* wins */
#wins {
    /* background-color: lightgreen; */
    padding: 10px;
}

/* losses */
#losses {
    /* background-color: lightcoral; */
    padding: 10px;
}

/* footer */
footer {
    font-size: 10px;
}

/* media screen */
@media screen and (max-width: 640px) {
    .container {
        max-width: 100%;
        margin: 0;
    }

    .crystal {
        width: 130px;
        height: 130px;
    }
}

@media screen and (max-width: 600px) {
    .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .crystal {
        width: 130px;
        height: 130px;
    }
    #current, #target {
        width: 50px;
    }
    #score {
        width: 40%;
        margin-bottom: 20px;
    }
    #numbers {
        margin-bottom: 30px;
    }
}