/*Layout by https://teppyslayouts.neocities.org/ */

/*----------------- FONTS-----------------*/

@font-face {
	font-family: leslie;
	src: url(/fonts/BadComic-VGD90.ttf)
}

/*----------------- IMPORTANT-----------------*/

body {
    background-image: url("/art/BG/bg_blinking.gif");
    color: #49311d;
    font-size: 12px;
    font-family: leslie;
}
.outer {
    width: 685px; 
    height: 650px;
    margin: auto;
    margin-top: 50px;
}
.main {
    width: 160px;
    height: 100%;
    display: inline-block;
    float: left;
    padding-right: 16px;
}
.mainbox {
    display: inline-block;
    width: 500px;
    float: left;
    box-sizing: border-box;
    height: 100%;
    position: relative;
}
.content {
    background: #b8b4a4;
    top: 22px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    overflow-y: auto;
    padding: 10px;
}
.avatar {
    width: 100%;
    padding-right: 10px;
    margin-bottom: 10px;
    margin-top: 18px;
}
.avatar img {
    width: 88px;
    margin-left: auto;
    display: block;
    border: 6px ridge;
}

.header {
    height: fit-content;
    width: 100%;
    font-size: 40px;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
    border: 3px solid #bfaf9d;
    color: #bfaf9d;
}

.bio {
    text-align: right;
    line-height: 1.5rem;
    color: #b8b4a4;
}

h1 {
    font-size: 18px;
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

h2 {
    font-size: 12px;
    border-bottom: 1px dotted;
}


a {
    color: #346c9a;
}


* {
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 6px; 
    height: 6px;
}

img {
	max-width: 100%;
	max-height: max-content;
}

/*----------------- BUTTONS -----------------*/

.button {
	display: block;
	font-size: 14px;
	color: #c9af39;
	text-decoration: underline;
	letter-spacing: 3px;

}

.button:hover {
	text-decoration: underline;
	color: #ebd69a;
	font-size: 16px;
	text-shadow: 0 0 3px #e4ab10;
}


/*----------------- DECOR -----------------*/

hr.dotted {
	border-top: 3px dotted #634b4b;
	border-bottom: none;
}


.centerbox {
	display:flex;
	flex-wrap:wrap;
    justify-content: center;
}


.cloudybrownbox {
	display: flex;
	width: 100%;
	border: 10px solid transparent;
	box-sizing: border-box;
	border-image:url(/art/BG/cloud1.png) 50 round;
}
	
.cloudybrownfull { 
	width:100%;
	height:100%;
	padding: 5px;
	overflow-y:auto;
	background:#bfaf9d;

}

.box {
	display:flex;
	flex-wrap:wrap;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
	background-color: #d2c8be;
	border: 1px solid #604652;
}


/* a darker box for quotes*/
.box2 {
	display:flex;
	flex-wrap:wrap;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
	background-color: #a99986;
}

/*----------------- BLOG PAGE -----------------*/

.blogbox {
	margin: auto;
	padding: 10px;
	width: 600px;
	height: 700px;
	overflow-y: auto;
	color: #816a6a;
	background-color: #e7e7e7;
	font-family: leslie ;
}

.blogheader {
	color: #e7e7e7 ;
	background-color: #816a6a;
	padding: 5px;
}

.blogcontainer {
	border: 2px solid #816a6a;
    margin: 5px;
}

.blogcontent {
	padding: 10px;
	min-height: 50px;
}


/*----------------- RAINBOW -----------------*/


.animated_rainbow {
    font-weight: bold;
    -webkit-animation: animatedBackground_b 5s linear infinite alternate;
}
            
@keyframes animatedBackground_b{
   0% {color: #ff8b00}
    10% {color: #e2db19}
    20% {color: #5ac91a}
    30% {color: #06ad24}
    40% {color: #08cb97}
    50% {color: #00b9ff}
    60% {color: #002eff}
    70% {color: #5d00ff}
    80% {color: #e003f4}
    90% {color: #ed0183}
    100% {color: #e30606}
}