* {margin:0}

body{
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

header {
    display: flex; flex-direction: column;
    position: fixed; top: 0%; width: 100%; height: 100px;
}
header #top-bar {
    background-color: black;
    color: white;
    padding: 10px 30px;
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
}
header img {height: 50px;}
#host-flags {display: flex; gap: 10px;}
#host-flags img {width: 45px; height: 30px}

header nav {
    display: flex;
    gap: 30px;
}
header nav a {
    color: white;
    text-decoration: none;
    font-size: 1.3rem;
}

#tablist {
    background-color: white;
    width: 100%; display: flex;
    padding: 0 30px;
}
#tablist button{
    border: 0px;
    background-color: rgba(0,0,0,0);
    padding: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}
#tablist button:hover{border-bottom: 2px solid;}

main {margin-top: 100px;}

#group-display {
    background:radial-gradient(rgb(119, 152, 196),rgb(88, 135, 196));
    justify-content: center;
    padding: 30px 10%;
    display: grid;
    width: 80%;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    overflow-x: hidden;
}
#group-display table tr:first-child {background: linear-gradient(rgb(150,150,150), rgb(60,60,60))}
#group-display table td:first-child {background: linear-gradient(90deg, rgb(150,150,150), rgb(60,60,60)); padding-left: 5px;}
#group-display table tr:first-child td:first-child {background: linear-gradient(135deg, rgb(150,150,150), rgb(60,60,60)); font-weight: bold;}
#group-display table td:last-child {font-weight: bold;}
#group-display table tr:nth-child(2) td:first-child {border-left: 3px solid greenyellow;}/*Qualify for knockout*/
#group-display table tr:nth-child(3) td:first-child {border-left: 3px solid greenyellow;}
#group-display table {background-color: rgb(60,60,60); color: white; text-align: center;}
#group-display table:last-child tr:nth-child(n + 2):nth-child(-n + 9) td:first-child {border-left: 3px solid greenyellow;}/*Top 8 3rd places qualify for knockout*/

figure:hover figcaption {display: flex!important; position: absolute;}
figcaption {background-color: rgba(0,0,0,0.7); padding: 3px;}

#knockout-display {
    background:radial-gradient(rgb(236, 216, 126),rgb(201, 180, 91));
    padding: 30px 10%;
    display: flex;
    justify-content: center;
    color: white;
    overflow-x: scroll;
}
#knockout-display > div {display:flex; flex-direction: column; gap: 20px;}

.knockout-match {
    border: 2px solid rgb(60,60,60);
    border-radius: 10px;
    background: linear-gradient(rgb(150,150,150), rgb(60,60,60));
    display: flex;
    padding: 20px;
    gap: 20px;
    width: 80px;
}
.reversed {flex-direction: row-reverse;}
.final {background:linear-gradient(rgb(192, 176, 105),rgb(148, 132, 63));}
.third-place {background:linear-gradient(rgb(158, 128, 72),rgb(112, 98, 35));}

.knockout-match div {display: flex; flex-direction: column; align-items: center;}
.knockout-score {display: flex; flex-direction: column; align-items: center;}
.knockout-score div {display: flex; flex-direction: row !important;}
/*.knockout-score p {border-right: 2px solid rgb(100, 200, 100);}*/

.triangleL, .triangleR{
    background-color:rgb(99, 230, 110);
    height:10px; width:10px;
}
.triangleR {
    margin-left: 3px;
    clip-path: polygon(0% 0%, 50% 50%, 0% 100%); 
}
.triangleL {
    clip-path: polygon(50% 0%, 0% 50%, 50% 100%); 
}



footer {
    background-color: black;
    color: white;
    padding: 20px;
}
@media (max-width: 1800px){
    #group-display{grid-template-columns: repeat(3, 1fr); justify-content: space-evenly;}
}
@media (max-width: 1550px){
    #group-display{grid-template-columns: repeat(2, 1fr); justify-content: space-evenly;}
}
@media (max-width: 1000px){
    #group-display{display: flex !important; flex-direction: column;}
}