*{
    margin:0;
    padding:0;
  font-family: "Ubuntu", sans-serif;
  transition: all .8s ease;
  color:#602a4c;
  text-decoration:none;
}
:root{

	/*DarkMode*/
	--Main-Color: #222;
	--Second-Color: #2a2a2a;
	--Third-Color: #3636368f;
	/*--Fourth-Color: #0089ff;*/
	--Fourth-Color: #e61c8c;
	--Fift-Color: #fff;
    --Dark-Transparent: #222222ad;

	/*LightMode*/	
	--LMain-Color: #fdfdfd;
	--LSecond-Color: #fff;
	--LThird-Color: #e1e1e1;
	--LSix-Color: #dddddd;
	--LFift-Color: #444;
    --Light-Transparent:#fdfdfdd1;
}


/*Loader Styles*/

#loader{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #fbecd9;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 600ms, z-index 600ms;
}

#loader.Loaded{
    opacity: 0;
    z-index: -1;
}


#loader img{
    width: 100px;
    margin-right:16px;
}

#loader #loaderWheel{
    width: 20px;
    height: 20px;
    border: solid #fff 4px;
    border-bottom: solid #602a4c 4px;
    border-radius: 50%;
    animation: loader 1s linear infinite;
    margin-right: 15px;
}

@keyframes loader{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

/*------------------------------------------------------------*/
/*From Up to Down*/
@keyframes Show-down{


	0%{

		opacity: 0;
		transform: translateY(-30px);
	}

	100%{

		opacity: .9;
		transform: translateY(0px);
	}

}

/*From Down to Up*/
@keyframes Show-up{


	0%{

		opacity: .9;
		transform: translateY(0px);
	}

	100%{

		opacity: 0;
		transform: translateY(-30px);
	}

}

/*------------------------------------------------------------*/


/* Reveal Styles */
.reveal{
	position: relative;
	transform: translateX(90px);
	opacity: 0;
	transition: all .8s ease;
}

.reveal.active{
	transform: translateX(0px);
	opacity: 1;
	transition-delay: calc(200ms * var(--j));
}


/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 7px;
}
 
::-webkit-scrollbar-track {
    background-color: #1c2634;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #19a3ff; 
    transition: all 1s;
}

::-webkit-scrollbar-thumb:hover{
	transition: all 1s;
	background:#1380c9;
}


.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

body{
background-color: #f5f5f5;
overflow-x: hidden;
overflow-y: hidden;
}

body.loaded{overflow-y: auto;}

#Header{
width: 100vw;
height: 50px;
background: #fff;
padding-top: .75rem;
padding-bottom: .75rem;
padding-left: 2.25rem;
padding-right: 2.25rem;
display: flex;
justify-content: space-between;
}

#KemoIcon{
display: flex;
width: auto;
gap: 22px;
padding-right: 20px;
flex-flow: row nowrap;
}

#ProfilePic{
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 7px;
}

#ProfilePic img{
width: 100%;
}

#ProfileInfo{
display: flex;
flex-flow: column;
justify-content: center;
}

#ProfileInfo #KemoTittle{
font-weight: bold;
letter-spacing: 2px;
}

#ProfileInfo #KemoDesc{
font-size: 13px;
color:rgb(121, 121, 121);
}

#Pages{
display: inline-flex;
gap: .75rem;
font-size:15px;
}

#Pages *{
align-content: center;
}

#Pages p:hover{
cursor: pointer;
color: #ffb680;
}

#Pages p.Selected{
border-bottom: 2px solid #ffb680;
}

#Picture{
width: 100vw;
height: 340px;
background: #bbb;
position: relative;
z-index: 3;
}

#Picture img{
width: 100%;
height: 100%;
object-fit: cover;
}

#MainContent{
width: 100vw;
height: auto;
position: relative;
top: -80px;
display: flex;
justify-content: center;
}

#Patreon{
position: relative;
  width: 1000px;
  height: auto;
  border-radius: 25px;
  background: #fff;
  z-index: 5;
  padding: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  padding-top: 80px;
  display: flex;
  flex-flow: column wrap;
  padding-bottom: 50px;
}

#PatreonHead{
display: flex;
flex-flow: column wrap;
align-content: center;
height: auto;
gap:18px
}

#PatreonHead img{
width: 140px;
transform: translateX(35px);
}

#PatreonHead p{
}

#PatreonDesc{
display: flex;
flex-flow: row wrap;
gap:30px;

width: 100%;
height: auto;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.ranks{
position: relative;
width: 350px;
height: 486px;
border: 2px solid #ffb680;
display: flex;
flex-flow: column;
border-radius: 15px;
overflow: hidden;
}

.Icon{
position: absolute;
font-size: 45px;
margin-left: 7px;
margin-top: 0px;
}

.rankInfo{
padding: 14px;
padding-top: 8px;
  height: auto;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.ranks img{
width: 100%;
margin-bottom: 15px;
}

.ranks h2{font-size:20px}
.ranks p{font-size:14px}

.rankButton{
padding: 10px;
  border-radius: 15px;
  background: #ffb680;
  width: fit-content;
  align-self: center;
  margin-top: 16px;
  cursor: pointer;
  position: absolute;
  bottom: 26px;
  color: #fff;
  width: 66%;
  text-align: center;
  font-font-weight: bold;
}

.rankButton i{
color:#fff;
}

.rankButton:hover{background:#e3a97e;}

.StoreIcon{
top: -8px;
left: 39px;
font-size: 84px;
position: absolute;
color: #602a4c;
}

.StoreIcon2{
font-size: 30px;
color: #602a4c;
}


#MOCHIWIP{
display: flex;
  flex-flow: column wrap;
  align-content: center;
  height: auto;
  gap: 18px;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  width: 80%;
  align-self: center;
}

#MOCHIWIP img{
width: 400px;
align-self: center;
}

#MOCHIWIP p{
align-self: center;
}

#KEMOAbout{
display: flex;
flex-flow: column wrap;
align-content: center;
height: auto;
gap:18px;
padding-bottom:80px;
}

#KEMOAbout img{
width: 140px;
align-self: center;
}

#KEMOAbout p{ width: 70%;}


@media (max-width: 900px){
#Header {
  width: 100vw;
  height: 50px;
  background: #fff;
  padding-top: .75rem;
  padding-bottom: .75rem;
  padding-left: 1.25rem;
  padding-right: 2.25rem;
  display: flex;
  justify-content: space-between;
}

#ProfileInfo #KemoTittle {
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
}

#ProfileInfo #KemoDesc {
  font-size: 10px;
  color: rgb(121, 121, 121);
}

#ProfilePic {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 7px;
}

#Pages {
  display: inline-flex;
  gap: .75rem;
  font-size: 12px;
  font-weight: bolder;
}

.StoreIcon2{
  font-size: 19px;
}

}