/* latin */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(http://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbQ.woff2) format('woff2');
}

html, body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  background-color: #000; 
  height: 100%; 
}

td, tr, img  { 
  padding: 0; 
  margin: 0; 
  border: none; 
}
table { border-collapse: collapse; }

body {
  background-image: url('background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #999;
}

#welcome {
  margin-top: -170px;
  font-family: 'Ruach Let', "Droid Sans", sans-serif;
  color: #FFFFFF;
  font-size: 54px;
  text-shadow: 0 2px 6px #000000, 0 0 5px #000000;
}

#subwelcome {
  font-family: 'Ruach Let', "Droid Sans", sans-serif;
  color: #FFFFFF;
  font-size: 24px;
  text-shadow: 0 2px 6px #000000, 0 0 5px #000000;
}

#middle {
  background-image: url('middle.png');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: cover;
  width: 100%;
  height: 624px;
}

#footer {
  background-image: url('footer.png');
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: 1920px 1260px;
  background-position: center top;
}

#buton-angel, #buton-demon {
  font-family: "Droid Sans";
  color: #FFFFFF;
  font-size: 38px;
  text-shadow: 0 2px 6px #000, 0 0 5px #000;
  text-align: center;
  margin-top: 100px;
  width: 355px;
  height: 76px;
  line-height: 76px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#buton-angel { background-image: url('join1.png'); }
#buton-angel:hover { background-image: url('join01.png'); transform: scale(1.05); }

#buton-demon { background-image: url('join.png'); }
#buton-demon:hover { background-image: url('join02.png'); transform: scale(1.05); }

#vs {
  margin-top: 90px;
  width: 120px;
  text-align: center;
  font-family: "BakaExpertRegular";
  color: #FFFFFF;
  font-size: 74px;
  text-shadow: 0 2px 6px #000, 0 0 5px #000;
}

#content-portal { margin-top: 170px; }

/* Footer social */
#footer-align {
  font-family: "Droid Sans";
  color: #FFFFFF;
  font-size: 14px;
  padding-top: 30px;
  text-align: center;
}

#footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

#footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #808080;
  font-size: 14px;
  transition: color 0.2s ease;
}

#footer-social a svg {
  width: 20px;
  height: 20px;
  fill: #808080;
  transition: fill 0.2s ease;
}

#footer-social a:hover {
  color: #fff;
}

#footer-social a:hover svg {
  fill: #fff;
}