/* TODO make this yams look better lol */
body {
    background-color: #E1E8ED;
    color: #14171A;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    text-align: center;
}

h1, h2, h3 {
    text-align: center;
}

h3 {
    font-size: 18pt;
}

#header {
    background-color: #1DA1F2;
    color: #F5F8FA;
}

#header img{
    width: 3%;
}

#game {
    text-align: center;
}

#game img {
    width: 3%;
}

#game #trump {
    width: 10%;
}

#score {
    font-size: 16pt;
}

#description {
    font-size: 16pt;
}

button {
	display: inline-block;
    margin: 0;
    padding: 0.75rem 1rem;
	border: 0;
	border-radius: 0.317rem;
	background-color: #aaa;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
    line-height: 1.5;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
}

.twitter-tweet {
    flex: 1;
    text-align: left;
    background-color: #F5F8FA; 
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    margin: 10px 5px;
    padding: 0px 50px 5px 50px;
    max-width: 468px;
    height: 100%;
    cursor: pointer;
  }
  
  .twitter-tweet p {
    text-align: left;
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
    color: black;
    cursor: pointer;
  }
  
  .correctAnswer {
    background-image: url('../assets/answerIcons/correct.png');
    background-repeat: no-repeat;
    background-position: 3px;
    background-size: 3vh;
    border: 2px solid #4CAF50;
}

.incorrectAnswer {
    background-image: url('../assets/answerIcons/incorrect.png');
    background-repeat: no-repeat;
    background-position: 3px;
    background-size: 3vh;
    border: 2px solid red;
    animation: incorrect 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

#tweets {
    display: flex;
    justify-content: center;
}

@keyframes incorrect {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(3px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(8px, 0, 0);
    }
}