body{

    margin:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    overflow-x:hidden;

    color:white;

    background:
        radial-gradient(circle at top,#170028 0%,#15224f 28%,#0d1430 55%,#05070d 100%);

    background-size:250% 250%;

    animation:BackgroundMove 20s ease infinite;

    position:relative;

}
body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(37, 0, 66, 0.18),
        transparent 35%),

        radial-gradient(circle at 80% 30%,
        rgba(74, 0, 114, 0.15),
        transparent 30%),

        radial-gradient(circle at 50% 90%,
        rgba(71, 0, 95, 0.12),
        transparent 35%);

    animation:GlowShift 15s ease infinite;

}
body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

    radial-gradient(circle,
    transparent 65%,
    rgba(0,0,0,.55) 100%);

}



/* ========================= */
/* FONT */
/* ========================= */

@font-face {

  font-family: Fortnite;

  src: url("Fonts/fortnite.otf");
}


/* ========================= */
/* HEADER */
/* ========================= */

/* ========================= */
/* VERSION LABELS */
/* ========================= */

.VersionWebsite{

    position:absolute;

    top:18px;

    left:20px;

    color:rgba(255,255,255,.65);

    font-family:Arial;

    font-size:14px;

    font-weight:700;

    letter-spacing:.8px;


    text-shadow:
        0 0 10px rgba(0,0,0,.7);

    z-index:5000;

    user-select:none;

}

.VersionIntro{

    position:absolute;

    top:20px;

    left:24px;

    color:rgba(255,255,255,.75);

    font-family:Arial;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;


    text-shadow:
        0 0 12px rgba(0,0,0,.8);

    z-index:100000;

    user-select:none;

}


.Header {

  background-color: rgb(16,16,16);

  display: flex;
  align-items: center;
  gap: 25px;

  padding: 12px 25px;

  border-radius: 18px;

  margin-top: 20px;

  box-shadow:
    0px 0px 20px rgba(255,255,255,0.08);
}

.PageTitle {

  color: white;

  font-family: Fortnite;
}

.PageTitle h1 {

  margin: 0;

  font-size: 50px;
}

.SponserTag {

  display: flex;
  align-items: center;
  gap: 10px;

  color: rgb(180,180,180);

  font-family: Arial;

  font-weight: bolder;
}

.CCLogo {

  width: 40px;
  height: 40px;

  object-fit: contain;
}


/* ========================= */
/* TOP SECTION */
/* ========================= */

.TopSection {

  width: 95%;

  display: flex;

  gap: 30px;

  margin-top: 40px;

  align-items: flex-start;
}


/* ========================= */
/* TAG PANEL */
/* ========================= */

.TagPanel{

    width:420px;

    position:relative;

    background:
        linear-gradient(
        180deg,
        rgba(24,24,28,.95),
        rgba(12,12,16,.95));

    border-radius:25px;

    padding:25px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.04);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 1px rgba(255,255,255,.2);

}

.PanelTitle {

  color: white;

  font-family: Fortnite;

  font-size: 30px;

  margin-top: 0;
}

.TagList {

  display: flex;
  flex-wrap: wrap;

  gap: 12px;
}

.FilterTag {

  background-color: rgb(30,30,30);

  color: white;

  padding: 10px 15px;

  border-radius: 20px;

  font-family: Arial;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.3px;

  cursor: pointer;

  transition: 0.2s ease;

  user-select: none;
}

.FilterTag:hover {

  background-color: rgb(50,50,50);

  transform: scale(1.05);
}

.FilterTag.Active {

  background-color: white;

  color: black;
}


/* ========================= */
/* SEARCH + WELCOME */
/* ========================= */

.SearchWelcomeArea {

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 25px;
}


/* SEARCH BAR */

#SearchBar {

  width: 100%;

  padding: 18px 22px;

  border: none;

  border-radius: 18px;

  background-color: rgb(16,16,16);

  color: white;

  font-size: 18px;

  outline: none;

  box-shadow:
    0px 0px 15px rgba(255,255,255,0.05);
}

#SearchBar::placeholder {

  color: rgb(120,120,120);
}


/* WELCOME PANEL */

.WelcomePanel{

    width:380px;

    position:relative;

    background:
        linear-gradient(
        180deg,
        rgba(24,24,28,.95),
        rgba(12,12,16,.95));

    border-radius:25px;

    padding:25px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.04);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 1px rgba(255,255,255,.2);

}

.WelcomeText {

  color: rgb(200,200,200);

  font-family: Fortnite;

  font-size: 22px;

  line-height: 1.6;

  margin: 0;
}


/* ========================= */
/* SKIN HUB */
/* ========================= */

.SkinHubContainer{

    width:92%;

    position:relative;

    background:
        linear-gradient(
        180deg,
        rgba(24,24,28,.95),
        rgba(12,12,16,.95));

    margin-top:40px;

    padding:30px;

    border-radius:25px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.04);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 1px rgba(255,255,255,.2);

}

.HubTitle {

  color: white;

  font-family: Fortnite;

  font-size: 34px;

  margin-top: 0;
}

.SkinHub {

  display: flex;
  flex-wrap: wrap;

  gap: 25px;
}

/* ========================= */
/* HUB HEADER */
/* ========================= */

.HubHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.TagToggle{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:Arial;

    font-weight:700;

    cursor:pointer;

    user-select:none;

}

.TagToggle input{

    display:none;

}

.Slider{

    width:56px;

    height:30px;

    background:#444;

    border-radius:999px;

    position:relative;

    transition:.25s;

}

.Slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:3px;

    top:3px;

    border-radius:50%;

    background:white;

    transition:.25s;

}

.TagToggle input:checked + .Slider{

    background:#4f8fff;

}

.TagToggle input:checked + .Slider::before{

    transform:translateX(26px);

}


