body {display: flex; flex-direction: column; align-items: center; background-color: black; background-image: url("/img/etoiles.jpg"); background-position: center; background-repeat: repeat; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;}
center {margin: 32px; color: white;}
a {color: blue; text-decoration: none;}
#logo img {width: 600px; height: 190px; background: inherit; opacity: 0.8;}
#main {width: 90%; max-width: 900px; display: flex; flex-direction: column; gap: 25px;}
#main a {display: block; text-decoration: none;}
#sw_lang {margin: 20px 0 16px;}
#sw_lang a:hover, #sw_lang a:active {background: rgba(0, 0, 255, 0.3); color: blue; padding: 1px 4px 0; border-radius: 4px;}
.app-card {display: flex; flex-direction: row; align-items: center; background: linear-gradient(to right, rgba(20, 20, 20, 0.9), rgba(41, 41, 41, 0.9)); border-radius: 10px; padding: 20px; color: #eee; backdrop-filter: blur(4px); transition: 0.3s; margin: 0 auto; min-height: 220px;}
.app-card:hover {background: linear-gradient(to right, rgba(41, 41, 41, 0.8), rgba(20, 20, 20, 0.8)); transform: translateY(-5px);}
.app-img {width: 240px; text-align: center; margin-right: 20px;}
.app-img img {border-radius: 6px; opacity: 0.9;}
.acH img {width: 240px; height: auto;}
.acV img {width: auto; height: 240px;}
.app-text {flex: 1;}
.app-title {font-size: 22px; font-weight: bold; margin-bottom: 10px;}
.t-chd {color: #00b6d6;}
.t-dpe {color: #0052d6;}
.t-pm {color: #8e00d6;}
.app-desc {font-size: 15px; opacity: 0.85;}
.nv {background: rgba(255, 0, 0, 0.2); color: red; padding: 1px 4px 0; border-radius: 4px;}

@media (max-width: 599px) {
  #logo {margin-top: 10px;}
  #logo img {content: url("/img/net_vador_mob.png"); width: 250px; height: 35px;}
  #sw_lang {margin: 40px 0 16px;}
  .app-card {flex-direction: column; text-align: justify;}
  .app-img {margin-right: 0;}
  .app-title {text-align: center; margin: 20px 0;}
}