/*VARIABLES*/

:root {
    /*TEXT*/
    --text: #ffe3d3;
    --link: rgb(138, 11, 105);
    --linkhover: rgba(250,31,193,1);

    /*BACKGROUNDS*/
    --welcomebg: #43256e;
}
/*FONTS*/
@font-face {
    font-family: Alagard;
    src: url("https://shadow-of-valtus.neocities.org/fonts/alagard.ttf");
}

@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/dosis/v34/HhyJU5sn9vOmLxNkIwRSjTVNWLEJN7Ml2xME.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

.headerwrapper{
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}

.header{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-image: url('https://shadow-of-valtus.neocities.org/images/valtus_assets/D20Banner.gif');
background-repeat: no-repeat;
background-position: center center;
}

.title{
color: #fff;
letter-spacing: 0.2rem;
text-shadow: 0 0 10px #111;
font-family: 'Alagard', serif;
}

.nav{
background-color: #111;
margin:auto auto;
width:474px;    
text-align: center;
padding: 0.5rem 0 0.5rem 0;
}

.nav a{
    color:white;
}

.nav a:hover{
    color:var(--linkhover);
}
 
.nav ul{
display: flex;
justify-content: space-around;
}
 
.nav li{
display: inline;
}
 
.mainwrapper{
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 1rem 1rem 1rem;
margin: 0 auto;
max-width: 700px;
}
 
.box{
background-color: #43256E;
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABqUlEQVR4Xu3d0Y6DIBhEYXn/h7ZJ74SEyR9PxerZW+2sfAwsvXHbln72fU+3vOp6a2023unF7wcFPfoJCq8fQVeD9ks8zAj8uPePCz7jHirofFIFhUsv6NWg1SVePUat3oPT+ODrbThnJgBBj393Og9BbWhxT4TBtn4Fn25ocTyPv11QeIoFFRQWgONiQ+Hf97a48dj0NgF4vIIKCgvAcbmh6aso/EC3jwtfvQWtzqCgVbFwv6CrQd0zazMQD/aCCloTgO+2oYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBv6a9A+P704Cn6ev4sLPr4/tDqjglbFwv2CCgoLwHE2VFBYAI6zoatB07m0v/60V2qEt94ML2TtPM7/LxBBD6SCwitS0MtB056e9pz0+btdP7mF5YamAQta3EMFTQKCToVOLvkPq58Dv7F/+c0AAAAASUVORK5CYII=")
        28 / 28px / 0 round;
    border-width: 28px;
    border-style: solid;
    border-radius: 23px;
}
 
.subheaders{
background-image:url("https://shadow-of-valtus.neocities.org/images/backgrounds/Snaappy_Tumblr_ENOKFTS.png");
background-position:center center;
color: #fff;
border-radius:10px;    
font-weight: normal;
padding-top:4px;
}
 
.content{
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}

#credit a{
text-decoration: none;
background: linear-gradient(90deg, rgba(250,31,193,1) 0%, rgba(29,85,255,1) 25%, rgba(13,246,252,1) 53%, rgba(0,255,102,1) 77%, rgba(251,255,56,1) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-text-fill-color: transparent;
}
 
#credit a:visited{
text-decoration: none;
background: linear-gradient(90deg, rgba(250,31,193,1) 0%, rgba(29,85,255,1) 25%, rgba(13,246,252,1) 53%, rgba(0,255,102,1) 77%, rgba(251,255,56,1) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-text-fill-color: transparent;
}

#credit{
position: fixed;
bottom: 0;
right: 0;
font-size: 12px;
}
 


.center{
    text-align:center;
}

.center img{
    margin:auto;
}


body {
    background: url("https://shadow-of-valtus.neocities.org/images/backgrounds/Snaappy_Tumblr_ENOKFTS.png");
    margin: 0;
    padding: 0;
    color: #FFE3D3;
    font-family: "Dosis";
    letter-spacing: 2px;
    text-align: left;
    cursor: url(https://shadow-of-valtus.neocities.org/images/cursors/HALLOWEEN1.cur), auto;
}

/*HEADERS*/

h1,
h2,
h3 {
    text-align: center;
    font-family: "Alagard";
    letter-spacing: 2px;
    text-decoration: underline;
}

h1 {
    line-height: 40px;
}

h4 {
    text-align: left;
    font-family: "Alagard";
    line-height: 10px;
}

/*TEXT*/
li {
    list-style: " ★";
}

/*LINKS*/

a {
    color:#00FFFF;
    cursor: url(https://shadow-of-valtus.neocities.org/images/cursors/Hearts_Precision%20Select.cur), auto;
}

a:hover {
    color: var(--linkhover);
}

/*NAME GEN*/
#random-name {
  margin: 0 auto;
  font-size: 48px;
  font-family: 'Alagard';
  padding-top:20px;
  opacity: 0;
}

#random-name.show-name {
  opacity: 100;
  -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
}