:root{
  --bg:#04040C;
  --text:#ffffff;
  --accent:#D79727;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Barlow',sans-serif;color:var(--text)}
html,body{height:100%;}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(rgba(4,4,12,.8),rgba(4,4,12,.4)),
    url("assets/bg.jpeg") center/cover no-repeat;

  z-index:-1;
  
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  flex-direction: column;
}

.wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2rem;
  max-width:680px;
  width:100%;
}

/* Mobile responsiveness for wrap */
@media (max-width: 768px) {
  .wrap {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0.75rem;
  }
}

h1, h2, h3, h4, h5, h6{
  font-weight:500;
  font-family:'Albert Sans', sans-serif;
  color:var(--text);
  
  margin-bottom:2rem;
  letter-spacing:.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

/* Spinner */
.spinner{
  width:64px;height:64px;
  border:8px solid var(--accent);
  border-top-color:transparent;
  border-radius:50%;
  margin:0 auto 2rem;
  animation:spin 1s linear infinite;
}
/* logo */
.logo{width:clamp(160px,30vw,260px);margin-bottom:2rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));}


/* Language buttons */
.countries{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center;margin-top:2rem;}
.country{
  background:rgba(4,4,12,.8);
  backdrop-filter:blur(4px);
  border:1px solid rgba(215,151,39,.4);
  border-radius:16px;
  padding:2rem 2.5rem;
  width:min(320px,90vw);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}

/* Mobile responsiveness for countries */
@media (max-width: 768px) {
  .countries {
    gap: 2rem;
    margin-top: 1.5rem;
  }
  
  .country {
    padding: 1.5rem 2rem;
    width: 90%;
  }
}

@media (max-width: 480px) {
  .countries {
    gap: 1.5rem;
    margin-top: 1rem;
  }
  
  .country {
    padding: 1.25rem 1.5rem;
    width: 90%;
  }
}
.country:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.6);}

.country h2{margin-bottom:.75rem;color:var(--text);}

.langs{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:1rem;
}
.langs a{
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  flex:1 1 120px;
  background:var(--accent);
  color:var(--bg);
  text-decoration:none;
  padding:1rem;
  border-radius:4px;
  font-size:1.1rem;
  font-weight:600;
  transition:background .2s ease,transform .2s ease;
}

/* Mobile responsiveness for language buttons */
@media (max-width: 768px) {
  .langs a {
    padding: 0.875rem;
    font-size: 1rem;
    flex: 1 1 110px;
  }
}

@media (max-width: 480px) {
  .langs a {
    padding: 0.75rem;
    font-size: 0.95rem;
    flex: 1 1 100px;
  }
}

@media (max-width: 360px) {
  .langs a {
    padding: 0.625rem;
    font-size: 0.9rem;
    flex: 1 1 90px;
  }
}
.langs a:hover{
  background:#b28021;
  transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none}
}

/* explicit heading sizes */
h1{font-size:3rem;}
@media(max-width:600px){h1{font-size:2rem;}}
@media(max-width:480px){h1{font-size:1.75rem;}}
@media(max-width:360px){h1{font-size:1.5rem;}}
h2{font-size:1.6rem;}

/* Mobile responsiveness for h2 */
@media (max-width: 480px) {
  h2 {
    font-size: 1.4rem;
  }
}

@media (max-width: 360px) {
  h2 {
    font-size: 1.25rem;
  }
}

/* arrow icons on buttons */
.langs a::after{
  content:'\2192'; /* rightwards arrow */
  margin-left:.5rem;
  transition:transform .2s ease;
}
.langs a:hover::after{
  transform:translateX(4px);
}