/* Import external fonts */
@font-face {
 font-family: "raleway";
 src: url(raleway_thin.ttf) format("truetype");
}

@font-face {
 font-family: "ubuntu";
 src: url(ubuntu_reg.ttf) format("truetype");
}

h1 {
 font-family:raleway;
 color:white;
 margin-top:10px;
 margin-bottom:0px;
}

h2 {
 margin-top:0px;
 font-family:raleway;
 font-size:12px;
 color:white
}

img {
 cursor:pointer;
}

.categoryContainer{
 font-family:ubuntu;
 color:white;
 margin-bottom:20px;
}

.category {
 margin-top:0px;
 margin-left:20px;
 margin-right:20px;
 display:inline-block;
}

.category:hover {
 color:yellow;
 cursor:pointer;
}

#copyrightContainer {
 font-family:raleway;
 color:white;
}

body {
 margin:0 auto;
 font-family: ubuntu;
 text-align:center;
 background-color:maroon;
}

.container {
 padding:10px;
 background-color:white;
 text-align:center;
 margin: 0 auto;
 margin-top:10px;
 display: block;
 border-radius: 5px;
}

.statsContainer {
 width:300px;
}

.stat {
 display: inline-block;
}

.cardContainer {
 max-width:300px;
 position:relative;
 margin: 0 auto;
 text-align:center;
}

.card {
 display: inline-block;
 padding:30px;
 position:relative;
}

.cardImage {
 width:100%;
 margin-top:20px;
 font-weight:bold;
 font-size:20px;
}

.highlightedStructure {
 color: blue;
 display:inline-block;
}

.superScript {
 vertical-align:super;
 display:inline-block;
}

.subScript {
 vertical-align:sub;
 display:inline-block;
}

.content {
 margin-bottom:20px;
}

.startButton {
 font-weight:bold;
 cursor:pointer;
}
.startButton:hover {
 background-color: #eeeeff;
}

.answer {
 text-align:center;
 margin:10px;
 padding-bottom:2px;
}

.activeAnswer:hover {
 cursor: pointer;
 background-color: #eeeeff;
}

.activeAnswer:active {
 background-color:#ddddee;
}

.correctAnswer {
 background-color: #38FF38;
 border-bottom:2px solid #B3FFB3;
}

.incorrectAnswer {
 background-color: #F50031;
 border-bottom:2px solid #FFB3B3;
}

.ribbon {
 position:fixed;
 top:300px;
 width:100%;
 padding:10px;
 color:black;
 text-align:center;
 font-size:24px;

 border-top: 2px solid black;
 border-bottom: 2px solid black;
}

.mask {
 position:fixed;
 height:100%;
 width: 100%;
 top:0px;
 background-color: rgba(0,0,0,0.5);
}

.popupContainer {
 margin: 0 auto;
 margin-top:200px;
 width:90%;
 position: block;
}

.popupContents {
 width:100%;
 padding:10px;
 border-radius: 5px;
 border: 2px solid black;
 background-color:white;
}