html { 
    height: 100%;
    margin:0px;
    background: url(the-ball-488709_1920.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Montserrat', sans-serif;
}

hr {
    border-color: #333333;
}

a {
    color: transparent;
}

.web_logo_container{
    display: inline-block;
    padding-left: 10%;
    padding-right: 20%;
    width: 40%;
}

.web_logo{
    width: 100%;
}

.web_description{
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
    font-size: -0.9em;
}

.media_links{
    display: inline-block;
    width: 20%;
}

.linkedin{
    width: 15%;
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 45%;
}

.github{
    width: 15%;
    padding-right: 20%;
    margin-bottom: 45%;
}


.game_description{
    font-size: 0.6em;
    padding-top: 7px;
    padding-bottom: 2px;
}


.container{
    width: 90%;
    margin: 5%;
    background-color: rgba(255,255,255,0.45);
    border-radius: 15px;
    overflow: hidden;
}


.game{
    padding: 35px;
    margin-bottom: 50px;
}

.logo_home{
    float: left;
    padding-left: 2.5%;
    padding-right: 3.5%;
    width: 5%;
}

.logo_away{
    float: right;
    padding-right: 1.5%;
    padding-left: 4.5%;
    width: 5%;
}

.logo_png{
    width: 100%;
}

.teamheading{
    box-sizing: border-box;
    white-space: nowrap;
    font-weight: bold;
    font-size: 150%;
    padding-bottom: 0px;
}


.heading1{
    width: 50%;
    text-align: left;
    box-sizing: border-box;
    display: inline-block;
}


.heading2{
    width: 50%;
    text-align: right;
    box-sizing: border-box;
    display: inline-block;
}


.past_perform_home{
    width: 49.75%;
    text-align: left;
    box-sizing: border-box;
    display: inline-block; 
    padding: 6px 2px;
}


.past_perform_away{
    width: 49.75%;
    text-align: right;
    box-sizing: border-box;
    display: inline-block;
    padding: 6px 2px;
}


.past_perform_result{
    width: 8%;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}

.probability_annot{
    box-sizing: border-box;
    white-space: nowrap;
    padding-top: 15px;
    float: left;
    width: 78%;
}


.win {
    background: #00203FFF;
    box-sizing: border-box;
    display: inline-block;
    height: 15px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 15px;
    padding-bottom: 10px
    margin-top: 25px;
}


.draw {
    background: #ADEFD1FF;
    box-sizing: border-box;
    display: inline-block;
    height: 15px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 15px;
    padding-bottom: 10px
    margin-top: 25px;
}


.loss {
    background: #B1624EFF;
    box-sizing: border-box;
    display: inline-block;
    height: 15px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 15px;
    padding-bottom: 10px
    margin-top: 25px;
}

.collapsible_heading {
    font-size: 150%;

}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: rgba(135,186,99,0);
  cursor: pointer;
  margin-top: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  border-radius: 10px 10px 0px 0px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 0.6em;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #c7e0c7;
  font-family: 'Montserrat', sans-serif;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  display: none;
  overflow: hidden;
  background-color: rgba(255,255,255,0.45);
  border-radius: 0px 0px 10px 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6em;
}

.game_probability {
    margin-top: 20px
}

.dropdown_img {
    height: 15px;
    padding-top: 2px;
}