body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
ul {
    text-align: left;
}
.preamble {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
}
.postamble {
    display: none;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
}
.start-screen{
    border: 5px solid red;
    text-align: center;
    width: 335px;
    height: 600px;
    background-color: #95c720;
    
}
#choose-color {
    border: 5px solid white;
    background-color: black;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: auto;
    width: 50%;
    margin-bottom: 20px;
    margin-top: 20px;
    
}
#color {
    margin-bottom: 20px;
    margin-left: 20px;
}
.square {
    height: 20px;
    width: 25px;
    float: left;
    
  }
#black{
    background-color: black;
}
#blue{
    background-color: blue;
    float: left;
}
#purple{
    background-color: purple;
    float: left;
}
#pink{
    background-color: pink;
    float: left;
}
#red{
    background-color: red;
    float: left;
}
#orange{
    background-color: orange;
    float: left;
}
#yellow{
    background-color: yellow;
    float: left;
}
#green{
    background-color: green;
    float: left;
}
#white{
    background-color: white;
    float: left;
}
#no-colour{
    background-color: grey;
    float: none;
}
#black-font{
    background-color: black;
    float: left;
}
#blue-font{
    background-color: blue;
    float: left;
}
#purple-font{
    background-color: purple;
    float: left;
}
#pink-font{
    background-color: pink;
    float: left;
}
#red-font{
    background-color: red;
    float: left;
}
#orange-font{
    background-color: orange;
    float: left;
}
#yellow-font{
    background-color: yellow;
    float: left;
}
#green-font{
    background-color: green;
    float: left;
}
#white-font{
    background-color: white;
    float: left;
}
#bg-font {
    background-color: #95c720;
    width: 50px;
}
.container {
    /*display: grid;*/
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    display: none;
}
.action{
    border: 5px solid red;
    text-align: center;
    width: 340px;
    height: 600px;
    background-color: #95c720;
    
}
#grabber{
background-color: rgb(31, 30, 94);
}
h2 {
    font-size: 20px;
    background-color: rgb(35, 148, 44);
    white-space: nowrap; 
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}
.scores{
    display: grid;
    grid-template-columns: 140px 30px 140px 30px;
    grid-template-rows: 50px;
}

#home-score {
    border: 5px solid red;
    width: auto;
    height: auto;
    background-color: aliceblue;
    height: 30px;
    line-height: 30px;
    margin: auto;
}
#away-score {
    border: 5px solid red;
    width: auto;
    height: auto;
    background-color: aliceblue;
    height: 30px;
    line-height: 30px;
    margin: auto;
}
#player-name {
    border: 5px solid white;
    background-color: black;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: auto;
}
#club-name {
    border: 5px solid rgb(47, 0, 255);
    height: 30px;
    line-height: 30px;
    margin: auto;
}

.results-in {
    font-size: 35px;
    font-weight: 700;
    line-height: 150%;
    background-color:black;
    color: greenyellow;
    width: 97%;
    margin: auto;
    padding: 5px;
    align-self: left;
    display: none;
    
}

.buttons{
    display: grid;
    grid-template-columns: 1fr 250px 1fr;
    
    
}

/*.btn-group {
    height: 220px;
}*/
.btn-group button {
    background-color: rgb(10, 78, 21); /* Green background */
    border: 5px solid rgb(248, 246, 248); /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
    font-size: 17px;
    height: 44px;
    line-height: 7px;

  }
#uefa-cup-button {
    padding: 10px;
    font-size: 15px;
}

  .btn-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
  }
  
#take-result-button{ 
    background-color: rgb(8, 107, 30); /* Green background */
    border: 1px solid rgb(17, 114, 30); /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
    font-size: 25px; 
}
#play-match {
    background-color: rgb(8, 107, 30); /* Green background */
    border: 1px solid rgb(17, 114, 30); /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
    font-size: 25px;
    font-family: sans-serif;
}
#rules {
    background-color: rgb(187, 179, 135);
    width: 90%;
    margin: auto;
    border: 5px solid rgb(230, 4, 4);
    font-size: 10px;
    
}
#intro {
    color: rgb(221, 36, 36);
    font-size: 25px;
    font-weight: 700;
    line-height: 60%;
    width: 60%;
    margin: auto;
    padding: 10px;
}
#home-league-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-fa-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-league-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-european-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-uefa-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-cwc-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#home-no-wins-goal {
    
    background-position: center;
    background-size: cover; 
    height: 44px;
    
}
#away-league-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#away-fa-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#away-league-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#away-european-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
}
#away-uefa-cup-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
  
}
#away-cwc-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
   
}
#away-no-wins-goal {
    /* background-image: url('football-icon.png');*/
    background-position: center;
    background-size: cover; 
    height: 44px;
    
}
#latest-result{
    background-color: rgb(48, 46, 46);
    color: yellow;
    margin: 5px;
}
.league-record{
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    color: white;
    
}
.league-table{
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    
}
#played-final {
    background-color: black;
}


.test-container {
  
grid-template-columns: 10px 1fr;
text-align: left;

}
.first {
    display: none;
}
.second {
    display: none;
}
.third {
    display: none;
}
.fourth {
    display: none;
}
.fifth {
    display: none;
}
.sixth {
    display: none;
}
.seventh {
    display: none;
}
.eighth {
    display: none;
}
.ninth {
    display: none;
}
.tenth {
    display: none;
}
.eleventh {
    display: none;
}
.twelfth {
    display: none;
}
.thirteenth {
    display: none;
}
.fourteenth {
    display: none;
}
.fifteenth {
    display: none;
}
.sixteenth {
    display: none;
}
.seventeenth {
    display: none;
}
.eighteenth {
    display: none;
}
.ninteenth {
    display: none;
}
.twentieth {
    display: none;
}
.numbers {
    display: grid;
}
.yellow {
    background-color: yellow;
    text-align: left;
    
}

td {
    background-color: yellow;
    width: 22px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    
  

}
.clubsleft{
    text-align: left;
    white-space: nowrap; 
    overflow: clip;
    text-overflow: clip;
    width: 5px;
    height: 20px;
    
    
}
.progbar {
    background-color: red;
    margin-top: 10px;
    margin-bottom: 0px;
    height: 20px;
    width: 242px;
    /*border: yellow solid 5px;*/
}
#pageBeginCountdownText {
    color: white;
    height: 10px;
}