@import url('https://fonts.googleapis.com/css2?family=Chivo&display=swap%27');


body {
  background-color: #131325;
  overflow-x: hidden;
  overflow-y: visible;
}

.block_container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background-color: #1b2238;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;

}

.block:hover {
  filter: grayscale(0)
}

.block {
  display: inline-flex;
  flex-shrink: 0;
  width: 220.5px;
  height: 284.4px;
  background-color: #131325;
  opacity: 100%;
  margin: 30px 15px 15px 30px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0.4rem 3rem 0px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  flex-direction: column;

}

.block img {
  position: relative;
  height: 100%;
}

.liakis.block:hover {
  background-color: #2cbb69;
  transition: all 0.3s ease-out 0s;

}


.panos:hover {
  background-color: #689bfd;
  transition: all 0.3s ease-out 0s;
}


.ego:hover {
  background-color: #832dc4;
  transition: all 0.3s ease-out 0s;
}


.loukas:hover {
  background-color: #e6aa00;
  transition: all 0.3s ease-out 0s;
}



.adamopoulos:hover {
  background-color: #eb2256;
  transition: all 0.3s ease-out 0s;

}



.prodromos:hover {
  background-color: #6b3621;
  transition: all 0.3s ease-out 0s;
}

.giannis:hover {
  background-color: #d00000;
  transition: all 0.3s ease-out 0s;
}

.margarita:hover {
  background-color: #ce71b6;
  transition: all 0.3s ease-out 0s;
}




.box_image {
  position: relative;
  background-color: #E61E28;
  display: inline-flex;
  border-style: none;
  float: right;

}

.block a {
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.phase_number {
  height: 100%;
  width: 13.5%;
  display: inline-flex;
  position: relative;
  color: white;
  font-family: "Chivo", sans-serif;
  text-align: center;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  writing-mode: vertical-lr;
  transform: rotate(180deg);

  text-orientation: sideways;
}