:root {
--bgbody:black;
--bgbox:rgba( 255, 255, 255, 0.05 );
--fg:white;
--borderwidth:2px;
--teal:#299999;
}

body {
color:var(--fg);
text-shadow: 2px 2px 5px white;
font-family:"rainyhearts";

display: flex;
justify-content: center;

background-image:url("../assets/pics/a4.jpg");

scrollbar-color: var(--teal) rgba( 255, 255, 255, 0 );
scrollbar-width: thin;
}

@font-face {
	font-family: "rainyhearts";
	src: url(../assets/fonts/rainyhearts.woff2);
}

h3 {
text-shadow: 2px 2px 5px var(--teal);
font-size:20px;
}

p {
}

a {
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px 5px hotpink;
}

a:hover {
  text-decoration: underline;
  color:white;
  text-shadow: 2px 2px 5px var(--teal);
}

.amogus a {
  color: hotpink;
  text-decoration: none;
  text-shadow: 2px 2px 5px hotpink;
}

.amogus a:hover {
  text-decoration: underline;
  color:var(--teal);
  text-shadow: 2px 2px 5px var(--teal);
}


::selection {
  color: white;
  background: var(--teal);
}

#box {
min-width: 40%;
max-width: 50%;

position: absolute;
top: 50%;
transform: translateY(-50%);

background:var(--bgbox);
box-shadow: 0 8px 32px 0 rgba( 255, 255, 255, 0.37 );
backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
border: 1px solid rgba( 255, 255, 255, 0.18 );

padding-left: 10px;
padding-right: 10px;
}