/* ========================= */
/* SKIN CARD */
/* ========================= */

.SkinCard {

  width: 250px;

  background-color: rgb(20,20,20);

  border-radius: 20px;

  overflow: hidden;

  transition: 0.25s ease;

  cursor: pointer;

  box-shadow:
    0px 0px 15px rgba(255,255,255,0.05);
}

.SkinCard:hover {

  transform: scale(1.05);

  box-shadow:
    0px 0px 25px rgba(255,255,255,0.2);
}

.SkinCard img {

  width: 100%;

  height: 320px;

  object-fit: cover;
}

.SkinName {

  color: white;

  font-family: Arial;

  text-align: center;

  margin: 15px 10px;

  font-size: 20px;
}

.CardTags {

  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  padding: 15px;
  
}

.CardTag {

  background-color: rgb(35,35,35);

  color: white;

  padding: 5px 10px;

  border-radius: 20px;

  font-size: 12px;
  
  font-weight: bolder;

  font-family: Arial;
}

.NoResults {
  font-family: Fortnite;

  font-size: 20px;
}


/* ========================= */
/* OVERLAY */
/* ========================= */

.SkinOverlay {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: rgba(0,0,0,0.85);

  display: none;

  justify-content: center;
  align-items: center;

  z-index: 9999;

  backdrop-filter: blur(8px);

  padding: 20px;

  box-sizing: border-box;
}

.OverlayContent {

  width: 700px;

  max-width: 90vw;

  max-height: 90vh;

  background-color: rgb(16,16,16);

  border-radius: 30px;

  padding: 25px;

  position: relative;

  overflow: hidden;

  box-shadow:
    0px 0px 40px rgba(255,255,255,0.1);
}

.OverlaySkinName {

  color: white;

  font-family: Fortnite;

  font-size: 32px;

  margin-top: 0;

  margin-bottom: 20px;

  padding-right: 50px;
}

.SkinVideo {

  width: 100%;

  max-height: 70vh;

  border-radius: 20px;

  background-color: black;

  object-fit: contain;
}

.CloseButton {

  position: absolute;

  top: 18px;
  right: 18px;

  width: 42px;
  height: 42px;

  border: none;

  border-radius: 50%;

  background-color: rgb(35,35,35);

  color: white;

  font-size: 20px;

  cursor: pointer;

  transition: 0.2s ease;
}

.CloseButton:hover {

  background-color: rgb(60,60,60);

  transform: scale(1.08);
}

/* ========================= */
/* TAG CATEGORIES */
/* ========================= */

.TagPanel {

  max-height: 850px;

  overflow-y: auto;
}

.TagCategory {

  margin-bottom: 18px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  padding-bottom: 15px;
}

.CategoryHeader {

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgb(255, 255, 255);

  font-family: Fortnite;

  font-size: 25px;

  cursor: pointer;

  padding: 10px 0;

  user-select: none;
}

.CategoryTags {

  display: none;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 10px;

}

.TagCategory.Open .CategoryTags {

  display: flex;
}



/* ========================= */
/* START SCREEN */
/* ========================= */

.StartScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,

    #061327,

    #15254d,

    #263ea7,

    #4a2dc0,

    #061327);

    background-size:350% 350%;

    animation:BackgroundMove 18s ease infinite;

}

.StartScreen.Hidden{

    opacity:0;

    pointer-events:none;

}

.StartContent{

    text-align:center;

    color:white;

    font-family: Fortnite;

}

.StartLogo{

    width:180px;

    margin-bottom:25px;

    filter:

        drop-shadow(0 0 10px rgba(255,255,255,.25))

        drop-shadow(0 0 35px rgba(83,145,255,.4));

}

.EnterButton{

    margin-top:35px;

    padding:18px 70px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-family:Fortnite;

    font-size:26px;

    color:white;

    background:

    linear-gradient(
    180deg,
    #4f8fff,
    #2d5cff);

    box-shadow:

        0 0 15px rgba(82,144,255,.5),

        0 0 40px rgba(82,144,255,.25);

    transition:.25s;

    animation:Pulse 2.5s infinite;

}

.EnterButton:hover{

    transform:scale(1.05);

    box-shadow:

        0 0 25px rgba(82,144,255,.8),

        0 0 60px rgba(82,144,255,.45);

}

.EnterButton:hover{

    transform:scale(1.05);

}

#MusicButton{

    position:absolute;

    right:20px;

    top:20px;

    font-size:24px;

    cursor:pointer;

}

.IntroTitle{

    font-family:Fortnite;

    font-size:72px;

    letter-spacing:3px;

    margin:20px 0 10px;

    text-shadow:

        0 0 10px rgba(255,255,255,.3),

        0 0 30px rgba(94,145,255,.4);

}

.IntroDescription{
  font-size: 25px;
}
.IntroSubtitle{
  font-size: 25px;
}
.ParticleContainer{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.ParticleContainer::before{

    content:"";

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:white;

    box-shadow:

        10vw 15vh #7ab8ff,
        25vw 80vh #ffffff,
        40vw 30vh #6fb0ff,
        60vw 70vh #c6dbff,
        75vw 20vh #7dbbff,
        90vw 60vh #ffffff,
        35vw 55vh #8ab9ff,
        55vw 10vh #ffffff,
        80vw 90vh #72b7ff,
        15vw 50vh #dce9ff,
        65vw 40vh #8dbfff,
        45vw 85vh #ffffff;

    animation:FloatParticles 16s linear infinite;

}

@keyframes BackgroundMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes GlowShift{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}

@keyframes Pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

}

@keyframes FloatParticles{

0%{

transform:translateY(50px);

opacity:.2;

}

50%{

opacity:1;

}

100%{

transform:translateY(-120px);

opacity:.2;

}

}