Body {
                background: url("https://i.pinimg.com/736x/c9/67/9f/c9679f1c9fd991c2bd48408d029bcd7d.jpg");
                font-family: MS ui gothic; /*you can also host your own fonts*/
            }
            .container {
                border-width: 7px;
                border-style: solid;
                border-image: url(/images/border.webp) 7 round; 
                max-width: 900px; 
                margin: 0 auto; /*centers*/
                height: 800px;
                margin-top: 50px;
                background-color: #feffc7;
            }
            header {
                width: 98%;
                background: url(/images/banner.webp);
                height: 200px;
                background-size: 100% 100%; /*stretches the background to fit 100% of the height and width, you can also change it to conver or contain if the image you chose doesnt look good with this size. If's its repeating just5 delete this*/
                margin: auto;
                border: 4px white solid;
                outline: 1px solid #b19282;
                border-radius: 5px;
                position: relative; /*position relative is like a blueprint if you will, if child is position:aboslute, and their parent is position:relative; the childs position and width/height is based on the parent rather than the whole page*/
            }
            header h1 {
                margin: 0;
                padding: 0;
                text-shadow:
                    -1px 0 #c62e74,
                    0 1px #c62e74,
                    1px 0 #c62e74,
                    0 -1px #c62e74;
                color: #ffdce3;
                font-style: italic;
                position: absolute;
                right: 0;
                font-size: 4em;
                bottom: -20px; 
            }
            .container2 {
                width: 98%;
                border: 4px white solid;
                outline: 1px solid #b19282;
                margin: auto;
                margin-top: 5px;
                border-radius: 5px;
                height: 80%;
                display: flex;
                background-color: white;
                gap:1%;
            }
            .containerA {
                width: auto;
                border: 4px white solid;
                outline: 1px solid #b19282;
                margin: auto;
                margin-top: 5px;
                border-radius: 5px;
                height: auto;
                display: flex;
                background-color: white;
                overflow: auto;
                gap:1%;
            }
            .left {
                width: 20%;
                background-color: #fff0d2;
                height: 99%;
                border-radius: 5px;
                border: 1px solid #b19282;
                margin-top: 1px;
            }
            li {
                width: 80%;
                margin: 0 auto;
                margin-top: 5px;
                text-decoration: none;
                list-style: none;
                padding:5px;
                background: #ffeaf3;
                box-shadow: 3px 3px 3px inset white, -1px -1px 1px inset #cbb2c4;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #b19282;
            }
            .out{
                
                background: #e6ffe0;
                box-shadow: 3px 3px 3px inset white, -1px -1px 1px inset #bcddc4;
            }
            .out:hover{
                
                box-shadow: -1px -1px 1px inset white, 1px 1px 1px inset #bcddc4;
            }
            li:hover{
                font-style: italic;
                
                box-shadow: -1px -1px 1px inset white, 1px 1px 1px inset #cbb2c4;
                position: relative;
                top: 0.5px;
                left: 0.7px;
            }
            li a {
                text-decoration: none;
            }
            
            li:nth-child(5){  /*nth child(x) just means under the parent element, the (in this example) fifth child will have their top margin be 20px. */
                margin-top:20px;
            }
            .marquee {
                height: 41%;
                width: 80%;
                border-width: 7px;
                border-style: solid;
                border-image: url(/images/border2.webp) 8 round;
                background-color: #ffffff;
                overflow: hidden;
                margin: auto;
                margin-top:10px;
            }

            .marquee:hover .minner {
                animation-play-state: paused;
            }
            .marquee2:hover .minner {
                animation-play-state: paused;
            }
            .minner {
                animation: 2s marq infinite linear; /*the more images you have the slower 2s will be*/
                display: inline-block;
                width: 100%;
            }

            .minner img {
                width: 100%;
            }

            @keyframes marq {
                from {
                    transform: translateY(0);
                }

                to {
                    transform: translateY(-100%);
                }
            }
            .right{
                width:79%;
                background-color: #d6fffe;
                height: 99%;
                border-radius: 5px;
                border: 1px solid #b19282;
                margin-top: 1px;
                /*
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                */
            }
            .top{
                width:99%;
                margin: 0 auto;
                margin-top:5px;
                height:40%;
                
            }
            .middle{
                width:97%;
                margin:0 auto;
                height:16%;
                margin-top:10px;
                padding: 5px;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
            }
            .bottom{
                
                width:99%;
                margin:0 auto;
                height:38%;
                margin-top:5px;
                display: flex;
                gap:10px;
            }
            main{
                  background: radial-gradient( #ffcfe7 0%, white 80%);
                height:99%;
                width:70%;
                border: 1px solid #b19282;
                border-radius:5px;
                display: inline-block;
            }
            .top2{
                width:100%;
            }
            p{
                margin:5px;
                color:#6e2f0e;
            }
            b{
                text-shadow:-1px 0 #4970c9, 0px 1px #4970c9,   1px 0 #4970c9,  0 -1px #4970c9;
                color: #dce7ff;
            }
            

            @keyframes horzmarquee {
                from {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(-100%);
                }
            }
            .curtain1{
                position: absolute;
                height:100%;
                top:0;
                left:0;
                z-index: 1;
            }
            .curtain2{
                position: absolute; 
                height:100%;
                right:0;  transform: scaleX(-1);
                top:0;
                z-index: 1;
            }
            .marquee2{
                
                background-image: url("https://i.pinimg.com/736x/49/12/56/49125648f8728f8fae9d52137b66fee8.jpg");
                overflow: hidden;
                white-space: nowrap;
                height: 80px;  
                border:#b19282 1px solid;
            }
            .marquee2 .minner{
                height:100%;
                animation: 10s horzmarquee infinite linear;
                display: inline-block;
                margin:0;
                width:auto;
            }
            
            .marquee2 .minner img{
                height:100%;
                width:initial;
            }
            #lastfmcontainer {
                margin-top: 1px;
                margin-left: 5px;
                background: linear-gradient(180deg, #f4ffd5, #ffdaba);
                padding: 5px;
                border: 1px solid #b19282;
                width: 27%;
                float:right;
                height:94%;
            }
            .profile{
                background-color: #ffffff;
                width:40%;
                height:99%;
                border: 1px solid #b19282;
            }
            .ptop{
                width:100%;
                display: flex;
            }
            .pfp{ height:100px;
                border: 1px solid #b19282;
            border-top:none;
            border-left:none;
            }
            .about{
                 height:100px;
                border-bottom: 1px solid #b19282;
                width:64%;
                overflow: auto;
            }
            
            .title{
                border-radius: 3px;
                border: 1px outset white;
                text-align: center;
                padding: 5px 0px 5px 0px;
                box-shadow: 0 0 3px #dfdfdf;
            }
             /*i've made 5 colors but u can make more, there cant be 2 elements with the same id though, so if you want 2 titles to be green just make a seperate class that has both the rules of .title and #green*/
            #green {
                background: linear-gradient(180deg,#eaffe4,#bdffbf);
            }
            #orange{
                background: linear-gradient(180deg,#fff8d5,#ffdfb7);
            }
            #pink{
              
                border-bottom:#ff7b92 1px solid;
                background: linear-gradient(180deg,#ffd5ea,#ffb7e3);
            }
            #blue{
                 background: linear-gradient(180deg,#d5ebff,#b7f3ff);
            }
            
            #purple{
                 background: linear-gradient(180deg,#f2d5ff,#c7b7ff);
            }
            .box{
                width:28%;
                height:200px;
                background:white; 
                border: 1px solid #b19282;
                padding:.1px;
                overflow:auto;
            }
            .footer{ /*dont remove this*/
                text-align: center;
                color: #714a28;
                font-style: italic;
            }
            .footer a{
                text-decoration: none;
                color:white;
                text-shadow:-1px 0 #ff8dca, 0px 1px #ff8dca,   1px 0 #ff8dca,  0 -1px #ff8dca;
            }
            
              @media (max-width: 855px)  /*baisically means any screen width that are less than or equal to 855 will have the rules listen below */{
                  #lastfmcontainer{
                      display: none;
                  }
                  main{
                      width:100%;
                  }
            }
              @media (max-width: 855px) {
                  .container{
                      height: fit-content;
                  }
                  .marquee{
                      display: none;
                  }
                  .left{
                      padding-bottom:5px;
                  }
            }
              @media (max-width: 645px) {
                  .container2{
                      flex-wrap:wrap;
                      
                  }
                  .left , .right{
                      width:100%;
                  }
                  .right{
                      margin-top:5px;
                  }
            }
              @media (max-width: 600px) {
                  .bottom{
                      flex-wrap: wrap;
                  }
                  .box , .profile{
                      width:100%;
                  }
                  .about{
                      width:82%;
                  }
            }
              @media (max-width: 310px) {
                  .pfp{
                      display: none;
                  }
                  .about{
                      width:100%;
                  }
            }