body {
    background-color: rgb(97, 9, 60);
    
}

#wrapper {
    position: relative;
    width: 960px;
    height: 900px;
    margin: 14.5px auto;
    padding: 10px;
    background-image: url("../images/Reiki-Power-Up-Cropped.png");
    background-repeat: no-repeat;
    background-size: 990px auto;
    
    /* border: 5px solid red; */

}

#titleHeader {
    position: absolute;
    top: 20px;
    left: 275px;
    color: rgb(97, 9, 60);
    font-size: 85px;
    text-align: center;
    line-height: 50px;
}


#directions {
    /* position: absolute; */
    display: block;
    float: left;
    color:  rgb(97, 9, 60);
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    /* border: 5px solid orange; */
}

#crystalBlue {
    position: absolute;
    display: block;
    top: 300px;
    left: 20px;
    float: left;
    height: 120px;
    width: 120px;
    color: blue;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    /* border: 5px solid blue; */
}

#crystalWhite {
    position: absolute;
    float: right;
    top: 300px;
    right: 20px;
    height: 100px;
    width: 100px;
    color: blue;
    font-size: 26px;
    text-align: left;
    line-height: 50px;
    /* border: 5px solid black; */
}

#crystalPurple {
    position: absolute;
    display: block;
    bottom: 100px;
    left: 20px;
    float: left;
    height: 110px;
    width: 110px;
    margin-bottom: 0;
    color:  blue;
    font-size: 26px;
    text-align: right;
    line-height: 50px;
    /* border: 5px solid purple; */
}

#crystalGreen {
    display: block;
    position: absolute;
    bottom: 100px;
    right: 20px;
    float: right;
    height: 120px;
    width: 120px;
    margin-bottom: 0;
    color:  blue;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    /* border: 5px solid green; */
}

#start {
    position: absolute;
    top: 450px;
    left: 200px;
    display: block;
    color: blue;
    font-size: 50px;
    text-align: center;
    line-height: 50px;
    /* border: 5px solid blue; */
}

#numberDemanded {
    position: absolute;
    top: 450px;
    /* once a real number goes in here, the left positioning will need to be resized. */
    /* left: 445px; */
    /* display: block; */
    width: 100%;
    color:  rgb(97, 9, 60);
    font-family: 'Old Standard TT', serif;
    font-weight: bold;
    font-size: 100px;
    text-align: center;
    line-height: 50px;
    /* border: 5px solid blue; */
}

#youDidSomething {
    position: absolute;
    top: 540px;
    left: -5px;
    display: inline-block;
    width: 100%;
    color: blue;
    font-family: 'Old Standard TT', serif;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    /* border: 5px solid blue; */
}    

#counter {
    position: absolute;
    top: 650px;
    /* left: 440px; */
    /* display: block; */
    width:100%;
    color: blue;
    font-family: 'Old Standard TT', serif;
    font-weight: bold;
    font-size: 100px;
    text-align: center;
    line-height: 50px;
    /* border: 5px solid blue; */
}

#wins {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: block;
    color:  rgb(97, 9, 60);
    font-family: 'Old Standard TT', serif;
    font: bold;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    border: 5px solid rgb(97, 9, 60);
}

#losses {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: block;
    color:  rgb(97, 9, 60);
    font-family: 'Old Standard TT', serif;
    font: bold;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    border: 5px solid rgb(97, 9, 60);
}
/* ran out of time to make it as nice on my laptop as it is on my home monitor */
/* @media screen and (max-width: 768px) {
    
    body {
      background-color: 
    }
} */
/* 
@media screen and (max-width: 320px) {
    body {
      background-color:
    }
} */