/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manufacturing+Consent&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceberg&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@500&display=swap');

:root {
    --display-font: "New Rocker";
    --body-font: "Iceberg", Arial;

    --darkest: #31193b;
    --color-1: #db9d47;
    --color-2: #352480;
    --color-3: #892828;
    --lightest: #f1dca0;
    
    --border: 2px solid var(--darkest);
    --radius: 0.3rem;
}

body{
    padding:0;margin:0;
    font-family:var(--body-font);
    background-image: url(./bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-color:  #d4c8db;
}

h1,h2,h3,h4,h5,h6{
    margin:0;
    font-family:var(--display-font);
}

a {color: inherit;}

.color-1-bg { background-color: var(--color-1); color: white;}
.color-2-bg { background-color: var(--color-2); color: white;}
h2.color-1-bg, h2.color-2-bg {
    display: inline-block;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    color: white;
}

.color-1-txt { color: var(--color-1); }
.color-2-txt { color: var(--color-2); }

#container {
    margin: 1rem auto;
    max-width: 1000px;
    font-size: clamp(20px, 0.75rem + 0.8vw, 24px);
    width: 95%;
    border-radius: var(--radius);
    overflow: hidden;
    outline: 3px solid var(--darkest);
    background-color: var(--lightest);
    background-image: linear-gradient(0deg, var(--lightest) 50%, color-mix(in srgb, var(--lightest) 80%, white) 50%);
    background-size: 11px 11px;
    color: var(--darkest);
}

header, footer {
    user-select: none;
    padding: 0.5rem;
    position: relative;
    --bg-color: var(--darkest);
    background-color: color-mix(in srgb, var(--darkest) 90%, white);
    background-image: linear-gradient(135deg, var(--bg-color) 25%, transparent 25%, transparent 50%, var(--bg-color) 50%, var(--bg-color) 75%, transparent 75%, transparent 100%);
    background-size: 28.28px 28.28px;
    color: white;
}

#bar {
    user-select: none;
    display: flex;
    width: 100%;
    border-top: var(--border);
    border-bottom: var(--border);
}
#bar a {text-decoration: none;}

#reload {
    --bg-color: color-mix(in srgb, var(--color-2) 70%, white);
    background-color: color-mix(in srgb, var(--color-2) 50%, white);
    background-image: linear-gradient(to right, var(--bg-color), var(--bg-color) 8px, transparent 8px, transparent);
    background-size: 16px 100%;
    font-weight: bolder;
    display: flex; align-items: center;
    gap: 0.5rem; padding: 0 1rem;
}

#search {
    flex: 1;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--darkest);
    background-color: var(--color-1);
    box-sizing: border-box;
}

#search > div {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: var(--radius);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
}

#tabs {
    user-select: none;
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.5rem 0 0.5rem;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    max-width: 100%;
}

#tabs a {
    text-decoration: none;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-right: 0.5rem;
    padding: 0.5rem;
    min-width: 90px;
    width: 15%;
    height: 1.5rem;
    position: relative;
    font-family: var(--display-font);
    transform: translateY(0.5rem);
    transition: 0.2s;
}

#tabs a:hover { transform: none; }
#tabs a::after {
    content: "X";
    position: absolute;
    right: 0.5rem;
    color: var(--color-1);
    opacity: 0.3;
}

article {
    z-index: 2;
    padding: 1rem;
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
}
.outline, .outline-hover:hover {
    --c: white;
    --w: 2px;
    filter:
    drop-shadow(var(--w)0 0 var(--c))
    drop-shadow(calc(var(--w) * -1) 0 0 var(--c))
    drop-shadow(0 var(--w)0 var(--c))
    drop-shadow(0 calc(var(--w) * -1) 0 var(--c));
}

.marquee {
  position: relative;
  max-width: 100%;
  height: 2.5rem;
  overflow-x: hidden;
  background-color: #31193b;
  color: white;
  border-bottom: 1px solid white;
}

.marquee span::after {
  content: "|";
  padding: 0 1.5rem;
}

.track {
    position: absolute;
    top:50%;
    white-space: nowrap;
    animation: marquee 30s linear infinite; /* Change the number before s linear to change the speed of sc */
}

@keyframes marquee {
  0% { transform: translateX(0%) translateY(-50%); }
  100% { transform: translateX(-50%) translateY(-50%); }
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}