@font-face {
  font-family: southpark;
  src: url('./sp-font.ttf');
}

:root {
    --brown: #4a3432;

    --lighter-red: #ea937d;
    --light-red: #d5595c;
    --red: #c1324c;
    --dark-red: #873247;
    --darker-red: #;

    --lighter-green: #d5eabd;
    --light-green: #a3cf89;
    --green: #60b739;
    --dark-green: #4e7c43;
    
    --yellow: #f1dca0;
    --yellow-highlight: #f3e7bd;
    
    --display-font: southpark;
    --border: 2px solid var(--brown);
    --radius: 0.6rem;
}

body {
    background-image: url(./img/bg.png);
    background-size: cover;
}

header img, #bar img { height: 1rem; aspect-ratio: 1/1; }

.flex { display: flex; gap:1rem; }

.red-bg, .green-bg {
    display: inline-block;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    color: white;
}

.red-bg { background-color: var(--red); }
.green-bg { background-color: var(--green); }

.red-txt { color: var(--red); }
.green-txt { color: var(--green); }

#container {
    margin: 1rem auto;
    max-width: 550px;
    width: 95%;
    border-radius: var(--radius);
    overflow: hidden;
    outline: 3px solid var(--brown);
    background-color: var(--yellow);
    background-image: linear-gradient(0deg, var(--yellow) 50%, var(--yellow-highlight) 50%);
    background-size: 11px 11px;
    color: var(--brown);
}

header {
    user-select: none;
    padding: 0.5rem;
    color: white;
    position: relative;
    background-image: 
        radial-gradient(color-mix(in hsl, var(--green), #0000)  24%, transparent 24%),
        radial-gradient(color-mix(in hsl, var(--green), #0000) 24%, transparent 24%);
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    background-color: var(--dark-green) ;
}

header > div {
    position: absolute;
    top: 50%;
    right:1rem;
    transform: translateY(-50%);
}

header > div > span {
    display: inline;
    background-color: var(--yellow-highlight);
    box-shadow: 0.2rem 0.2rem var(--brown);
    padding: 0.5rem;
    margin-left: 0.2rem;
    border-radius: var(--radius);
}

#bar {
    user-select: none;
    display: flex;
    border-top: var(--border);
    border-bottom: var(--border);
}

#reload {
    font-weight: bolder;
    padding: 0.5rem;
    background-color: var(--light-green);
    background-image: linear-gradient(to right, var(--lighter-green), var(--lighter-green) 8px, var(--light-green) 8px, var(--light-green) );
    background-size: 16px 100%;
}

#reload span {
    display: inline-block;
    padding: 0.3rem;
}

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

#search > div {
    background-color:white;
    border-radius: var(--radius);
    padding: 0.3rem;
}

#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;
}

#tabs a {
    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: color-mix(in hsl, var(--dark-red) 20%, #0000);
}

article {
    z-index: 2;
    padding: 1rem;
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
}

#about > div:nth-of-type(2) {
    border: var(--border);
    max-width: 200px;
    aspect-ratio: 1/1;
}

#about img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section {
    background-color: var(--green);
    padding: 1rem;
    color: white;
}

footer {
    user-select: none;
    background-color: var(--red);
    padding: 1rem;
}

@media only screen and (max-width: 550px) {
    .flex { flex-wrap: wrap;}
    #tabs { display: none; }
}