@font-face {
    font-family: 'undertown';
    src: url('https://file.garden/Z0b1C8mFE09pLRof/UNDERTOWN%20PERSONAL%20USE.ttf');
}

::selection {
    background: #ff008c67;
    text-shadow: 0px 0px 2px black;
    color: black;
}
/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    border-radius: 1px;
    background: rgba(0, 0, 0, 0);
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--text); 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--red); 
}
/* get rid of small white box */
::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}
a {
    color: #ff8fff;
    text-decoration: none;
    filter: drop-shadow(1px 1px 0 black) 
  drop-shadow(-1px 0px 0 black) 
  drop-shadow(0 0px 0 black) 
  drop-shadow(0 0px 0 black);
  transition: 0.3s;
}
a:hover {
    color: white;
    text-shadow: 0px 0px 3px red;
    text-decoration: none;
    transition: 0.3s;
}

html{
    background: url(https://lycanwlf.neocities.org/images/backgrounds/mallbg.png);
    background-size: cover;
img{pointer-events: none;}
}
body{
    position: relative;
    padding-top: 100px;
    color: white;
    text-shadow: 0px 0px 6px #ff00dd;
    font-size: 20px;
    max-height: 100%;
    max-width: 100%;
}

.parent {
    position:relative;
    margin: auto;
    width:950px;
    height:700px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.div1,.div3{
    background-color:#000000d0;
    box-shadow: 1px 1px 10px 7px #000000d0;
    border-radius:10px;
    padding: 10px;
}
.div1 { grid-area: 1 / 1 / 4 / 3; }
.div2 { grid-area: 4 / 1 / 6 / 3; }
.div3 { grid-area: 1 / 3 / 6 / 6; overflow-y:scroll;}

#sonico{
    width:55%; 
    position:relative; left:-120px; 
    filter: drop-shadow(1px 1px 0 black) 
  drop-shadow(-1px 1px 0 black) 
  drop-shadow(0 2px 0 black) 
  drop-shadow(0 -1px 0 black) 
  drop-shadow(0 1px 1.5px black) 
  drop-shadow(0 -1px 1.5px black) 
  drop-shadow(1px -1px 1.5px black) 
  drop-shadow(-1px -1px 1.5px black);

}
#pfp{
    width:45%;
    float:left;
    position: relative;
    top:-100px;
}
#wah{
    position:relative;
    top: -100px;
    left:10px;
    width:100%;
    line-height: 30px;
}
#text {
            font-family: 'undertown';
        padding: none;
        position: relative;
        top:-80px;
        text-align: center;
        font-size: 50px;
        font-style: italic;
 -webkit-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
}
#iddiv{
    width:100%;
    position: relative;
    top:-120px;
}
#biflag{position: absolute; top:175px; left:5px; width:50px; rotate: 15deg; pointer-events:all;}
#intersexflag{position: absolute; top:45px; left:120px; width:50px; rotate: -15deg; pointer-events:all;}
#stamps{
    text-align: center;
    position: relative;
    top:-110px;
    line-height: 50px;
}
#menu{
    position: relative;
    top: -270px;
    left:20px;

    text-align: center;
}
#gloom{
    width:210px;
    position:absolute;
    top: 300px;
    right:40px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#pinkstar{
    height:100px;
    rotate: -15deg;
    position: absolute;
    top:-20px;
    left:-30px;
}
#likes,#dis{
    background-color:#0000008f;
    box-shadow: 1px 1px 10px 7px #0000008f;
    padding:2px;
    height: 270px;
    width:250px;
    position:absolute;
    h2{position: absolute; top:-10px; left:60px;}
    li{padding-top: 20px;}
}
#dis{right:20px}
#Backstory{
    padding-bottom: 100px;
    line-height: 24px;
    font-size: 18px;
    h2{margin-bottom:-10px;}
}
#Trivia{
    li{padding-top: 10px;}
}
#Relationships{
    padding-bottom: 100px;
    h2{margin: 0; font-size: 25px; position:relative; top:-10px; color:#ff8fff}
}

button{
    background: url(https://lycanwlf.neocities.org/images/CD.png) no-repeat;
    background-size: contain;
    border: none;
    height:110px;
    width:110px;
    font-family: 'undertown';
    color: black;
    text-shadow: 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white;
    filter: drop-shadow(0px 3px black) drop-shadow(0 -3px black) drop-shadow(3px 0 black) drop-shadow(-3px 0 black);
}
button:hover{
    -webkit-animation:spin 5s linear infinite;
-moz-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;
font-weight:bolder;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}

#back{
    position:absolute;
    bottom: -30px;
    left: -140px;
    font-size: 40px;
    -webkit-animation: pop 1s ease-in-out infinite alternate;
    animation: pop 1s ease-in-out infinite alternate;
    -moz-animation: pop 1s ease-in-out infinite alternate;
}
#star{
    position: absolute;
    width:300px;
    bottom:-70px;
    right:-130px;
}
@keyframes pop {
from {
transform:scale(0.95)
}
50% {
transform:scale(1)
}
to {
transform:scale(0.95)
}
}
@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)
}
50% {
-webkit-transform:scale(1)
}
to {
-webkit-transform:scale(0.95)
}}