@font-face { font-family: MrDarcy; src: url('/fonts/MrDarcy-Reg.otf'); }
@font-face { font-family: Metallophile; src: url('/fonts/Metallophile%20Sp8%20Light.ttf'); }

:root {
  --cur-main: url('/assets/KeyMain.png'), auto;
  --cur-point: url('/assets/KeySelect.png'), auto;
  --red:#ff0a4f;
  --scarlet:#bb092b;
  --yellow:#ffffc0;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background:linear-gradient(to bottom, #270b3d, black);
  color:white;
  width:100vw;
  height:100vh;
  font-family:Verdana, sans-serif;
  font-size:12px;
  overflow-y:auto;
  overflow-x:hidden;
}

a {
  cursor:var(--cur-point);
  color:var(--red);
}





#header {
  position:sticky;
  width:1400px;
  height:146px;
  margin:0 auto;
  background-image:url('/imgs/hvbanner.png');
  background-repeat:no-repeat;
  text-align:center;
  z-index:99999;
}

#nav {
  display:flex;
  flex-direction:row;
  gap:20px;
  justify-content:center;
  margin:20px 0;
}

.button {
  cursor:var(--cur-point);
  text-align:center;
  margin-left:20px;
  background-color:var(--red);
  width:160px;
  height:35px;
  padding-top:10px;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
.button:hover {
  background-color:var(--yellow);
  box-shadow:0 0 15px var(--yellow);
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
#nav a {
  color:white;
  font-family:'MrDarcy', sans-serif;
  font-size:23px;
  font-weight:bold;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}
#nav a:hover {
  color:var(--red);
  transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
}





#page {
  position:absolute;
  display:flex;
  justify-content:center;
  width:100vw;
  height:100vh;
  overflow-y:auto;
  font-family:'Metallophile', sans-serif;
  font-size:18px;
}

#main {
  position:absolute;
  text-align:center;
  width:1440px;
  height:auto;
  min-height:100%;
  background-image:url('/imgs/hvwallpaper.png');
}

#container {
  margin:146px auto 0 auto;
  width:1400px;
  background-color:black;
  min-height:calc(100vh - 146px);
  overflow:hidden;
}

#content {
  margin:20px;
}





#faves {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap:50px;
  margin:0 40px 40px 40px;
}

#box {
  width:250px;
  border:2px solid var(--red);
  background-image:url('/imgs/hvwallpaper.png');
  box-shadow:0 0 40px rgba(255, 10, 79, 0.7);
}
#box .inner {
  margin:5px;
  border:2px solid var(--red);
  background:linear-gradient(0deg, var(--scarlet), var(--red), var(--scarlet));
  text-align:center;
}
.inner img {
  max-width:90%;
  margin-top:12px;
  border:1px solid white;
}
.name {
  font-family:'MrDarcy', serif;
  font-weight:bold;
}
#box hr {
  border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:1px solid white;
  margin:10px;
}
#box p {
  margin-bottom:10px;
}





h1 {
  font-family:'MrDarcy', serif;
  font-weight:bold;
  font-size:60px;
  text-align:center;
  text-transform:lowercase;
  color:transparent;
  margin-bottom:15px;
  background:linear-gradient(to bottom, var(--red) 35%, var(--yellow) 70%);
  background-clip:text;
  filter:drop-shadow(0 0 12px var(--red));
}

p {
  margin-bottom:20px;
}