@font-face {
  font-family: Suisse;
  font-weight: regular;
  src: url("fonts/SuisseIntl-Regular.otf") format("opentype");
}

body { 
  background-color: black; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* div, h1 {border: 1px solid red;} */ 

.header-in-box {
  font-family: 'Suisse', regular;
  color: rgb(255, 255, 255);
  margin: 0;
  padding: 10% 10% 10%;
  position: absolute;
  left: 0;
  right: 0;
}

.header-in-box-center {
  font-family: 'Suisse', regular;
  text-align: center;
  color: rgb(255, 255, 255);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-in-box{
  font-family: 'Suisse', regular;
  color: rgb(255, 255, 255);
  margin: 0;
  padding: 10% 10% 10%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.card {
  background-position: center;
  background-size: cover;
  border-radius: 13%;
  height: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 30%;
  padding-bottom: 30%;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.card-info-orange {
  background-color: rgb(234, 119, 52);
}

.card-info-blue {
  background-color: rgb(52, 72, 252);
}

.card-info-green {
  background-color: #53B31D;
}

.card-info-violet {
  background-color: #9442FC;
}

.card-info-pink {
  background-color: rgb(206, 80, 192);
}

.card-info-gray {
  background-color: #414780;
}

.card-info-red {
  background-color: #FC4E52;
}

.card-info-dontknow {
  background-color: #28ADFC;
}

.card-info-yellow {
  background-color: #FFCF69;
}

.card-info {
  transition: filter 1s;
} 

.card-info:hover, .card-info:active {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}

.card-image-me {
  background-image: url(images/IMG_8206.JPG);
  transition: filter 1s;
} 

.card-image-me:hover, .card-image-me:active {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}

.card-image-euzs {
  background-image: url(images/euzs.png);
  transition: filter 1s;
} 

.card-image-euzs:hover, .card-image-euzs:active {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}

.card-image-ai4a {
  background-image: url(images/ai4a.png);
  transition: filter 1s;
} 

.card-image-ai4a:hover, .card-image-ai4a:active {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}

@media screen and (min-width: 320px) {
    .card {
      width: 90%;
      padding-bottom: 90%;
    }
    .header-in-box{
      font-size: 17px;
    }
    .header-in-box-center{
      font-size: 25px;
    }
    .text-in-box{
      font-size: 12px;
    }
  }

@media screen and (min-width: 505px) {
    .card {
      width: 40%;
      padding-bottom: 40%;
    }
    .header-in-box{
      font-size: 17px;
    }
    .header-in-box-center{
      font-size: 25px;
    }
    .text-in-box{
      font-size: 12px;
    }
  }

@media screen and (min-width: 1200px) {
    .card {
      width: 30%;
      padding-bottom: 30%;
    }
    .header-in-box{
      font-size: 30px;
    }
    .header-in-box-center{
      font-size: 30px;
    }
    .text-in-box{
      font-size: 20px;
    }
  }