/* Subsection Title */
.SubsectionTitleShell {
    padding: 0.5rem;
    position: relative;
    background: linear-gradient(to right, #2193b0, #6dd5ed);
    padding: 3px;
    text-align: left;
}

.SubsectionTitle {
    background: #222;
    color: white;
    padding: 0.75rem;
    font-family: 'Reggae One', cursive;
    font-size: 30px;
}

/* Buttons */
.button {
    background-color: white;
    color: #53345e;
    border: 1.5px solid #53345e;
    width: 30%;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Reggae One', cursive;
}

.button:hover {
    background-color: #53345e;
    color: ghostwhite;
    border: 1.5px solid #53345e;
    transition: 0.3s;
}

.orderedlist {
    background-color: white;
    color: #5e343e;
    border: 1.5px solid #5e343e;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 15px;
    font-family: 'Reggae One', cursive;
    margin-bottom: 20px;
}

.orderedlist:hover {
    box-shadow: 3px 3px 3px #5e343e;
    transition: 0.3s ease-in-out 0.3s;
}
/* Not actually a button */
.buttonblue { 
    background-color: ghostwhite;
    color: #005b96;
    border: 1.5px solid #005b96;
    font-size: 19px;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    width: 97%;
    display: block;
    font-family: 'Reggae One', cursive;
    text-decoration: none;
    text-align: center;
}

.buttonblue:hover {
    background-color: #005b96;
    border: 1.5px solid #005b96;
    color: ghostwhite;
    transition: 0.3s;
}

/* Table */
.CournotDuopolyTable {
    width: 75%;
    background-color: #34495E;
    border-radius: 15px;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.strategy {
    color: #ffde4b;
    font-size: 15px;
}

.firm {
    color: #4bcfff;
    font-size: 12px;
}

.NE {
    border: 2px solid #ffde4b;
    border-radius: 15px;
}

#Game{
    background: #222;
    color: white;
    padding: 2rem;
    font-family: 'Reggae One', cursive;
    font-size: 20px;
}

.ContentInfinite{
    position: static;
    width: 90%;
    margin-top: 7%;
    margin-bottom: 7%;
    background-color: ghostwhite;
    opacity: 0.7;
    font-family: 'Reggae One', cursive;
}

.Content1, .Content2, .Content3, .Content4, .Content5 {
    margin: 5% 5% 5% 5%;
    font-size: 20px;
}

.GameBox {
    display: block;
    background-color: #34495E;
    color: white;
    padding: 16px 32px;
    font-family: 'Reggae One', cursive;
    font-size: 17px;
    opacity: 1;
    margin: 4px 2px;
    border-radius: 15px;
    height: fit-content;
}

.GameBox h3 {
    color: #ffde4b;
    text-decoration: underline #ffde4b;
}

#Game{
    width : 30%;
}

.left{
    font-family: 'Reggae One', cursive;
    width:50%;
    float:left;
    height : 600px;
}

.smallleft{
    display: table-cell;
    font-family: 'Reggae One', cursive;
    width: 30%;
    float:left;
    height : 600px;
    padding: 10px
}

.left1{
    font-family: 'Reggae One', cursive;
    width: 48%;
    float: left;
}

.right1{
    font-family: 'Reggae One', cursive;
    width: 48%;
    float:right;
}

.rightContainer{
    font-family: 'Reggae One', cursive;
    width: 55%;
    float:right;
    padding: 10px
}

.right{
    font-family: 'Reggae One', cursive;
    width:40%;
    float: right;
}

.container {
    display: block;
    font-family: 'Reggae One', cursive;
    width: 100%;
    height: 540px;
}

#GameBox{
    font-family: 'Reggae One', cursive;
    background-color: ghostwhite;
}


#chart{
    width : 100%;
}

input[type=number] {
    border: 2px solid black;
    border-radius: 4px;
    height: 30px;
    width: 200px;
}

.GameTitle{
    background-color: ghostwhite;
    color: #5e343e;
    border: 1.5px solid #5e343e;
    padding: 8px 16px;
    border-radius: 5px;
    text-align: center;
}

