style.css

/* Header and reset and stuff*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
html {
background-image: url("http://4.bp.blogspot.com/-vxWMBjUjE6c/VLAQyoleS5I/AAAAAAAAC_4/K8H4r2GgvJk/s1600/tma-chalkboard.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;

}
body {
    color: #e0dbd1;
    font-size: 150%;
    font-family: "Papyrus", sans-serif;
}
h1, h2 {
    /*font-family: "Comic Sans MS", "Chalkboard", cursive;*/
    font-family: "Chalkduster","Bradley Hand ITC TT", cursive;
    text-align: center;
    margin-bottom: .5em;
}
h2{ font-size: 1.25em;}
#subtitle {
    font-family: "Papyrus";
    text-align: center;
}
ul.menu {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
li.link {
    display: inline;
    font-size: smaller;
}

.socialMediaButtons {
    text-align: center;
}

/*hr {margin-bottom: 40px;}*/





form {
    margin: 0 auto;
    text-align: center;
}

form#filter {
    font-size: small;
}
form#filter input[type="submit"]:disabled {
    color: #000;
    background: none;
    border: none;
    font: inherit;
    font-weight: bold;
    cursor: default;
    text-decoration: none;
}
form#filter input[type="submit"]:disabled:hover {
    text-decoration: none;
}
small{
    text-align: center;
    display: block;
}
img#rewardImg {
    max-width:80%;
    max-height:65%;
    margin: 0 auto;
    display: block;
}
form.multiplechoiceFlex {
    width: 80%;
    padding-bottom: 10vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: space-around;

}
form.multiplechoice {
    width: 80%;
    padding-bottom: 10vh;

}
label.multiplechoiceIMG {
    padding: 10px;
    /*flex-grow: 1;*/
    /*flex-basis: content;*/
    width: 20%;
    height: 15%;
    max-width: 33%;
    max-height: 30%;
    /*overflow: hidden;*/
}
img.multiplechoiceimage {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: block;
    width: auto;
    height: auto;
}

label.multiplechoiceColor {
    padding: 10px;
    flex-grow: 1;
    flex-basis: content;
    max-width: 33%;
    max-height: 30%;
}

div.multiplechoiceColor {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
/* replace multiple choice radio buttons with images */

label.multiplechoiceIMG > input, label.multiplechoiceColor > input, .starRating:not(old) > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label.multiplechoiceIMG > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label.multiplechoiceIMG > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:5px solid #f00;
}

label.multiplechoiceColor > input:checked + div {border: 5px solid black;}


form.rating {
    width: 360px;
    margin: 10px auto;
}
img.rating {
    max-width:50%;
    max-height:33%;
    margin: 0 auto;
    display: block;
}
.starRating:not(old){
  display        : inline-block;
  width          : 15em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  width           : 10%;
  height          : 100%;
  border-radius: 50%;
  background-color: red;
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background-color: green;
  border-radius:50%;
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}


textarea {
    background-image: url("http://2.bp.blogspot.com/-QkCoXoBvbxA/VLAQzOgQVLI/AAAAAAAAC_8/YIXjaEbbALk/s1600/8621_chalkboard.jpg");
    font-family: "Bradley Hand ITC TT";
    font-size: .75em;
    /*border: 10px solid;*/
    color: #e0dbd1;
    margin: 20px auto;
    height: 100px;/*double the default height*/
    display: block;
}

/* Extra small devices (phones, less than 768px) */
@media screen and (min-width:0px) and (max-width: 768px) {
    textarea {width: 90%;}
    form.multiplechoice {width: 100%;}
    h1 {margin-bottom: .25em}
    li.link {  font-size: medium;}
    #subtitle {display: none}
    form.multiplechoiceFlex {
        width: 100%;

    }
    label.multiplechoiceIMG {
        width: 80%;
        max-height: 50%;
    }
    form#continue {  padding-top: 10%;}

}

/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 992px) {
    textarea {width: 70%;}
}

/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    textarea {width: 50%;}
}

/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    textarea {width: 33%;}
}

/* Footer */
form#continue {
    width: auto;
    font-size: larger;
}

input[type="submit"] {

    background:none;
    border:none;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

form#continue input[type="submit"] {  color:red; }
form#skip input[type="submit"] {
    color:  #66a3ff;
    margin-top: 25px;
}

a {
    color: white;
}
a:hover, input[type="submit"]:hover {

    text-decoration: underline;
    font-weight: bold;
}




footer {
    padding: 0;
    margin: 0;
    width: 100%;

}