:root{
    --lace: var(--lacepink);
    --lacepink: url("../images/pinkerlace.png");
    --filllacepink: url("../images/pinkestlace.png");
    --green: #80ebcb;
    --grey: rgb(110, 110, 110);
    --pink: #ff93a1;
}

 /****** fonts ******/
@font-face {
    font-family: scratch boys;
    src: url(../fonts/1sb02z.ttf);
}

@font-face {
    font-family: cerl;
    src: url(../fonts/CHERL___.TTF);
}

@font-face {
    font-family: Adorable Doll;
    src: url(../fonts/AdorableDoll.ttf);
}

@font-face{
    font-family: vintage;
    src: url(../fonts/nwq0cf.ttf);
}

/****** scrollbar ******/
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffc4cc83;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--pink);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--grey);
}

/****** select hightlight ******/
::selection {
    background: var(--green);
    color:white;
}

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

/****** body ******/

body{
    background-color:#ffffff;
    background-image:url('../images/skulls4pink.png');
    background-repeat: repeat;
    background-position: 0 0;
    background-attachment: fixed;
    color:var(--pink);
    font-family: ms gothic; 
    font-size:15px; 
    padding:10px;
    cursor: url('../images/litwick.gif'), auto;
}

/****** links ******/
a{
    font-size:20px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition:0.3s;
    text-shadow: -1px 0 #ff93a1, 0 1px #ff93a1, 1px 0 #ff93a1, 0 -1px #ff93a1;
    border: 1px dashed var(--pink);
}

a:hover{
    cursor:help;
    transition:0.3s;
    color:var(--grey);
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#wrapper{
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;

    width: 1000px;
    height: 1000px;

    animation: fadeEffect 1s;

}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

#content{
    height: 100%;
}

#header{
    height: 400px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 
}

#header img{
    width:100%;
    height:100%;
}

#mainwrapper{
    columns: 3;
    height: 480px;
    display: flex;
    gap: 5px;
    padding: 5px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 

}

#main{
    padding: 10px;
    width: 50%;
    overflow: auto;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 
}

#main2{
    padding: 10px;
    width: 75%;
    overflow: auto;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 
}

#leftsidebar{
    
    width: 25%;
}

#rightsidebar{
    width: 25%;
}

#footer{
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 
    height: 50px;

    display: flex;
    align-items:center;
    justify-content: center;
}


#iconbox{
    height: 200px;
    background-image: url('../images/hemwickbite1darkbg.png');
    background-repeat: no-repeat;
    background-size: 180%;
    background-position: 50% 10%;
    border-width:10px;
    border-style:solid;
    border-image: var(--filllacepink) 8  round;
    background-clip: padding-box;
    padding:5px;
}


#iconbox:hover{

    background-image: url('../images/hemwickbite1darkbg.png');

}

#iconbox img{
    width:100%;
    display:block;
    height:auto;
}

header{
    text-align: center;
    font-family:Adorable Doll;
    font-size:40px;
    margin-bottom:10px;
}

.box{
    padding: 5px;
    height: 200px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round;
    margin-top: 5px;
    overflow: auto;
}

.updatesbox{
    padding: 5px;
    height: 215px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round;
    margin-top: 5px;
    overflow: auto;
}

.artbox{
    padding: 5px;
    border: 1px dashed var(--pink);
    margin-top: 5px;
    overflow: auto;
}

.boxfilled{
    padding: 5px;
    height: 165px;
    border-width:10px;
    border-style:solid;
    border-image: var(--filllacepink) 8 fill round;
    color: var(--grey);

    margin-top: 5px;
}


.pokebox{
    padding: 10px;
    margin-bottom: 20px;
    height: 250px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round;
}

.dashedbox{
    margin-top:20px;
    padding:20px;
    border: 1px dashed var(--pink);
    text-align: center;
}

.dashedbox a{
    font-size: 15px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition:0.3s;
    text-shadow: -1px 0 #ff93a1, 0 1px #ff93a1, 1px 0 #ff93a1, 0 -1px #ff93a1;
    border: 1px dashed var(--pink);
    padding: 10px;
}

.dashedbox a:hover{
    cursor:help;
    transition:0.3s;
    color:var(--grey);
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

.mainbox{
    padding:10px;
    overflow:auto;
    border: 1px dashed var(--pink);
    text-align: center;
}

.mainbox a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition:0.3s;
    text-shadow: -1px 0 #ff93a1, 0 1px #ff93a1, 1px 0 #ff93a1, 0 -1px #ff93a1;
    border: 1px dashed var(--pink);
    padding: 10px;
}

.mainbox a:hover{
    cursor:help;
    transition:0.3s;
    color:var(--grey);
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#favartbox{
    text-align: center;
    overflow:auto;
}

#favartbox a{
    font-size: 15px;
}

#musicbox{
    padding:10px;
    overflow:auto;
    border: 1px dashed var(--pink);

    text-align: center;
}

#musicbox a{
    font-size: 10px;
}

.titlebox{
    padding: 5px;
    border: 5px solid rgb(46, 211, 60);
    text-align: center;
    border-width:10px;
    border-style:solid;
    border-image: var(--filllacepink) 8 fill round;
    color: var(--grey);
}

.title {
    color: white;
    font-family:Adorable Doll;
    text-shadow: -1px 0 #ff93a1, 0 1px #ff93a1, 1px 0 #ff93a1, 0 -1px #ff93a1;
    font-size:30px;
}

.navbox{
    height: 250px;
    padding: 5px;
    border-width:10px;
    border-style:solid;
    border-image: var(--lace) 8 fill round; 
    text-align: center;
    display:flex;
    flex-direction: column;
    gap: 3px;
    justify-content: space-between;

}

.floatingimg{
    position:relative;
    bottom:800;
    right:0;
}

.highlight{
    background-color: var(--green);
    color:var(--grey);
}

.invisibox img{
    position:relative;
    right: -50px;
    bottom:-35;
    margin-left: auto;
}

.divider{
    background-image: url('../images/bowdivider.gif');
    background-position: center;
    background-repeat: no-repeat;
    width: 299px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

#sidebarfloatingimage {
    background-image: url('../images/floatinghemwickgif.gif');
    width: 290px;
    height: 199px;
}