* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "daisywheel";
    src: url("https://willdotjpg.gay/fonts/daisywhl.otf");
}

@font-face {
    font-family: "grape";
    src: url("assets/GrapeSoda.ttf");
}

@font-face {
    font-family:"ari";
    src: url("assets/ari-w9500-bold.ttf");

}

@font-face {
    font-family: "nokia";
    src: url("assets/nokiafc22.ttf");
}


body {
    background-image:url("assets/back_phone.gif")
}

ul {
    list-style-type: none;
}

p {
    margin-bottom: 10px;
    text-align: left;
}

a {
    color: #87588a;
    text-decoration-style: dotted;
}

a:hover {
    color: #ffffff;
}

a:visited {
    color: #a97844;
}

a:visited:hover {
  color: #ffffff;
}

.header {
    width: 1200px;
    height: 200px;
    background-image: url("assets/banner.png");
    position: absolute;
    margin-top: -205px;
    margin-left: -1px;
}

.main {
    width: 1200px;
    height: auto;
    border: 5px solid #27002a;
    border-image: url("assets/line.png") 15 / 5px repeat;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    background-color: #ffdc6e;
}

.sidebar {
    width: 200px;
    height: 650px;
    border: 2px solid #27002a;
    border-bottom: none;
    box-sizing: border-box;
    text-align: center;
    font-family: "nokia";
    font-size: 16px;
    line-height: 2.6;
    background-color: #27002a;


}

.sidebar2 {
    width: 200px;
    height: 320px;
    border: 2px solid #27002a;
    border-top: none;
    box-sizing: border-box;
    background-color: #27002a;
    padding: 10px;
}

.sideheader {
    width: 196px;
    height: 50px;
    background-image: url("assets/sideheader.png");
    align-content: center;
    text-align: center;
    color: #fff;
    font-family: "nokia";
    font-size: 24px;
}

.apple {
    width: 405px;
    height: 385px;
    background-image: url("assets/apple.png");
    float: right;
    z-index: 1;
}

.box1 {
    width: 970px;
    height: 400px;
    border: none;
    box-sizing: border-box;
    float: right;
    padding: 10px;
    color: #1d1a59;
    line-height: 1;
    font-family: "grape";
    font-size:30px;
}

.box1content {
    width: 900px;
    height: 330px;
    background-color: #919b45;
    border-radius: 5px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 30px;
    box-sizing: border-box;

}

.boxright {
    width: 485px;
    height: 570px;
    border: 2px dashed #919b45;
    border-top: 2px dashed #919b45;
    border-right: none;
    float: right;
    box-sizing: border-box;
    line-height: 1.8;
    color: #1d1a59;
}

.boxleft {
    width: 485px;
    height: 570px;
    border: 2px dashed #919b45;
    border-top: 2px dashed #919b45;
    border-left: none;
    position: absolute;
    margin-left: 200px;
    box-sizing: border-box;
    margin-top: 400px;
    padding: 10px;
    line-height: 1.8;
    color: #1d1a59;

}

.boxleftcontent {
    width: 440px;
    height: 535px;
    border-radius: 5px;
    margin-left: 12px;
    margin-top: 7px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    background-color: #919b45;
    font-family:"daisywheel";
    font-size:20px;
}

.boxrightcontent {
    width: 440px;
    height: 535px;
    border-radius: 5px;
    background-color: #919b45;
    margin-left: 20px;
    margin-top: 15px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    font-family:"daisywheel";
    font-size:20px;
}

.boxmain {
    width: 970px;
    height: auto;
    box-sizing: border-box;
    float: right;
    padding: 10px;
    color: #27002a;
    line-height: 1.8;
    font-family: "nokia";
}

.boxmaincontent {
    width: 900px;
    height: auto;
    background-color: #87588a;
    border-radius: 5px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 30px;
    box-sizing: border-box;
   
}

.listright {
    width: 485px;
    height: 680px;
    margin-left: 200px;
    box-sizing: border-box;
    margin-top: 1px;
    padding: 10px;
    line-height: 1.8;
    font-family:"nokia";
    float: right;
}

.listrightcontent {
    width: 435px;
    height: 620px;
    border-radius: 5px;
    margin-left: 1px;
    margin-top: 7px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #27002a;
    color: #ecb7ff;
    overflow:scroll;
}

.forestdiv{
    background-image: url("https://gabestash.neocities.org/dividers/purple/violet164.png");
    background-position: bottom center;
    background-size: auto;
    padding-bottom: 20px;
    

}

hr {
    border:0; 
    height:20px;
    background:url("assets/music.gif"); 
}


.listleft {
    width: 485px;
    height: 680px;
    position: absolute;
    margin-left: 200px;
    box-sizing: border-box;
    margin-top: 310px;
    padding: 10px;
    line-height: 1.8;
}

.listleftcontent {
    width: 440px;
    height: 620px;
    border-radius: 5px;
    margin-left: 40px;
    margin-top: 7px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    background-color: #87588a;
    font-family: "nokia";
    color: #27002a;
}

.image img {
  width:25%;
  float:right;
    padding:5px;
}