*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a:link{color:#18b495} 
a:visited{color:#18b495 } 
a:hover { color:#1679c5;} 
a:focus{color: #16e980;} 
a:active{color:#d4d365;} 

html { 
    overflow:hidden; 
}

body {
    background-color:rgb(49, 49, 49);
    color:rgb(221, 221, 221);
    user-select:none;
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
}

#topbar {
    xborder:1px solid grey;
    position:absolute;
    width:100vw;
    height:30px;
    background-color:rgb(58, 58, 58);
    box-shadow: 0px 3px 3px rgba(0,0,0, 0.5);
    font-family: consolas, monospace;
    display:flex;
    align-items: center;
    vertical-align:middle;
	justify-content: space-between;
}

#topbar > div {
    xborder:1px solid grey;
    padding:5px;
    height:100%;
    display:flex;
    align-items: center;
    vertical-align:middle;
	justify-content: space-evenly;
}

#topbar > div#pass {
    xborder:1px solid grey;
    border-radius:5px;
    background-color: rgba(0,0,0, 0.5);
    width: 30%;
}

#content {
    xborder:2px solid red;
    padding: 30px 0px 0px 0px;
    width:100vw;
    height:100vh;
}

#details-container {
    xborder:1px solid magenta;
    width:100%;
    height:30px;
    font-size:0.8em;
    display:flex;
    align-items: center;
    vertical-align:middle;
}

#details-container > div {
    xborder: 1px solid grey;
    border-radius:5px;
    height:70%;
    display:inline-block;
    padding:5px;
}

#details-container > #difficulty {
    width:20%;
    margin-right:10px;

}

#question-container {
    xborder:1px solid red;
    width:100%;
    height:30%;
    text-align:center;
    font-size:1.3em;
    color:#25d2b0;
    display:flex;
    align-items: center;
    vertical-align:middle;
	justify-content: center;
}

#question-container > #question {
    xborder:1px solid grey;
    border-radius:5px;
    background-color:rgba(0,0,0, 0.5);
    text-align:left;
    height:100%;
    padding:20px 10px 20px 10px;
}


#answers {
    xborder:1px solid lime;
    margin-top: 5px;
    height:50%;
    overflow-y: scroll;
    padding: 0px 10px 0px 10px;
    display: flex;
    flex-direction:column;
}

.answer {
    xborder:1px solid lime;
    border-radius:50px;
    padding: 8px;
    margin:0px auto 5px auto;
    font-size:1.3em;
    width:100%;
	background-color:#191919;
	cursor:pointer;
	transition: transform 0.05s;
}

.answer > .label {
    xborder:1px solid grey;
    display:inline-block;
    margin-right: 10px;
    color:orange;
}

.answer > .name {
    xborder:1px solid lime;
    display:inline-block;
}

.answer.selected {
    background-color: rgba(0,0,0,0.7);
    box-shadow: inset 0 0 0 2px #16a085;
    transition: all 0.05s;
}

.answer > .icon {
    xborder:1px solid lime;
    display:inline-block;
    font-size:1.5em;
    padding:5px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.7);
    visibility:hidden;
    display:inline-flex;
    align-items: center;
    vertical-align:middle;
}

.answer > .icon.green {
    color:lime;
}

.answer > .icon.red {
    color:red;
}

.answer > .icon > i {
    xborder:1px solid lime;
    margin:auto;
}

.answer.correct {
    xcolor:lime;
    background-color:rgb(27, 113, 27);
}

.answer.incorrect {
    xbackground-color:rgb(128, 27, 27);
    xbox-shadow: inset 0 0 0 2px rgb(128, 27, 27);
}

.answer.selected.incorrect {
    box-shadow: inset 0 0 0 2px rgb(128, 27, 27);
}

.answer.selected.correct {
    box-shadow: inset 0 0 0 2px rgba(128, 27, 27, 0);
}