:root {
    --bg: rgba(248,249,250,1);
    --bg2: rgba(0,0,0,.15);
    --text1: rgba(0,0,0,1);
    --text2: rgba(0,0,0,.8);
    --text3: rgba(0,0,0,.6);

    --shdw1: 0 0 10px 1px rgba(0,0,0,0);
    --accent: rgba(66,135,245,1);
    --warn: rgba(255,200,0,1);
    --alert: rgba(255,50,50,1);
    --button: rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {

  :root {
    --bg: rgba(32,33,36,1);
    --bg2: rgba(255,255,255,.2);
    --text1: rgba(255,255,255,1);
    --text2: rgba(255,255,255,.8);
    --text3: rgba(255,255,255,.6);

    --shdw1: 0 0 10px 1px rgba(0,0,0,.3);
    --button: rgba(50,50,50,1);
  }
}


* {
transition: 100ms all ease;
}

body::-webkit-scrollbar {
  display: none;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

#popup, #popupinfo {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg);
  color: var(--text1);
  font-weight: 600;
  padding: 4rem;
  width: 50vh;
  max-width: 70vw;
  border-radius: 10px;
  box-shadow: var(--shdw1);
  z-index: 11;
  text-align: center;
}

space {
margin: 0 1rem;
}

.error {
color: red;
}

.button {
padding: 5px;
color: white;
background-color: var(--accent);
border-radius: 4px;
font-weight: 700;
}

.button:hover {
background-color: var(--warn);
}

body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text1);
background: var(--bg);
margin: 5vh 0 0;
}

main {
margin: 70px 30px;
}

#background {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
z-index: 0;
filter: blur(4px);
overflow: hidden;
}

#header {
position: fixed;
z-index: 10;
top: 0;
width: 100%;
height: 50px;
background-color: var(--accent);
line-height: 50px;
}

#header .title {
z-index: 1;
position: absolute;
top: 0;
bottom 0;
left: 70px;
position: absolute;
color: white;
font-size: 24pt;
font-weight: 900;
animation: slide .5s ease-out;
}

#header b {
display: none;
color: rgba(255,255,240,.7);
}

#header .home {
z-index: 2;
position: absolute;
height: 50px;
margin: 2px 15px;
animation: slide .5s ease-out;
}

#header img {
height: 45px;
filter: brightness(1.5) saturate(.7);
}

#header .home:hover {
transform: scale(1.1);
}

#header .home:hover ~ .title {
transform: translate(5px,0);
}

#header .nav {
position: absolute;
display: flex;
right: 10px;
gap: 1rem;
align-items: center;
height: 70px;
max-width: 40vw;
}

#header .nav img {
flex: 1;
filter: invert(2);
}

#header .nav img#n1 {
transform: scale(.7);
}

#header .nav img:hover {
transform: scale(1.1);
}

#footer {
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
padding: 1rem 0;
text-align: center;
transform: translate(-50%,0);
color: var(--text1);
font-size: .7rem;
font-weight: 600;
}

#footer a {
text-decoration: underline;
font-size: 1rem;
font-weight: 100;
color: var(--text1);
}

@keyframes slide {
from {
transform: translate(-50%,0);
opacity: 0;
filter: blur(10px);
}
to {
transform: translate(0,0);
opacity: 1;
filter: none;
}
}

.card {
animation: slide 1s ease;
position: absolute;
top: 0;
bottom: 0;
text-align: center;
z-index: 1;
background: var(--bg);
padding: 30vh 5vw 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
max-width: 400px;
}

h1 {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1rem;
}

p {
font-size: 1.1rem;
}

a {
color: black;
transition: .2s ease;
text-decoration: none;
}

a:hover {
color: grey;
}

.sidebar {
display: grid;
position: relative;
float: right;
}

.contentbox {
width: 20vw;
padding: 20px;
margin: 0 20px 15px;
background-color: var(--bg2);
border-radius: 5px;
}

.contentbox a {
text-decoration: underline;
color: var(--text2);
}


.personal {
margin: 100px 0;
}

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 1rem;
}

.menu a {
  font-size: 1rem;
  display: block;
  text-align: center;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all .1s ease-in-out;
  background-color: var(--bg2);
  color: var(--text1);
  height: 50px;
  line-height: 50px;
}

.menu a {
filter: brightness(2);
}

.menu a:hover {
filter: brightness(.8);
}

.import input, .import button {
display: block;
box-sizing: border-box;
width: 20vw;
height: 40px;
padding: 0 20px;
border: none;
border-radius: 5px;
margin: 10px 0;
line-height: 40px;
cursor: pointer;
background-color: var(--bg2);
color: var(--text1);
font-weight: 700;
}

.import button {
background-color: var(--button);
color: white;
}

.import input:hover, .import button:hover {
filter: brightness(.8);
}

        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            justify-content: center;
        }
        .filters input[type="text"] {
            padding: 8px;
            font-size: 1rem;
            border-radius: 6px;
            border: none;
            width: 80vw;
            max-width: 500px;
            background-color: var(--bg2);
            color: var(--text1);
	    height: 30px;
        }

@media only screen and (max-width: 700px) {

main {
margin: 70px 10px;
}

.sidebar {
display: none;
}

.contentbox {
display: none;
}

.import input, .import button {
width: 80vw;
}

#popup, #popupinfo {
width: 90vw;
padding: 5vh 0;
}

#header b {
display: none !important;
}