/* ~ ======================================================
~ Imports
~ ====================================================== */

@import url("./assets/css/global.css");

/* ~ ======================================================
~ Custom Styling
~ ====================================================== */

/* < ========================
< Main Element Styling
< ======================== */

#main {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  background: rgb(40, 40, 40);
}

/* < ========================
< Container Styling
< ======================== */

#container {
  width: 300px;
  margin: auto;
  border-radius: 16px;
  backdrop-filter: blur(20px);
  overflow: hidden;
  background: var(--background);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--foreground-lighter);
}

/* < ========================
< Header Styling
< ======================== */

.header {
  margin: 0px;
  padding: 18px 24px;
  background-color: var(--background);
  border-bottom: 1px solid var(--foreground-darker);
}

h1 {
  margin: 0px;
  font-size: 28px;
  font-weight: 700;
}

/* < ========================
< Link List Styling
< ======================== */

.link-list {
  max-height: 300px;
  overflow: auto;
  margin: 0px;
  padding: 0px;
}

.link-list a {
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  color: var(--foreground-lighter);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--foreground-darker);
}

.link-list a:hover {
  background: rgba(30, 30, 30, 0.5);
  border-left: 3px solid var(--accent);
}

/* < ========================
< Footer Styling
< ======================== */

.footer {
  margin: 0px;
  padding: 8px 24px;
  user-select: none;
  pointer-events: none;
}