.flex-container {
  display : flex;
  flex-flow : row wrap;
  justify-content : space-around;
  padding : 0;
  margin : 0;
  list-style : none;
}

.flex-item {
  background : white;
  padding : 5px;
  width : 45px;
  height : 45px;
  margin-top : 10px;
  line-height : 18px;
  color : black;
  font-weight : bold;
  font-size : 1em;
  text-align : center;
}

.flex-item-halloffame {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border : 1px ridge #9fb9e3; 
  background : #208a3c;
  border-radius : 25px;
  padding : 10px;
  width : 250px;
  height : 120px;
  margin-top : 10px;
  line-height : 24px;
  color : white;
  font-weight : bold;
  font-size : 1.1em;
  text-align : center;
  transition : width 2s;
}

.flex-item-halloffame:hover {
  Background : red;
}

.flex-item-group {
  background-color : #933846;
  padding : 5px;
  width : 200px;
  height : 180px;
  margin-top : 10px;
  padding-left : 20px;
  line-height : 24px;
  color : white;
  font-weight : bold;
  font-size : 1em;
  text-align : left;
}

.flex-item-games{
  padding : 5px;
  width : 45%;
  height : 600px;
  margin-top : 10px;
  padding-left : 20px;
  line-height : 24px;
  color : black;
  font-size : 1em;
  text-align : left;
}

.navigation {
  display: flex;
  flex-flow : row wrap;
  justify-content : flex-end;
  list-style: none;
  margin: 0;
  background: deepskyblue;
}

.navigation a{
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #1565C0;
}


@media all and(max-width : 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and(max-width : 500px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a {
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
  
}

.lngenab {
  background-color: #abdbe3;
  padding : 10px;
}

.lnganjil {
  background-color: #eeeee4;
  padding : 10px;
}

.hbenua {
  background-color : #eab676;
  padding : 10px;
}

.headline {
  background : #ffffc7;
  border : 3px solid #383821;
}

.numberf {
   text-align   : right;
   margin-right : 5px; 
}

.anggotaheader {
  background-color : #0c3815; 
  color : #c1f5cc;
  text-align : center;
  padding-left: 10px;
  padding-right: 10px;
}

.zoom {
  padding: 50px;
  background-image: url('/images/euro2024/euro2024logo1.png');
  background-repeat : no-repeat;
  background-size : content;
  background-position : center;
  transition: transform .8s; /* Animation */
  width: 800px;
  height: 800px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  cursor : pointer;
}