/* community.css */
@import url('/fonts.css');
@import url('/tailwind.css');
@import url('/app/global.css');

/* html, body {
  font-family: var(--font-inter) !important;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
} */

html, body {
  font-family: var(--font-inter) !important;
  margin: 0;
  padding: 0;
}

.aviencloud-font-container {
    position: relative;
    flex: 1;
    text-align: center;
    z-index: 10;
}

.aviencloud-font-container h1 {
  font-family: var(--font-typograph-pro);
  color: #000000;
  letter-spacing: 0.5em; /* Space between letters */
  text-transform: uppercase;
  display: flex; /* Use flexbox to control layout */
  justify-content: center; /* Center the text */
  white-space: nowrap; /* Prevent wrapping */
  text-align: center;
}

.community-page {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.community-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Background Image */
.community-background {
    position: absolute;
    left: 0;
    top: -40%;
    height: 150%;
    z-index: 1;
    overflow: hidden;
}

.community-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* (left/right, up/down) */
    transform: scale(1.1) translate(-4.85%, 5%);
}

/* Content - Everything on the right */
.community-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.right-content {
    display: flex;
    flex-direction: column;
    width: 500px;
    padding: 13.5rem 2rem;
    margin-right: 8rem;
    margin-top: 3rem;
}

/* Join Community Section */
.join-community-section {
    margin-bottom: 2rem;
}

.join-community-section h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    text-align: center;
    color: black;
}

.community-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 7rem;
}

.community-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    /* border: none; */
    border: 1px solid rgb(0, 0, 0);
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
    backdrop-filter: blur(5px);
    color: #333;
    /* background: rgba(255, 255, 255, 0.9); */
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.community-card img {
    width: 24px;
    height: 24px;
}

.community-card-name {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-inter);
  color: black;
}



/* Button styles */
.two-buttons-container {
    display: flex;
    justify-content: center;

    /* margin-top: 20rem; */
}

.button-group {
    display: flex;
    height: 45px;
    overflow: hidden;
}

.button-discord {
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 125px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    padding-left: 45px;
    padding-right: 16px;
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.button-reddit {
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 125px;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    padding-left: 20px;
    padding-right: 45px;
    background-color: #FF4500;
    color: white;
    border: none;
    cursor: pointer;
}







.discord-card {
  align-items: center;
}

.reddit-card {
  align-items: center;
}

.discord-card:hover {
    background: #5865F2;
    color: white;
}

.reddit-card:hover {
    background: #FF4500;
    color: white;
}

/* Social Media Section */
.social-media-section {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
}

.social-media-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    color: black;
    text-align: center;
}

.social-icons-grid {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: black;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    white-space: nowrap;
}

.social-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.social-card img {
    width: 18px;
    height: 18px;
}

.social-card span {
    font-size: 0.9rem;
}

/* Platform-specific hover colors */
.social-card[data-platform="youtube"]:hover { 
    background: #ff0000; 
    color: white;
    border-color: #ff0000;
}

.social-card[data-platform="spotify"]:hover { 
    background: #1db954; 
    color: white;
    border-color: #1db954;
}

.social-card[data-platform="soundcloud"]:hover { 
    background: #F37422; 
    color: white;
    border-color: #F37422;
}

.social-card[data-platform="twitter"]:hover { 
    background: #1d9bf0; 
    color: white;
    border-color: #1d9bf0;
}

.social-card[data-platform="facebook"]:hover { 
    background: #1877F2; 
    color: white;
    border-color: #1877F2;
}

.social-card[data-platform="instagram"]:hover { 
    background: #C13584; 
    color: white;
    border-color: #C13584;
}

.social-card[data-platform="twitch"]:hover { 
    background: #9146ff; 
    color: white;
    border-color: #9146ff;
}

.social-card[data-platform="tiktok"]:hover { 
    background: #000000; 
    color: white;
    border-color: #000000;
}

.social-card[data-platform="artstation"]:hover { 
    background: #13AFF0; 
    color: white;
    border-color: #13AFF0;
}

.social-card[data-platform="pixiv"]:hover { 
    background: #0096fa; 
    color: white;
    border-color: #0096fa;
}

.social-card[data-platform="reddit"]:hover { 
    background: #FC471E; 
    color: white;
    border-color: #ff3a0d;
}

.social-card[data-platform="pinterest"]:hover { 
    background: #E60023; 
    color: white;
    border-color: #E60023;
}

