body { font-family: Verdana, sans-serif; padding: 2rem; background: #f0f0f0; }


.theme-xavier .theme-header::before       { content: "🌐 "; }
.theme-webworld .theme-header::before     { content: "🌍 "; }
.theme-astrology .theme-header::before    { content: "✨ "; }
.theme-christmas .theme-header::before    { content: "🎄 "; }
.theme-roswell .theme-header::before      { content: "👽 "; }
.theme-xavierfinans .theme-header::before { content: "💰 "; }
.theme-group .theme-header::before        { content: "🏢 "; }
.theme-halloween .theme-header::before    { content: "🎃 "; }
.theme-valentine .theme-header::before    { content: "❤️ "; }
.theme-easter .theme-header::before       { content: "🐰 "; }

/* Xavier Media Theme */
.theme-xavier {
    background-color: #D6E0EA;
    color: #000000;
}
.theme-xavier a.link {
    background-color: #336699;
    color: #FFFFFF;
}
.theme-xavier a.link:hover {
    background-color: #5B84AD;
}

/* WebWorld Theme */
.theme-webworld {
    background-color: #EAF4D6;
    color: #000000;
}
.theme-webworld a.link {
    background-color: #99CC33;
    color: #000000;
}
.theme-webworld a.link:hover {
    background-color: #ADD65B;
}

/* Xavier Astrology Theme */
.theme-astrology {
    background-color: #FAF9F6;
    color: #1A1A1A;
}
.theme-astrology a.link {
    background-color: #663399;
    color: #FFFFFF;
}
.theme-astrology a.link:hover {
    background-color: #8654B3;
}

/* Christmas Theme */
.theme-christmas {
    background-color: #FFF7F0;
    color: #333333;
}
.theme-christmas a.link {
    background-color: #AA0000;
    color: #FFFFFF;
}
.theme-christmas a.link:hover {
    background-color: #117744;
}

/* Roswell UFOs Theme */
.theme-roswell {
    background-color: #1A1A1A;
    color: #EEEEEE;
}
.theme-roswell a.link {
    background-color: #00AA55; /* UFO-grön */
    color: #FFFFFF;
}
.theme-roswell a.link:hover {
    background-color: #FFCC00; /* varningsgul */
    color: #111111;
}


/* Xavier Finans Theme */
.theme-xavierfinans {
    background-color: #F8F9FA;
    color: #1A1A1A;
}
.theme-xavierfinans a.link {
    background-color: #003366;
    color: #FFD700;
}
.theme-xavierfinans a.link:hover {
    background-color: #335577;
}

/* Xavier Group Theme */
.theme-group {
    background-color: #F4F4F4;
    color: #000000;
}
.theme-group a.link {
    background-color: #444444;
    color: #FFFFFF;
}
.theme-group a.link:hover {
    background-color: #666666;
}

/* Halloween Theme */
.theme-halloween {
    background-color: #1A1A1A;
    color: #FFCC66;
}
.theme-halloween a.link {
    background-color: #FF6600;
    color: #000000;
}
.theme-halloween a.link:hover {
    background-color: #CC5200;
}

/* Valentine Theme */
.theme-valentine {
    background-color: #FFF0F5;
    color: #990033;
}
.theme-valentine a.link {
    background-color: #CC3366;
    color: #FFFFFF;
}
.theme-valentine a.link:hover {
    background-color: #E75480;
}

/* Easter Theme */
.theme-easter {
    background-color: #FFFBEA;
    color: #333333;
}
.theme-easter a.link {
    background-color: #99CC99;
    color: #000000;
}
.theme-easter a.link:hover {
    background-color: #FFB6C1;
}

body.linktree {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.profile-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  border: 3px solid #333;
  object-fit: cover;
}

a.link {
  display: block;
  width: 90%;
  max-width: 400px;
  margin: 0.5rem auto;
  padding: 0.8rem 1rem;
  text-align: center;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

a.link:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

.links {
  width: 100%;
  max-width: 600px; /* större på desktop */
}

a.link {
  padding: 1rem 1.2rem; /* lite högre */
  font-size: 1.1rem;    /* större text */
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.header img.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #333;
  object-fit: cover;
}

.header h1 {
  font-size: 2rem;
  margin: 0;
}

.cover {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 0 0 20px 20px;
  margin-bottom: -80px; /* drar upp headern */
}