body {
    height:100%; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column
}

#main {
    padding-left: 3.87%;
    padding-right: 3.5%;
    padding-bottom: 20px;
    flex: 1;
}


.navbar-collapse.show {
    display: block !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #5192a4 !important;
    border-color: #305a66 !important;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited {
    background-color: #2874ed !important;
    border-color: #1d51a3 !important;
}

.btn-success, .btn-success:hover, .btn-success:active, .btn-success:visited {
    background-color: #62c7e3 !important;
    border-color: #4894a8 !important;
}

.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:visited {
    background-color: #ffffff !important;
    border-color: #a1a1a1 !important;
}

.btn-outline-secondary, .btn-outline-secondary:hover {
    background-color: #eeeeee !important;
    border-color: #a1a1a1 !important;
    color: black;
}

.bg-bears {
    background-color: #5192a4 !important;
    border-color: #305a66 !important;;
}

.bg-fish {
    background-color: #2874ed !important;
    border-color: #1d51a3 !important;
}

.bg-sharks {
    background-color: #62c7e3 !important;
    border-color: #4894a8 !important;
}

.show {
    display: none;
}

#progressbar.show {
    display: none; 
}

#progressbar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.progress {
    width: 215px;  
}


.col {
    padding-bottom: 20px;
}

#heading {
    padding-bottom: 20px; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px;
}

#heading-alert {
    text-align: left;
}

#alert-top {
    padding-top: 20px;
}

#header {
    text-align: center;
    padding-bottom: 10px; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px;
}


#changelog {
    text-align: center;
    padding-top: 20px; 
    padding-bottom: 20px;
}

#submitGuess {
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}


/* Dices */

:root {
    --dice-color: blue;
}

.first-face {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dice {
    padding: 4px;
    background-color: var(--dice-color);
    width: 95px;
    height: 95px;
    border-radius: 10%;
}

.dice.none {
    margin-right: 0;
}

.dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: white;
}

.second-face {
    display: flex;
    justify-content: space-between;
}

.second-face .dot:nth-of-type(2) {
    align-self: flex-end;
}

.third-face {
    display: flex;
    justify-content: space-between;
}

.third-face .dot:nth-of-type(1) {
    align-self: flex-end;
}

.third-face .dot:nth-of-type(2) {
    align-self: center;
}

.fourth-face,
.sixth-face,
.fifth-face {
    display: flex;
    justify-content: space-between;
}

.fourth-face .column,
.sixth-face .column,
.fifth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fifth-face .column:nth-of-type(2) {
    justify-content: center;
}