/* ==== FONTS ==== */
@font-face {
font-family: "JMH";
src: url("JMH-Typewriter.otf");
}

@font-face {
font-family: "Joystix";
src: url("joystix-monospace.otf");
}

/* ==== PAGE BACKGROUND ==== */
body{
margin:0;
padding:0;
background:url("https://xixxii.neocities.org/images/bgs/geocities125.gif");
font-family:"Joystix";
color:#EEEEEE;
}

/* random spray */
#spray{
position:absolute;
right:10%;
top:30%;
opacity:1.0;

}

/* ==== MAIN CONTAINER ==== */
#container{
width:936px;
height:1200px;
margin:auto;
margin-top:20px;
background:url("https://xixxii.neocities.org/images/bgs/geocities147.gif");
position:relative;
border:3px solid #A91D3A;
}

/* ==== BACK BUTTON ==== */
#backbutton{
position:absolute;
top:330px;
right:-90px;
width:50%;
height:50%;
}

/* ==== MAD GENIUS BOX ==== */
#madgenius{
position:absolute;
top:60px;
left:20px;
width:300px;
height:380px;
background:#151515;
border:3px solid #C73659;
text-align:center;
}

#madgenius img{
width:280px;
margin-top:10px;
}

/* ==== ME BOX ==== */
#mebox{
position:absolute;
top:60px;
right:20px;
width:520px;
height:240px;
overflow-y:scroll;
background:#151515;
border:3px solid #C73659;
padding:10px;
}

#mebox h2{
font-family:"JMH";
margin-top:0;
color:#C73659;
}

/* ==== INTEREST BOX ==== */
#interests{
position:absolute;
top:460px;
left:20px;
width:250px;
height:400px;
overflow-y:scroll;
background:#151515;
border:3px solid #C73659;
padding:10px;
}

#interests h2{
font-family:"JMH";
color:#C73659;
}

/* ==== MUSIC BOX ==== */
#musicbox{
position:absolute;
bottom:150px;
right:40px;
width:300px;
height:300px;
background:#151515;
border:3px solid #C73659;
text-align:center;
padding:10px;
}

#musicbox img{
width:200px;
}

/* ==== MARQUEE ==== */
#bottommarquee{
position:absolute;
bottom:10px;
width:100%;
}