@import url('https://fonts.googleapis.com/css?family=Lobster');

*{
    box-sizing: border-box;
}

html,body{
    height: 100%;
}

header{
    color: white;
    height: 13%;
}

img{
    width: 400px !important;
    height: 250px !important;
}

.row{
    height: 100% !important;
    width: 100% !important;
    margin: auto !important;
}

.btn{
    width: 80%;
    background: rgb(153, 230, 153) !important;
    background: rgba(153, 230, 153, .7) !important;
    margin-bottom: 20px;
    font-size: 2.5vmax;
    cursor: pointer;
}

.titleColumn{
    border: 1px solid black;
    border-top: 3px solid black;
    padding: 0px;
}

.centerFlag{
    background: url('../images/centerFlag.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#answers{
    height: 85%;
}

#questionContent{
    padding: 0px 5px;
}

#loadGifs{
    display: none;
}

.boxTitleGreen{
    background: rgb(153, 230, 153) !important;
    border-left: 3px solid black;
}

.boxTitleRed{
    background: rgb(255,0, 0) !important;
    border-right: 3px solid black;
}

.boxTitle{
    height: 100%;
    width: 100%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, .5);
}

.container{  
    height: 87%;
    margin: 0px;
    padding:0px 0px;
    min-width: 100%;
}

.content{
    height: 100%;
    width: 100% !important;
    background: url('../images/mexico.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0px 0px;
    border: 3px solid rgb(0,0,0);
    color: white;
}

.triviaWrapper{
    height: 100%;
    width: 100%;
    background: rgb(105, 105, 105);
    background: rgba(105, 105, 105, .4);
    text-align: center;
    padding: 20px;
}

.groupedContent{
    width: 100%;
    margin: 20px auto 0px auto;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgb(0,0,0); 
    height: 88%;
    font-size: 2.5vmax;
    padding-top:15px;
}

#startContent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgb(105, 105, 105);
    background: rgba(105, 105, 105, .4);
    text-align: center;
    padding: 15px 0px;
}

.flagText{
    margin: 0px;
    font-size: 4.0vmax;
    font-family: 'Lobster', cursive;
}

.centerContent{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.display{
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgb(0,0,0);
    font-size: 2.5vmax;
    width: 100%;
    margin: 0px auto;
}

.rowDisplay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
}