/*----------------------------------------------------- Imports */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Share+Tech+Mono&display=swap');

/*----------------------------------------------------- General */
body,
html {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

body {
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h5, 
footer, 
.modal-footer, 
.game-header, 
.question-indicator {
    font-family: 'Share Tech Mono', monospace;
}

a {
    text-decoration: none;
    color: #131f53;
}

.hide {
    display: none;
}

/*----------------------------------------------------- Colors */

.txt-color-1 {
    color: #131f53;
}

.txt-color-2 {
    color: #fff;
}

.txt-color-3 {
    color: #db0008;
}

.bg-color-1 {
    background-color: #131f53;
}

.bg-color-2 {
    background-color: #db0008;
}

.bg-color-3 {
    background-color: #fff;
}

/*----------------------------------------------------- Spacing */

/* Snippet taken from https://www.w3schools.com/howto/howto_css_center-vertical.asp */
.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

/* Snippet taken from https://stackoverflow.com/questions/18147642/css-centering-absolute-positioned-text-inside-relative-parent */
.center-text {
    text-align: center;
    width: 100%;
    left: 0px;
}

/*----------------------------------------------------- Borders */

.border-danger {
    border-color: #db0008;
}

hr {
    opacity: 100%;
}

/*----------------------------------------------------- Headings */

h1 { 
    font-size: 4rem;
}

p, h2 {
    margin-bottom: 0;
}

h2 {
    font-size: 3rem;
}

.title {
    font-size: 1.5rem;
}

/*----------------------------------------------------- HOME PAGE */

.home-page ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

/* Snippet to truncate text from https://blog.kritikapattalam.com/2-simple-ways-you-can-truncate-text-using-css */
.truncate-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
    width: 100%;
    overflow: hidden;
  }

/*----------------------------------------------------- Hamburger Menu */

.navbar-toggler-icon {
    background-image: url(../images/hamburger-menu-icon.png);
}

button.navbar-toggler {
    border: none;
}

button.navbar-toggler:focus {
    box-shadow: none;
}

/*----------------------------------------------------- News Section */

.news-summary {
    font-size: 0.8rem;
}

/* Indicates current news item */
.news-item:hover {
    border: 3px solid #db0008;
    background-color: #131f53;
}

.news-item:hover .news-text {
    color: #fff;
}

/*----------------------------------------------------- GAME PAGE */

/*----------------------------------------------------- Main Section */

.logo-row {
    margin-top: 56px;
}

.logo {
    max-width: 40%;
}

.btn-primary {
    background-color: #db0008;
    border-color: #db0008;
}

.btn-primary:hover {
    background-color: #131f53;
}

.btn-primary:active {
    background-color: #131f53;
    border-color: #db0008;
}

/* Indicates correct answer */
.correct {
    background-color: green;
}

/* Indicates correct answer */
.incorrect {
    background-color: orange;
}

/*----------------------------------------------------- Game Section */

/* Keeps game area in viewport at all times */
.game-area {
    height: calc(100vh - 186px);
}

.match-header {
    min-height: 3rem;
}

/*----------------------------------------------------- Question Section */

.question-number {
    font-size: 6rem;
}

.question-indicator {
    position: relative;
}

/*----------------------------------------------------- Answer Section */

.answer-section {
    height: 13%;
}

.choice-text {
    height: 29%;
}

.select-answer {
    margin-bottom: 0;
}

.hover-color:hover, .hover-color:hover a {
    background-color: #fff;
    color:#131f53;
}

.confirmation-text {
    width: 50%;
}

.confirmation-text p {
    font-size: 5rem;
}

/*----------------------------------------------------- myModal2 */

#modal-arsenal-logo:hover {
    background-color: #131f53;
}

#modal-arsenal-logo:active {
    background-color: #131f53;
    border: #db0008 3px solid
}

#modal-spurs-logo:hover {
    background-color: #db0008;
}

#modal-spurs-logo:active {
    background-color: #db0008;
    border: #131f53 3px solid
}

/*----------------------------------------------------- Match Toast */

#match-quote {
    font-size: 3rem;
}

.toast {
    background-color: #fff;
    opacity: 1;
}

/*----------------------------------------------------- END PAGE */

.fa-thumbs-down, .fa-trophy {
    font-size: 10rem;
}

.end-btn {
    background-color: #131f53;
    color:#fff;
    margin-top: 1rem;
}

.end-btn:hover {
    background-color: #fff;
    color: #131f53;
}

.end-btn:active {
    background-color: #fff;
    color: #db0008;
    border: 1px solid #db0008;
}

/*----------------------------------------------------- Media Queries */

/* Removes hover on small devices
/* Breakpoint taken from bootstrap for consistency */
@media only screen and (max-width: 1200px) {
    .hover-color:hover {
        background-color: #131f53;
        color: #fff;
    }
}