.body {
  background-image: url("img/BGBody.jpg");
}



.container {
    display: grid;
    background-image: url("img/BGContainer.jpg");
    background-repeat: no-repeat;
    margin: -10px;
    grid-auto-rows: 1fr;
    grid-template-columns: 480px 600px;
    grid-template-rows: 360px 330px;
    gap: 0px 0px;
    grid-template-areas:
        "background Scoreboard"
        "LayoutSwitch LayoutSwitch";
}

.background {
    display: grid;
    background-image: url("img/BGScoreboard.jpg");
    background-repeat: no-repeat;
    grid-template-columns: 165px 150px 165px;
    grid-template-rows: 100px 160px 80px;
    gap: 0px 0px;
    grid-template-areas:
        "NameTeam1 AreaTime NameTeam2"
        "LogoHome ScoreArea LogoGuest"
        ". . .";
    grid-area: background;
}

.NameTeam1 {
    grid-area: NameTeam1;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    text-align: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 20px;
    color: white;
}

.NameTeam2 {
    grid-area: NameTeam2;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    text-align: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 20px;
    color: white;
}

.AreaTime {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.8fr 1.5fr 0.7fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . ."
        "Time Time Time"
        ". . .";
    grid-area: AreaTime;
}

.Time {
    grid-area: Time;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 40px;
    color: white;
}

.LogoHome {
    grid-area: LogoHome;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ScoreArea {
    display: grid;
    grid-template-columns: 65px 20px 65px;
    grid-template-rows: 0.5fr 1.8fr 0.5fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . ."
        "ScoreHome . ScoreGuest"
        ". . .";
    grid-area: ScoreArea;
}

.ScoreHome {
    grid-area: ScoreHome;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 80px;
    color: white;
}

.ScoreGuest {
    grid-area: ScoreGuest;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 80px;
    color: white;
}

.LogoGuest {
    grid-area: LogoGuest;
    display: flex;
    justify-content: center;
    align-items: center;
}


.Scoreboard {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Team Team Team"
    "SetTime SetTime SetTime"
    "Score Score Score";
  grid-area: Scoreboard;
  width: 550px;  
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 20px;
    color: white;
}

.SetTime {  display: grid;
    grid-template-columns: 1.3fr 1.0fr 1.3fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "StartStop Reset SetTimeMan";
    grid-area: SetTime;
    border: 2px solid white;
    height: 150px;
    padding: 5px;
    font-size: 20px;
    color: white;
    font-family: "Lucida Console", "Courier New", monospace;
}

.StartStop { grid-area: StartStop; }

.Reset { 
    grid-area: Reset; 
    text-align: center;

}

.SetTimeMan { grid-area: SetTimeMan; }

.Score {  
    display: grid;
    grid-template-columns: 1.1fr 1.1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "ScoreTeam1 ScoreTeam2";
    grid-area: Score;
    border: 2px solid white;
    height: 100px;
    padding: 5px;
    text-align: center;
}

.ScoreTeam1 { grid-area: ScoreTeam1; }

.ScoreTeam2 { grid-area: ScoreTeam2; }

.Team {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Teams Teams"
    "File1 File2";
  grid-area: Team;
    border: 2px solid white;
    font-size: 20px;
    color: white;    
    padding: 5px;
}

.File2 { grid-area: File2; }

.Teams {  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1.4fr;
  grid-template-rows: 1.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "SetTeam1 SetTeam SetTeam2";
  grid-area: Teams;
    font-family: "Lucida Console", "Courier New", monospace;
    height:100px;
    
    text-align: center;
}

.SetTeam1 { grid-area: SetTeam1; }

.SetTeam2 { grid-area: SetTeam2; }

.SetTeam { grid-area: SetTeam; }

.File1 { grid-area: File1; }

.LayoutSwitch {
    grid-area: LayoutSwitch;
    padding-top: 80px;
    height: 200px;
    width: 500px;

}

.Row {
    grid-area: Row;
    height: 120px;
    display: flex;
    justify-content: center;

}

.button {
    box-shadow: 0px 0px 0px 2px #9fb4f2;
    background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    background-color: #7892c2;
    border-radius: 10px;
    border: 1px solid #4e6096;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 80px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 0px #283966;
    margin: 4px;
}

.button:hover {
    background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color: #2464b3;
}

.button:active {
    position: relative;
    top: 1px;
}

.buttonR {
    box-shadow: 0px 0px 0px 2px #f29f9f;
    background: linear-gradient(to bottom, #c81010 5%, #7f1515 100%);
    background-color: #9e6169;
    border-radius: 10px;
    border: 1px solid #ff0000;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 80px;
    height: 80px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #943765;
    margin: 3px;
}

.buttonG {
    box-shadow: 0px 0px 0px 2px #09af35;
    background: linear-gradient(to bottom, #13be2a 5%, #81b278 100%);
    background-color: #a2c278;
    border-radius: 10px;
    border: 1px solid #428935;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 80px;
    height: 80px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #38944c;
    margin: 3px;
}

.buttonfile {
    font-weight: bold;
    color: dodgerblue;
    padding: 0.5em;
    border: thin solid grey;
    border-radius: 3px;
    width: 250px
}

.buttonfile:hover {
    background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color: #476e9e;
}

.buttonfile:active {
    position: relative;
    top: 1px;
}

.buttonOrder {
    box-shadow: 0px 0px 0px 2px #9fb4f2;
    background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    background-color: #7892c2;
    border-radius: 10px;
    border: 1px solid #4e6096;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 100px;
    height: 100px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #283966;
    margin: 3px;
}

.buttonOrderR {
    box-shadow: 0px 0px 0px 2px #f29f9f;
    background: linear-gradient(to bottom, #c81010 5%, #7f1515 100%);
    background-color: #9e6169;
    border-radius: 10px;
    border: 1px solid #ff0000;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 100px;
    height: 100px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #943765;
    margin: 3px;
}

.buttonOrderG {
    box-shadow: 0px 0px 0px 2px #09af35;
    background: linear-gradient(to bottom, #13be2a 5%, #81b278 100%);
    background-color: #a2c278;
    border-radius: 10px;
    border: 1px solid #428935;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    width: 100px;
    height: 100px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #38944c;
    margin: 3px;
}