/* made by ari ! :3 */

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

body {
    background-color: #ffeded;
    background-image: url("bggrid.png");
    font-size: 1em; 
    color: #000000;
    display: flex;
    flex-direction: row;
    font-family: "Karla";
}

a {
    text-decoration: none
}

li {
  list-style-image: url('bullet.gif');
}

h1 {
    color: #d3007b;
    margin: 0%;
    font-family: "Karla";
}

h2 {
    color: #94637b;
    margin: 0%;
    font-size: small;
    font-family: "Karla";
}

/*************************************************/

/*ENTIRE LAYOUT!!!*/
.layout {
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.site {
    background-color: #ffffff;
    box-shadow: 2px 2px 10px 5px #ffffffc7;
    border-radius: 10px;
    margin-top: -50px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    /*border: 2px solid #ff5ea1;
    border-radius: 5px; */
    
   border-width: 7px;
   border-style: solid; 
   border-image: url("white.png") 8 fill round; 

}

/*************************************************/

.topsection {
    display: flex;
    flex-direction: column;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.middlesection {
    display: flex;
    flex-direction: row;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    justify-content: center;
}

.bottomsection {
    text-align: center;
    display: flex;
    flex-direction: row;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    justify-content: center;   
}

/*************************************************/

/*main COMPONENTS*/
.siteTitle {
    display: flex;
    justify-content: center;
    font-size: 35px;
    margin-top: -50px;
}

.main {
    background-color: #ffffff;
    background-image: url(bg.png);
    width: 950px;
    margin-left: 10px;
    border-radius: 5px;
    border: #cc137f solid 1px;
}

.header {
    background-image: url("header.png");
    background-position: center;
    background-size: 600px;
    height: 350px;
    position: relative;
    width: 100%;
    box-shadow: inset 5px 5px 8px #ffffff;
    margin-bottom: 10px;
}

.leftsidebar {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom, #ffdaf0, #ffffff);
    background-position: right;
    width: 250px;
    margin-left: 10px;
    border-radius: 5px;
}

.rightsidebar {
    background-color: #ffffff;
    background-image: url(bg.png);
    background-position: right;
    width: 250px;
    margin-left: 10px;
    border-radius: 5px;
    border: #cc137f solid 1px;
}

.sectiontitle {
    background-color: #ffa3ba;
    background-image: linear-gradient(to bottom, #ffdaf0, #ffffff00);
    display: flex;
    justify-content: center;
    font-family: "Cherry Bomb One";
    font-size: 30px;
    color: #ffffff;
    text-shadow: 2px 2px 2px #ff6291;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: #cc137f solid 1px;
}

/*detailed COMPONENTS*/
.nav {
    background-image: linear-gradient(to top, #ffffff, #ffffff, #ffffff00);
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 1473px;
}

.navbutton {
    background-image: linear-gradient(to top, #ff98d4, #ff4c82, #ffffff);
    border: #f36fb8 solid 1px;
    box-shadow: 2px 2px 8px #0000002f;
    padding: 5px;
    text-align: center;
    width: 120px;
    border-radius: 500px;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 25px;
    font-family: "Cherry Bomb One";
    text-shadow: 2px 2px 8px #b80a84;
}

.smlink {
    background-color: #ffffff;
    padding: 10px;
    text-align: left;
    font-size: 20px;
}

.container {
    background-color: #ffffff;
    border: #ffbde3 dashed 2px;
    margin: 15px;
    padding: 5px;
    border-radius: 5px;
    text-align: left;
}

.sidebarinfo {
    padding-left: 15px;
    padding-right: 15px;
}

.footer {
    color: #ff60d7;
    font-size: small;
}

/*************************************************/

/*IMAGE*/
.splash {
    z-index: 2;
    position: absolute;
    margin-top: 835px;
    margin-left: 160px;
    rotate: 12deg;
}

/*peeking image*/
.splash2 {
    z-index: -2;
    position: absolute;
    margin-left: 970px;
    margin-top: -10px;
}

.splash3 {
    z-index: 2;
    position: absolute;
    margin-top: 900px;
    margin-left: 1220px;
    rotate: -10deg;
}

.icon {
    width: 250px;
    height: 250px;
    overflow: hidden;
    z-index: 2;
    position: absolute;
    margin-top: 300px;
    margin-left: 21px;
    rotate: -3deg;
    box-shadow: 10px 5px 5px 5px 5px #ffffff;
    border-style: solid;
    border-color: #ffffff;
    border-radius: 900px;
}

/*************************************************/

/*fun stuff*/
/*loveberry.neocities.org , customized*/
.gradoutline {
background: -webkit-linear-gradient(#ffc4d8, #ff00bf, #ff279e, #ffffff);
-webkit-background-clip: text;
-webkit-text-stroke: 3px transparent;
color: #ffffff;
font-size: 2em;
font-family: "Cherry Bomb One";

text-shadow: 2px 2px 8px #b80a84;
}

/*scripted.neocities.org*/
.img-floatinganim {
animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}
    
/*scripted.neocities.org*/
.img-floatinganim2 {
animation-name: floating; 
animation-duration: 2s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}

/*bullet list icon sourced from https://wowzow.neocities.org/pix*/
/*lace border sourced from https://scripted.neocities.org/*/