body{
  margin:0;
  font-family: 'Segoe UI', sans-serif;
  background:
    url('../img/bg-wave.png') no-repeat center center fixed,
    linear-gradient(#b8c8d1,#9fb3bd);
  background-size:cover;
  min-height:100vh;
  color:black;
}

/* HEADER */
.header{
  text-align:center;
  padding-top:20px;
}

.logo{
  width:300px;
}

h1{
  font-size:28px;
  letter-spacing:6px;
  margin-top:20px;
}

/* TAB BUTTON */
.tabs{
  margin-top:25px;
}

.tab{
  padding:14px 40px;
  border-radius:40px;
  border:3px solid #1f2c44;
  background:#3a7be0;
  color:white;
  font-weight:700;
  margin:10px;
  font-size:18px;
  cursor:pointer;
  transition:0.3s;
}

.tab.active{
  background:#9fb8e8;
  color:black;
}

/* PAGE */
.page{
  display:none;
  padding:80px 100px;
}

.page.active{
  display:block;
}

/* TITLE STYLE */
.title{
  text-align:center;
  font-size:40px;
  font-weight:900;
  margin-bottom:50px;
  text-shadow:3px 3px 0 rgba(0,0,0,0.3);
}

.yellow{
  color:#ffe600;
}

.red{
  color:#ff2e2e;
}

.green{
  color:#27ff00;
}

/* GROUP */
.groups{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  margin-bottom:100px;
  padding: 0 40px;
}

.group{
  text-align:center;
}

.group-title{
  background:#ffe600;
  padding:12px;
  border-radius:30px;
  font-weight:900;
  font-size:18px;
  margin-bottom:15px;
}

.group li{
  list-style:none;
  font-weight:700;
  margin:8px 0;
  font-size:18px;
}

/* SEMIFINAL */
.semis{
  display:flex;
  justify-content:space-around;
  margin-bottom:100px;
}

.semi-title{
  background:#ff2e2e;
  padding:12px;
  border-radius:30px;
  color:white;
  font-weight:900;
  margin-bottom:10px;
}

/* FINAL */
.finals{
  display:flex;
  justify-content:space-around;
}

.final-title{
  background:#27ff00;
  padding:12px;
  border-radius:30px;
  font-weight:900;
  margin-bottom:10px;
}