* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020008;
  font-family: Arial, sans-serif;
}

body {
  color: white;
  cursor: none;
}


/* =========================
   GALAXY
========================= */

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


/* =========================
   NEON ARROW CURSOR
========================= */

#neonCursor {
  position: fixed;

  width: 18px;
  height: 18px;

  pointer-events: none;

  z-index: 99999;

  transform: translate(2px, 2px);

  filter:
    drop-shadow(0 0 3px #5a0080)
    drop-shadow(0 0 7px #8a00ff);

  animation: cursorPulse 1.2s ease-in-out infinite alternate;
}

#neonCursor svg {
  display: block;
}

@keyframes cursorPulse {

  0% {
    filter:
      drop-shadow(0 0 2px #3a0050)
      drop-shadow(0 0 5px #5f0080);
  }

  100% {
    filter:
      drop-shadow(0 0 4px #8a00ff)
      drop-shadow(0 0 11px #c000ff);
  }

}


/* =========================
   HOME
========================= */

#homePage {

  position: relative;

  z-index: 5;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 35px;
}


.logo {

  font-size: 48px;

  letter-spacing: 12px;

  color: #00d9ff;

  text-shadow:
    0 0 8px #00d9ff,
    0 0 20px #0066ff,
    0 0 40px #7b00ff;

  animation: logoPulse 2.5s ease-in-out infinite alternate;
}

@keyframes logoPulse {

  from {
    text-shadow:
      0 0 8px #00d9ff,
      0 0 20px #0066ff,
      0 0 35px #7b00ff;
  }

  to {
    text-shadow:
      0 0 12px #00d9ff,
      0 0 30px #0066ff,
      0 0 55px #9b00ff;
  }

}


/* =========================
   MAIN SEARCH
========================= */

.search-box {

  width: min(700px, 85vw);

  height: 64px;

  display: flex;

  border: 2px solid #8a00ff;

  border-radius: 40px;

  background: rgba(5, 0, 25, 0.75);

  box-shadow:
    0 0 10px #6a00ff,
    0 0 25px rgba(0, 180, 255, 0.5);

  overflow: hidden;
}

.search-box input {

  flex: 1;

  border: none;

  outline: none;

  background: transparent;

  color: white;

  padding: 0 25px;

  font-size: 20px;

}

.search-box input::placeholder {
  color: #aaa;
}

.search-box button {

  width: 80px;

  border: none;

  background: linear-gradient(
    90deg,
    #5d00ff,
    #009dff
  );

  color: white;

  font-size: 24px;

  cursor: none;

  transition: 0.2s;
}

.search-box button:hover {

  box-shadow:
    inset 0 0 20px white;

}


/* =========================
   RESULTS PAGE
========================= */

#resultsPage {

  display: none;

  position: relative;

  z-index: 5;

  width: 100%;

  height: 100%;

  overflow-y: auto;

  padding: 25px;
}


/* =========================
   RESULTS TOP
========================= */

.results-top {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 25px;
}


#homeButton {

  border: 1px solid #9b00ff;

  background: rgba(40, 0, 80, 0.7);

  color: white;

  padding: 12px 18px;

  border-radius: 12px;

  cursor: none;

  box-shadow:
    0 0 10px #7b00ff;

  transition: 0.2s;
}

#homeButton:hover {

  box-shadow:
    0 0 20px #00c8ff;

}


/* =========================
   SMALL SEARCH
========================= */

.small-search {

  flex: 1;

  max-width: 700px;

  height: 48px;

  display: flex;

  border: 1px solid #00bfff;

  border-radius: 25px;

  overflow: hidden;

  background: rgba(5, 0, 25, 0.8);

  box-shadow:
    0 0 12px rgba(0, 180, 255, 0.6);
}

.small-search input {

  flex: 1;

  border: none;

  outline: none;

  background: transparent;

  color: white;

  padding: 0 18px;

  font-size: 16px;
}

.small-search button {

  width: 55px;

  border: none;

  background: #5200ff;

  color: white;

  cursor: none;
}


/* =========================
   TABS
========================= */

.tabs {

  display: flex;

  gap: 10px;

  border-bottom: 1px solid rgba(130, 0, 255, 0.5);

  padding-bottom: 10px;

  margin-bottom: 25px;
}

.tab {

  border: 1px solid #6900ff;

  background: rgba(30, 0, 60, 0.7);

  color: #cfa8ff;

  padding: 10px 20px;

  border-radius: 10px;

  cursor: none;

  transition: 0.2s;
}

.tab:hover,
.tab.active {

  color: white;

  background: #4d00a8;

  box-shadow:
    0 0 15px #7700ff;
}


/* =========================
   RESULTS
========================= */

#results {

  width: min(900px, 95vw);

  margin: auto;

}

.result {

  padding: 20px;

  margin-bottom: 15px;

  border: 1px solid rgba(0, 150, 255, 0.35);

  border-radius: 15px;

  background: rgba(5, 0, 25, 0.75);

  box-shadow:
    0 0 10px rgba(80, 0, 255, 0.25);

  transition: 0.2s;
}

.result:hover {

  border-color: #00c8ff;

  box-shadow:
    0 0 18px rgba(0, 200, 255, 0.4);
}

.result a {

  color: #00c8ff;

  font-size: 20px;

  text-decoration: none;

  cursor: none;
}

.result a:hover {

  text-shadow:
    0 0 10px #00c8ff;
}

.result-url {

  color: #9bffb0;

  font-size: 13px;

  margin-top: 6px;

  word-break: break-all;
}

.result-description {

  color: #ccc;

  margin-top: 10px;

  line-height: 1.5;
}


/* =========================
   LOADING
========================= */

.loading {

  text-align: center;

  color: #00c8ff;

  font-size: 20px;

  padding: 50px;

}


/* =========================
   NO RESULTS / ERROR
========================= */

.message {

  text-align: center;

  padding: 50px;

  color: #aaa;

  font-size: 18px;
}

.error {

  color: #ff4d7d;

  text-shadow:
    0 0 10px #ff004c;
}


/* =========================
   WEBSITE VIEWER
========================= */

#viewerPage {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 50;

  background: #020008;
}


.viewer-top {

  height: 60px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 10px 15px;

  background: rgba(10, 0, 30, 0.95);

  border-bottom: 1px solid #7200ff;

  box-shadow:
    0 0 15px #5200ff;
}


#viewerBack,
#openExternal {

  padding: 9px 15px;

  border: 1px solid #8a00ff;

  border-radius: 10px;

  background: rgba(50, 0, 100, 0.8);

  color: white;

  cursor: none;

}

#viewerBack:hover,
#openExternal:hover {

  box-shadow:
    0 0 15px #00c8ff;

}


#viewerTitle {

  flex: 1;

  color: #00d9ff;

  font-size: 18px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


#websiteFrame {

  width: 100%;

  height: calc(100% - 60px);

  border: none;

  background: white;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .logo {

    font-size: 32px;

    letter-spacing: 7px;
  }

  .search-box {

    height: 56px;
  }

  .search-box input {

    font-size: 16px;

    padding: 0 18px;
  }

  .search-box button {

    width: 65px;
  }

  .results-top {

    flex-wrap: wrap;
  }

  .small-search {

    width: 100%;

    order: 2;
  }

}