.social-card[data-platform="deviantart"]:hover { 
    background: #00e59b; 
    color: white;
    border-color: #00e59b;
}

.social-card[data-platform="tumblr"]:hover { 
    background: #021A35; 
    color: white;
    border-color: #021A35;
}
















/* aaa */
/* Making community.php responsive on all devices */

/* Desktop | 1281px - 1440px  */
@media (max-width: 1280px) {
  /* None, coded on macbook m1 pro */
}

/* Medium Laptop/Desktop | 1515px - 1920px */
@media (max-width: 1515px) {
 /* None, coded on macbook m1 pro */
}

/* Small Laptop/Desktop | 1024px - 1280px */
@media (max-width: 1024px) {
  /* None, coded on macbook m1 pro */
}

/* Mobile Small Portrait (Normal) | up to 480px */
/* S20+, iPhone 12, iPhone 13 */
@media (max-width: 480px) and (orientation: portrait) {

  /* .shape-svg {
      width: auto;
      height: auto;
  } */

  html, body {
    height: 100dvh;
    overflow: hidden;
  }

  .community-page {
    height: 100dvh;
    overflow: hidden;
  }

  .community-container {
    height: none;
    left: none;
    top: none;
    position: none;
    overflow: hidden;
  }

  .community-background {
    position: absolute;
    left: 0;
    top: -40%;
    height: 150%;
    z-index: 1;
  }

  .community-background img {
    transform: scale(1) translate(0%, 0%);
    width: 100%;
    height: 50%;
    object-fit: cover;
    top: 21.75rem;
    position: fixed;
    z-index: 100;
  }

  .community-content {
    position: relative;
    z-index: 2;
    width: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .main-content {
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
  }

  .right-content {
    width: 15rem;
    padding: 2rem 1rem;
    margin: 0;
    margin-top: -17.5rem;
  }

  .join-community-section h1 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .two-buttons-container {
    margin-bottom: 2rem;
  }

  .button-group {
    height: 35px;
    margin-bottom: 0.75rem;
  }

  .button-discord {
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 80px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    padding-left: 25px;
    padding-right: 10px;
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

  .button-reddit {
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 80px;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    padding-left: 10px;
    padding-right: 25px;
    background-color: #FF4500;
    color: white;
    border: none;
    cursor: pointer;
  }

  .social-media-section {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
  }

  .social-media-section h2 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
  }

  .social-icons-grid {
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.1rem;
  }

  .social-card {
    padding: 0.4rem 0.6rem;
  }

  .social-card img {
    width: 14px;
    height: 14px;
  }

  .social-card span {
    font-size: 0.7rem;
  }
}

/* Mobile Small Landscape (Seitlich gehlaten) | up to 950px */
/* S20+, iPhone 14, iPhone 15 Pro in Landscape (Seitlich gehlaten) */
@media (max-width: 950px) and (orientation: landscape) {
  .community-page {
    height: 100vh;
  }

  .community-container {
    min-height: 100vh;
    align-items: center;
  }

  .community-background img {
    transform: scale(1.2) translate(-6%, 3%);
  }

  .main-content {
    display: flex;
    justify-content: flex-end;
    flex: 1;
  }

  .right-content {
    width: 250px;
    padding: 1.5rem;
    margin-top: 5rem;
    margin-right: 9rem;
  }

  .join-community-section h1 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .two-buttons-container {
    margin-bottom: 1rem;
  }

  .button-group {
    height: 32px;
  }

  .button-discord {
    font-family: var(--font-inter);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 70px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    padding-left: 20px;
    padding-right: 8px;
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

  .button-reddit {
    font-family: var(--font-inter);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    width: 70px;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    padding-left: 8px;
    padding-right: 20px;
    background-color: #FF4500;
    color: white;
    border: none;
    cursor: pointer;
  }

  .social-media-section {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
  }

  .social-media-section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .social-icons-grid {
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-card {
    padding: 0.3rem 0.5rem;
  }

  .social-card img {
    width: 12px;
    height: 12px;
  }

  .social-card span {
    font-size: 0.6rem;
  }
}

/* Mobile Large Portrait (Normal) | 481px - 600px */
/* iPhone 14 Pro Max, Pixel 7 Pro, larger phones */
@media (min-width: 481px) and (max-width: 600px) and (orientation: portrait) {
  .community-page {
    height: 100vh;
  }

  .community-container {
    min-height: 100vh;
    align-items: center;
  }

  .community-background img {
    transform: scale(1.25) translate(-7%, 2%);
  }

  .main-content {
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
  }

  .right-content {
    width: 350px;
    padding: 2.5rem 1.5rem;
    margin: 0;
  }

  .join-community-section h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .button-group {
    height: 80px;
    margin-bottom: 1rem;
  }

  .button-discord,
  .button-reddit {
    width: 100px;
    font-size: 14px;
    padding-left: 35px;
    padding-right: 20px;
  }

  .shape-svg {
    width: 14px;
    height: 80px;
  }

  .social-media-section {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
  }

  .social-media-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .social-icons-grid {
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-card {
    padding: 0.6rem 0.8rem;
  }

  .social-card img {
    width: 16px;
    height: 16px;
  }

  .social-card span {
    font-size: 0.8rem;
  }
}

/* Tablet Portrait (Normal) | 601px - 1024px */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .community-page {
    height: 100vh;
  }

  .community-container {
    min-height: 100vh;
    align-items: center;
  }

  .community-background img {
    transform: scale(1) translate(0%, 8%);
    object-position: 121% center;
  }

  .main-content {
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
  }

  .right-content {
    width: 450px;
    padding: 3rem 2rem;
    margin: 0;
    margin-left: 24rem;
    margin-top: -13rem;
  }

  .join-community-section h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  .button-group {
    display: flex;
    height: 52px; /* Increased size */
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .button-discord {
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%; /* Same as desktop - fills container */
    width: 140px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    padding-left: 45px;
    padding-right: 18px;
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    cursor: pointer;
    border: none; /* Ensure no borders */
  }

  .button-reddit {
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    height: 100%; /* Same as desktop - fills container */
    width: 140px;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    padding-left: 22px;
    padding-right: 45px;
    background-color: #FF4500;
    color: white;
    border: none;
    cursor: pointer;
  }

  .shape-svg {
    width: 30px;
    height: 52px; /* Match the button-group height exactly */
  }

  .social-media-section {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
  }

  .social-media-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .social-icons-grid {
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;

    max-width: 95vw;
    padding-left: 2.25rem;
  }

  .social-card {
    padding: 0.7rem 0.9rem;
  }

  .social-card img {
    width: 17px;
    height: 17px;
  }

  .social-card span {
    font-size: 0.85rem;
  }
}

/* Tablet Landscape (Seitlich gehlaten) | 951px - 1366px */
@media (min-width: 951px) and (max-width: 1366px) and (orientation: landscape) {
  .community-page {
    height: 100vh;
  }

  .community-container {
    min-height: 100vh;
    align-items: center;
  }

  .community-background img {
    transform: scale(1.08) translate(-5.5%, 5%);
  }

  .main-content {
    display: flex;
    justify-content: flex-end;
    flex: 1;
  }

  .right-content {
    padding: 2.5rem 1.5rem;
    margin-right: -1rem;
    margin-top: 14rem;
  }

  .join-community-section h1 {
    font-size: 2.1rem;
    margin-bottom: 2rem;
  }

  .two-buttons-container {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .button-group {
      display: flex;
      height: 45px;
      overflow: hidden;
  }

  .button-group:first-child {
      margin-right: 0;
  }

  .button-group:last-child {
      margin-left: 0;
  }

  .button-discord {
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 800;
      text-transform: uppercase;
      display: flex;
      height: 100%;
      width: 125px;
      align-items: center;
      justify-content: center;
      border-top-left-radius: 9999px;
      border-bottom-left-radius: 9999px;
      padding-left: 45px;
      padding-right: 16px;
      background-color: #5865F2;
      color: white;
      text-decoration: none;
      cursor: pointer;
      border: none;
  }

  .button-reddit {
      font-family: var(--font-inter);
      font-size: 18px;
      font-weight: 800;
      text-transform: uppercase;
      display: flex;
      height: 100%;
      width: 125px;
      align-items: center;
      justify-content: center;
      border-top-right-radius: 9999px;
      border-bottom-right-radius: 9999px;
      padding-left: 20px;
      padding-right: 45px;
      background-color: #FF4500;
      color: white;
      border: none;
      cursor: pointer;
  }

  .shape-svg {
      width: 26px;
      height: 45px;
  }

  .social-media-section {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
  }

  .social-media-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .social-icons-grid {
    gap: 0.4rem;
    justify-content: center;
  }

  .social-card {
    padding: 0.65rem 0.85rem;
  }

  .social-card img {
    width: 16px;
    height: 16px;
  }

  .social-card span {
    font-size: 0.8rem;
  }
}