<style>
/*Fade In */
   body {
            animation: fadeInAnimation ease 3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

/*Fonts */
@font-face {
    font-family: "Adabelle";
    src: url("https://dl.dropbox.com/s/lajl6xu22pps3qa/AdabelleHandwriting-Regular.ttf");
    }

@font-face {
    font-family: "Twinkle Star";
    src: url("https://dl.dropbox.com/s/p5aouo4bmorfczf/TwinkleStar.otf");
    }

/*Cursor*/
body { cursor: url("https://sanguineroyal.com/assets/occursor.gif") 0 0,  default; }

a { cursor: url("https://sanguineroyal.com/assets/gallerycursorhover.gif") 0 0,  default;}

/*BG Images*/
body {
	background-image:  url("https://iili.io/HSIkmdJ.gif");
	background-repeat: repeat;
	background-position: center;
	}
   
.toplace {
  pointer-events: none;
  width: 100%;
  height: 80px;
  position: fixed;
  right: 0px;
  top: 0px;
  background: url(https://iili.io/HSIv2st.gif) repeat left top;
  z-index:-100
}

.bottomlace {
  pointer-events: none;
  width: 100%;
  height: 80px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  background: url(https://iili.io/HDUgzXI.gif) repeat left top;
  z-index:-100
}

/*Container that holds entire OC profile*/
#container {
    padding-top: 40px;
    max-width: 1000px;
    margin: 0 auto;
    }

.profilecontainer {
     display:flex;
     flex-wrap: wrap;
     justify-content: center;
    }
                      
#basicinfo{
    background:url(https://sanguineroyal.com/assets/back01oc.gif);
    box-sizing:border-box;
    margin:20px 0; 
    padding:10px;
    position:relative;
    width:100%
    height:300px;
    }
    
.paperclip {
background:url(https://iili.io/HUFrGhQ.png) no-repeat;
height:62px;
position:absolute;
right:310px;
top:-13px;
width:27px
}
    
.infobox {
background:#f0f0f0;
border:1px dashed #999;
box-sizing:border-box;
margin:15px 0 25px; 
padding:.5em;
width:100% 
}

.rightcontent {
    margin-left:3%; 
    margin-right:3%; 
    width:53%;
}

.leftcontent {
    margin-left:3%; 
    margin-right:3%; 
    width:33%;
}

.content {
    height: 755px;
    width: 100%;
    margin: auto;
    overflow-y: auto;
    overflow-x: none;
    margin-top: -10px;
}

 main {
                
                flex: 1;
                padding: 20px;
                order: 2;
                background-color: white;
                border-color: white;
                overflow: hidden;
            }

.body {
text-align:left;
}


            body {
                font-family: 'Adabelle';
                font-size:23px;
                text-align: center;
                margin: 0;
                background-color: #fff0f3;
                color: #444140;
            }
    
            h1 {
                font-family: 'Twinkle Star';
                color: #6E4634;
                font-size: 30px;
            }
            
            h2 {
                font-family: 'Twinkle Star';
                color: #6E4634;
                font-size: 25px;
            }
            
            h3 {
                font-family: 'Adabelle';
                color: #6E4634;
                font-size: 20px;
            }

            * {
                box-sizing: border-box;
            }


/* Ummm sadgirl remenants. lol */
body { cursor: url("https://sanguineroyal.com/assets/occursor.gif") 0 0,  default; }

 a {
        cursor: url("https://sanguineroyal.com/assets/gallerycursorhover.gif") 0 0,  default;}
        
#container a:hover {
                color: #FABCB1;
            }


            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #B06D6D;
                text-decoration:none;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

.tab { text-indent: 50px; }

.box11 {
margin:1em 0; /* 中央寄せは0をautoに変更 */

}
.u01 {
background:url(https://sanguineroyal.com/assets/f-ueoc.gif) repeat-x;
height:45px;
margin:0 50px
}
.s01 {
background:url(https://sanguineroyal.com/assets/f-sitaoc.gif) repeat-x;
height:13px;
margin:0 50px
}
.t01 {
background:url(https://sanguineroyal.com/assets/f-tunagi-nakaoc.gif) repeat-x;
height:48px;
margin:0 50px
}
.box-top {
background-image:url(https://sanguineroyal.com/assets/f-kado1oc.gif), url(https://sanguineroyal.com/assets/f-kado2oc.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:45px
}
.box-center {
background-image:url(https://sanguineroyal.com/assets/f-migioc.gif), url(https://sanguineroyal.com/assets/f-hidarioc.gif) , url(https://sanguineroyal.com/assets/f-nakaoc.gif);
background-position:top right, top left, top center;
background-repeat:repeat-y, repeat-y ,repeat;
padding:0 20px
}
.box-bottom {
background-image:url(https://sanguineroyal.com/assets/f-kado3oc.gif), url(https://sanguineroyal.com/assets/f-kado4oc.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:13px
}
.box-tunagi {
background-image:url(https://sanguineroyal.com/assets/f-tunagi-migioc.gif), url(https://sanguineroyal.com/assets/f-tunagi-hidarioc.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
height:48px
}



           

 @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                main {
                    order: 1;
                }
     
                class="rightcontent" {
                    width: 100%;
                }

 }

@media only screen and (min-width: 1000px) {

                .profileright {
                    margin-left:3%; 
                    margin-right:3%; 
                    max-width:500px;
                }
    }

     @media only screen and (max-width: 900px) {

                .profileright {
                    width: 100%;
                }
         
         
         
    } 
     
     @media only screen and (max-width: 1000px) {

                .profileleft {
                    width: 100%;
                }
         
                .artwork img {
    height: 100px;
	width:	100px;
    margin: 5px auto;
    transition: 0.3s;
	object-fit: cover;
}
    }

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #FAA0A0 #FFC0CB;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 13px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #FAA0A0;
    border-radius: 10px;
    border: 3px dotted #FFC0CB;
  }

.artwork img {
    height: 175px;
	width:	175px;
    margin: 5px auto;
    transition: 0.3s;
	object-fit: cover;
}

.artwork:hover {
    opacity: 0.7;
}
.right {
  position: fixed;
  bottom: 0;
  right: 0;
}
#contentwarning {
  height: 200px;
  width: 200px;
  border: dashed 3px #f06968;
}

/*Media Query*/
@media only screen and (max-width: 1000px) {
.artwork img {
    height: 150px;
	width:	150px;
    margin: 5px auto;
    transition: 0.3s;
	object-fit: cover;
}

#contentwarning {
  height: 150px;
  width: 150px;
  border: dashed 2px #f06968;
}


</style>