body { 
  display: flex; 
  font-family: "Mochiy Pop One", sans-serif;
  color: #4C314E;
  font-size: 12px;
  text-shadow: 2px 2px #BCE1E0;
  background-image: url(https://daniques.neocities.org/OUT%20OF%20THIS%20WORLD.png);
  background-size: 500px;
}

.page{
 display:flexbox;
 flex-direction:column;
 margin-left: auto;
 margin-right:auto;
}


.main { 
  display:flex;
  background: #351F37; 
  border-radius: 25px;  
  min-width: 1100px;
  border-style: dashed;
  border-width: 4px;
  border-color: #6E4B7C;
  height: 810px;
  margin-left:auto;
  margin-right:auto;
  margin-top:130px;
  padding: 15px;
}

.main-card{
  background-image: repeating-linear-gradient(0deg, #BCE1E0, #BCE1E0 2px, transparent 2px, transparent);
	background-size: 37px 37px;
	background-color: #FFEEF3;
  height: 760px;
  width: 850px;
  border-radius: 15px;
  padding:10px;
  border-width: 15px;
  border-color: #FFEEF3;
  border-style: solid;
  position: relative;
}

.sidebar{
  display:flex;
  position:relative;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right:auto;
  z-index: 2;
}

.sidebar-marquee{
  width: 200px;
  padding: 5px;
  margin-bottom: 15px;
  background: #6E4B7C;
  margin: 6px;
  border-top: dashed 2px #AAA2E6;
  border-bottom: dashed 2px #AAA2E6;
  color: #FFEEF3;
  text-shadow: -2px 3px #4C314E, 1px -2px #FF9FBA;
}

.home{
  margin-left:-20px;
  display:block;
  width:200px;
  transition: .5s;
}

.home-select{
  margin-left:-20px;
  display:block;
  width:200px;
}

.home:hover{
transform: rotate(-4deg);
filter: brightness(120%)
}

.about{
  margin-left:20px;
  display:block;
  width:200px;
  transition: .5s;
}
.about-select{
  margin-left:30px;
  display:block;
  width:200px;
}

.about:hover{
transform: rotate(4deg);
filter: brightness(120%)
}

.characters{
  margin-left:-30px;
  margin-top: 10px;
  display:block;
  width:220px;
  transition: .5s;
}

.characters-select{
  margin-left:-30px;
  margin-top: 10px;
  display:block;
  width:220px;
}

.characters:hover{
transform: rotate(-4deg);
filter: brightness(120%)
}

.updates{
 margin-left:20px;
 margin-top: 10px;
  display:block;
  width:200px;
  transition: .5s;
}

.updates-select{
 margin-left:20px;
 margin-top: 10px;
  display:block;
  width:200px;
}

.updates:hover{
 transform: rotate(4deg);
filter: brightness(120%)
}

.punches{
  background-color: #351F37;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin-bottom: 80px;
  border: solid 3px #FF9FBA;
}

.punches-div{
display:block;
height: 750px;
width:40px;
margin-right: 30px;
margin-top: 50px;
float:left;
}

.main-card-content{
padding: 15px;
height: 710px;
width: 750px;
margin-top:20px;
overflow: auto;
float:right;
}

.title{
  width:300px;
  position:absolute;
  top:-150px;
}

.mochiy-pop-one-regular {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6{
  font-weight: bold;
  text-shadow: -2px 3px #9169B9, 1px -2px #FF9FBA;
}

.card-mesh .h1, .card-mesh .h2, .card-mesh .h3, .card-mesh .h4, .card-mesh .h5, .card-mesh .h6{
  font-weight: bold;
  text-shadow: -2px 3px #9169B9, 1px -2px #BDE2E1;
}

a{
  color: #FFECF1;
  font-weight: bold;
}

p{
  text-indent: 25px;
}

ul{
  padding-left: 25px;
  text-align: left;
  list-style-image: url("https://daniques.neocities.org/star%20bullet.png");
  list-style-type: circle;
}

.text-img{
  width:25px;
  display:inline-block; vertical-align:middle;
}

.updates-hr{
  background: #AAA2E6;
  height: 3px;
  width: 100%;
  box-shadow: -2px 2px #9169B9, 2px -2px #FFECF1;
}

.center-div{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.card-ruled{
  background-image: repeating-linear-gradient(0deg, #AAA2E6, #AAA2E6 1px, transparent 1px, transparent);
	background-size: 20px 20px;
	background-color: #9169B9;
  padding: 10px;
  border-radius: 15px;
  border-top: dashed 2px #FF9FBA;
  border-right: dashed 2px #FFECF1;
  border-bottom: solid 2px #351F37;
  border-left: solid 2px #4C314E;
  box-shadow: -5px 5px 5px #9169B9, 2px -3px 5px #BDE2E1;
  text-shadow: 2px 2px #4C314E;
}

.card-mesh{
 background: radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,#AAA2E6 68% 70%,#0000 72%) 32px 32px/calc(2*32px) calc(2*32px),
		  radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,#AAA2E6 68% 70%,#0000 72%) 32px 32px/calc(2*32px) calc(2*32px),
		  radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,#AAA2E6 68% 70%,#0000 72%) 0 0/calc(2*32px) calc(2*32px),
		  radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,#AAA2E6 68% 70%,#0000 72%) 0 0/calc(2*32px) calc(2*32px),
		  repeating-conic-gradient(#FF9FBA 0 25%,#0000 0 50%) 0 0/calc(2*32px) calc(2*32px),
		  radial-gradient(#0000 66%,#AAA2E6 68% 70%,#0000 72%) 0 calc(32px/2)/32px 32px
		  #FF9FBA;
      padding: 10px;
  border-radius: 15px;
  border-top: dashed 2px #BDE2E1;
  border-right: dashed 2px #FFECF1;
  border-bottom: solid 2px #9169B9;
  border-left: solid 2px #AAA2E6;
  box-shadow: -5px 5px 5px #9169B9, 2px -3px 5px #BDE2E1;
  text-shadow: -2px 2px #9169B9;
  color: #ffeff4
}

.card-wavy{
  background: 
		  radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#FFECF1 54% 57%,#0000 59%) 0 calc(80px/2),
		  radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#FFECF1 54% 57%,#0000 59%) calc(80px/2) 0,
		  radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#FFECF1 54% 57%,#0000 59%),
		  radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#FFECF1 54% 57%,#0000 59%),
		  #BDE2E1;
	background-size: calc(80px/4.667) 80px,80px calc(80px/4.667);
  padding: 10px;
  border-radius: 15px;
  border-top: dashed 2px #FF9FBA;
  border-right: dashed 2px #FFECF1;
  border-bottom: solid 2px #9169B9;
  border-left: solid 2px #AAA2E6;
  box-shadow: -5px 5px 5px #9169B9, 2px -3px 5px #BDE2E1;
  text-shadow: 1px -1px #AAA2E6;
  color: #4C314E;
}

.card-dotted{
  background-image: radial-gradient(#9169B9 1.5px, transparent 1.5px), radial-gradient(#9169B9 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
	background-color: #AAA2E6;
  padding: 10px;
  border-radius: 15px;
  border-top: dashed 2px #FF9FBA;
  border-right: dashed 2px #FFECF1;
  border-bottom: solid 2px #351F37;
  border-left: solid 2px #9169B9;
  box-shadow: -5px 5px 5px #9169B9, 2px -3px 5px #BDE2E1;
  text-shadow: 2px 2px #9169B9;
}

.credit{
  background-image: repeating-linear-gradient(0deg, #AAA2E6, #AAA2E6 1px, transparent 1px, transparent);
	background-size: 20px 20px;
	background-color: #9169B9;
  padding: 10px;
  border-radius: 15px;
  border-top: dashed 2px #FF9FBA;
  border-right: dashed 2px #FFECF1;
  border-bottom: solid 2px #351F37;
  border-left: solid 2px #4C314E;
  box-shadow: -5px 5px 5px #351F37, 2px -3px 5px #9169B9;
  text-shadow: 2px 2px #4C314E, -2px -2px #4C314E;
  width: 420px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  display:block;
  color: #FFECF1;
  text-align: center;
  font-weight:bold;
  font-size: 12px;
}