@font-face {
    font-family: 'OldNewspaperFont';
    src: url('oldnewspaperfont.ttf') format('truetype');
  }

  
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Times New Roman", Times, serif;
    background-color: white;
}

#main-game-container {
    height: 100%;
    padding: 0;
}

#board {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #D2BA9B
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    background-color: #efe2d1;
    color: #fff4e7;
    transform: translateX(-50%) translateY(-50%) scale(0.95);
    /* transition: transform .3s; */
    max-height: 90vh;
    overflow: auto;
    user-select: none;
    font-size: 4.5vh;
    width: 90%;
}
div.card:nth-child(1){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(4deg);}
div.card:nth-child(2){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(1deg);}
div.card:nth-child(3){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(-2deg);}
div.card:nth-child(4){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(4deg);}
div.card:nth-child(5){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(-5deg);}
div.card:nth-child(6){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(2deg);}
div.card:nth-child(7){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(-3deg);}
div.card:nth-child(8){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(-1deg);}
div.card:nth-child(9){transform: translateX(-50%) translateY(-50%) scale(0.95) rotate(3deg);}

.card .card-title{
    font-size: 5.5vh;
    color: #353028;
    border-bottom: solid #353028;
    border-top: solid #353028;
}


.card .card-text {
  background: #353028;
  padding: 15px;
  text-align: justify;
}

.card * {
    pointer-events: none;
}




.modal-content {
    background-color: #D2BA9B;
  }



.result-item {
    margin-bottom: 15px;
    padding: 15px;
    /* font-family: 'OldNewspaperFont', sans-serif; */
    position: relative;
}

.news-bg{
    background-color: #efe2d1;
} 

.hoax-bg{ 
    background-color: #b29c92;
}

.news-bg::before, .hoax-bg::before {
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40%;
    height: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .8;
}
    
.news-bg::before {
    background-image: url("img/ui/stemp_true.png");
}

.hoax-bg::before {
    background-image: url("img/ui/stemp_hoax.png");
}


.correct-feedback {
    border-left: 5px solid rgb(32, 151, 32);
}
.correct-feedback .colortext{
    color: rgb(32, 151, 32);
}

.incorrect-feedback {
    border-left: 5px solid rgb(173, 3, 3);
}
.incorrect-feedback .colortext{
    color: rgb(173, 3, 3);
}


.news-bg .colorhoaxornot{
    color: rgb(32, 151, 32);
}
.hoax-bg .colorhoaxornot{
    color: rgb(173, 3, 3);
}

.modal-score {
    text-align: center;
}
.modal-score img {
    width: 45%;
}


/* Overwrite default button colors */
.btn-primary {
    background-color: #685c4c; 
    border-color: #efe2d1; 
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #854e39; 
    border-color: #ffded2;
}

.btn-secondary {
    background-color: #4682b4; /* Steel Blue color */
    border-color: #4682b4; /* Steel Blue color */
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #4169e1; /* Royal Blue color */
    border-color: #4169e1; /* Royal Blue color */
}

/* menu */
.menuSwitch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers children horizontally */
    align-items: center; /* Centers children vertically */
    text-align: center;
}

.menuSwitch img{
    max-height: 100vh; /* 80% of the viewport height */
    max-width: 100vw; /* 80% of the viewport width */
    object-fit: contain; /* Resizes image to fit while maintaining aspect ratio */
}

.menuswitch-instruct {
    background: gray;
}


.hidden {
    display: none;
}

@media (max-width: 800px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    
    .card {
        min-width: 90%;
    }
}
@media (max-width: 450px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    .card {
        font-size: 3vh;
    }
    
    .card .card-title{
        font-size: 3.5vh;
    }
}