@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #021b3b;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}
.container
{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100vw;
}
.container .card
{
  width: 320px;
  margin: 20px;
  padding: 40px 30px;
  z-index: 999;
  border-radius: 22px;
  background: #021b3b;
  transition: box-shadow 1s;
  box-shadow:  38px 38px 76px #01142b,
             -38px -38px 76px #03224b;
}
.container .card:hover
{
  box-shadow: inset 38px 38px 76px #01142b,
            inset -38px -38px 76px #03224b;
}

.container .card .imgBx
{
  position: relative;
  text-align: center;
}
.container .card .imgBx img
{
  max-width: 190px;
  mix-blend-mode: hard-light;
}
.container .card .contentBx
{
  position: relative;
  /*margin-top: 20px;*/
  text-align: center;
}
.container .card .contentBx h2
{
  color: #fe2d2d;
  font-weight: 700;
  font-size: 1.6em;
  /*letter-spacing: 2px;*/
  mix-blend-mode: hard-light;
}
.container .card .contentBx p
{
  color: #e7e7e7;
  mix-blend-mode: screen;
}
.container .card .contentBx a
{
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 22px;
  color: #fe2d2d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(145deg, #021d3f, #021835);
  box-shadow:  11px 11px 26px #011126,
             -11px -11px 26px #032550;
}
.container .card .contentBx a:hover
{
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 22px;
  color: #611111;
  font-size: 16px;
  text-decoration: none;
  background: #021b3b;
  box-shadow: inset 38px 38px 76px #01142b,
              inset -38px -38px 76px #03224b;
}
.container .card a:hover span
{
  display: block;
  transform: scale(0.98);
}
.container .card:hover .imgBx,
.container .card:hover .contentBx
{
  transform: scale(0.98);
}

/*Buttons*/
.langbtns
{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 22px;
  color: #fe2d2d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(145deg, #021d3f, #021835);
  box-shadow:  11px 11px 26px #011126,
             -11px -11px 26px #032550;
}
.langbtns:hover
{
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 22px;
  color: #611111;
  font-size: 16px;
  text-decoration: none;
  background: #021b3b;
  box-shadow: inset 38px 38px 76px #01142b,
            inset -38px -38px 76px #03224b;
}
.langbtns:hover span
{
  display: block;
  transform: scale(0.98);
}

.active
{
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 22px;
  color: #611111;
  font-size: 16px;
  text-decoration: none;
  background: #021b3b;
  box-shadow: inset 38px 38px 76px #01142b,
              inset -38px -38px 76px #03224b;
}
.active span
{
  display: block;
  transform: scale(0.98);
}

/*Responsive specific*/
@media (max-width: 1079px) {
  #ytchan
  {
  order: 3;
  }
}
@media (max-width: 501px) {
  #enbtn
  {
  margin-top: 32px;
  }
}
@media (max-width: 375px) {
    .container .card
    {
    width: auto;
    max-width: 100vw;
    }
}