project4.css

@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,500");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body {
background: #152238;
color: rgb(253, 253, 253);
font-family: "Roboto", sans-serif;
}
code {
font-family: "Source Code Pro", monospace;
font-size: 12px;
}
a {
font-family: "Source Code Pro", monospace;
color: #ffcc99;
}
a:hover {
color: #ffba76;
}
header {
background: #152238;
padding: 20px;
}
header h1 {
color: rgb(0, 0, 0);
text-align: center;
font-weight: 100;
}
.score-board {
border: 3px solid rgb(207, 38, 89);
width: 300px;
margin: 40px auto;
font-size: 40px;
border-radius: 4px;
text-align: center;
padding: 15px 20px;
position: relative;
}
.badge {
background: #dc3d4b;
text-transform: uppercase;
font-size: 14px;
padding: 10px 6px;
}
#user-label {
position: absolute;
top: 50%;
left: -21%;
transform: translate(-10%, -50%);
}
#computer-label {
position: absolute;
top: 50%;
right: -21%;
transform: translate(10%, -50%);
}
.result {
font-weight: 300;
text-align: center;
font-size: 32px;
line-height: 40px;
}
.result {
line-height: 50px;
}
.choices {
margin: 0 auto;
text-align: center;
padding: 40px 0;
}
.choice {
display: inline-block;
border: 3px solid #fff;
border-radius: 50%;
padding: 10px;
margin: auto 10px;
transition: all 0.3s ease;
}
.choice img {
filter: invert(100%);
}
#action-message {
text-align: center;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
margin: 40px 0;
}
.winningStyles {
border: 3px solid #4dcc7d;
background-color: #043507;
box-shadow: 0 0 20px #043507;
}
.losingStyles {
border: 3px solid #c52e2e;
background-color: #2e0303;
box-shadow: 0 0 20px #2e0303;
}
.drawStyles {
border: 3px solid #444;
background-color: #222;
box-shadow: 0 0 20px #222;
}
sup {
margin: 0;
padding: 0;
}