.GameTitle:hover {
    background-color: #5e343e;
    color: ghostwhite;
    transition: 0.2s;
}


.GeneralCon{
    position: static;
    width: 70%;
    margin-top: 7%;
    background-color: ghostwhite;
    opacity: 0.7;
    font-family: 'Reggae One', cursive;
    padding:5%;
}

.table {
    width: 75%;
    background-color: #34495E;
    border-radius: 15px;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

.playertype{
    width: 48%;
    background-color: whitesmoke;
    border-radius: 15px;
    float: left;
    color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}


.playertype:hover{
    background-color: darkslateblue;
}

.Button{
    background: whitesmoke;
    width: 100%;
    border: 1.5px solid #53345e;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 15px;
    font-family: 'Reggae One', cursive;
}

.Button:hover {
    background-color: #53345e;
    color: white;
    transition: 0.4s ease-in-out;
}

.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 50%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none;
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}


.red {
    color: #fe4a49;
    text-decoration: underline #fe4a49;
}

.green {
    color: #7bc043;
    text-decoration: underline #7bc043;
}

#playerquantity2, #playerquantity {
    width: 100%;
}

#twobuttons {
    width: 100%;
}
#NextRound1, #Restart1, #NextRound2, #Restart2 {
    width: 49%;
}

#PD {
    color: #5e343e;
}

#PD:hover {
    color: #fe4a49;
    transition: 0.3s;
}

#underlineyellow {
    text-decoration: underline yellow;
}

#color1 {
    color: #fe4a49;
    text-decoration: underline #fe4a49;
}

.color1 {
    color: #fe4a49;
    text-decoration: underline #fe4a49;
}

#color2 {
    color: #fe8a71;
    text-decoration: underline #fe8a71;
}

.color2 {
    color: #fe8a71;
    text-decoration: underline #fe8a71;
}


#color3 {
    color: #7bc043;
    text-decoration: underline #7bc043;
}

.color3 {
    color: #7bc043;
    text-decoration: underline #7bc043;
}


#color4 {
    color: #ff5588;
    text-decoration: underline #ff5588;
}

.color4 {
    color: #ff5588;
    text-decoration: underline #ff5588;
}

#color5 {
    color: #2ab7ca;
    text-decoration: underline #2ab7ca;
}

.color6 {
    color: #96ceb4;
    text-decoration: #96ceb4;
    font-size: 22px;
}

.StrategyLeft {
    text-align: left;
    display: inline;
}

.StrategyRight {
    text-align: right;
    display: inline;
    margin-left: 10%;
}

.limit {
    border: 1.5px solid #4d648d;
    border-radius: 15px;
    color: #4d648d;
    background-color: white;
    font-size: 18px;
    padding: 8px 16px;
    font-family: 'Reggae One', cursive;
    text-align: center;
    width: 100%;
    cursor: pointer;
}

.flimitb {
    border: 1.5px solid #4d648d;
    border-radius: 15px;
    color: white;
    background-color: #4d648d;
    font-size: 18px;
    padding: 8px 16px;
    font-family: 'Reggae One', cursive;
    text-align: center;
    width: 100%;
    display: none;
}


.limit:hover {
    background-color: #4d648d;
    color: white;
    transition: 0.3s;
}

#flimit {
    display: none;
}

.leftGame {
    width: 30%;
    display: inline-block;
}

.rightGame {
    width: 65%;
    float: right;
    display: inline-block;
}

.next {
    background-color: white;
    color: #426cf5;
    border: 1.5px solid #426cf5;
    width: fit-content;
    float: right;
}

.next:hover {
    background-color: #426cf5;
    color: white;
}

.last {
    color: #005b96;
    font-size: 22px;
    border: 3px solid #005b96;
    border-radius: 15px;
    padding: 16px 32px;
    text-align: center;
}

.last:hover {
    color: white;
    background-color: #005b96;
    transition: 0.3s;
}