:root{
    --shadow:  0 3px 3px hsl(0deg 0% 0% / 0.3);
}

img{
    height:auto;
    width:auto;
}
body{
    background:url(images/oak2.png) black;
    color:#BDB19F;
    font-family:'alagard';
    cursor:url(images/quillcursor.png), auto;
    font-size:28px;
}

a{
    color:#e1bb51;
    text-decoration-style:wavy;
}

a:hover{
    color:#36462b;
    cursor:url(images/quillcursor2.png), auto;
}

.listitem{
    text-align:right;
    display:inline;
    line-height: 0.9rem;

}

.cont{
    display:inline-block;
    text-align:left;
    width:88%;
    overflow:hidden;
    position:relative;
    color:#BF1C1C;
}

.cont:hover{
    cursor:url(images/quillcursor2.png), auto;
}

.dots{
    display:inline;
    position:absolute;
    text-align:right;
}

.dots:after{
    content: '......................................................................';
}

#tab-content{
    display:none;
    padding:1vw;
    box-sizing: border-box;
    width:40vw;
    position:absolute;
    top:0;
    left:40vw;
    height:100vh;
}


.active[data-tab-target]{
 color:red;
}

[data-tab-content] {
    display: none;
  }
  
.active[data-tab-content] {
    display: block;
}


/* prompt generator */

#generator{
    font-size:28px;
}

.bg-image {
	filter: blur(8px);
	-webkit-filter: blur(8px);
}

.textbox {
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(255, 255, 255, 0.4); /* White w/opacity/see-through */
	border: 3px solid #f1f1f1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 65%;
	padding: 20px;
	text-align: center;
}

#Title {
	font-family: "Bebas Neue", cursive;
	font-size: 48px;
}

#btnRefresh {
	background: url(images/hands.png);
    background-size:contain;
    background-repeat:no-repeat; 
	border: none;
	border-radius: 16px;
	color: white;
	line-height: 30px;
	margin-top: 20px;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 30px;
	cursor: pointer;
}

#btnRefresh:hover {
	transform:scale(1.1);
}

.datafield {
	height: 40px;
	width: 80%;
	text-align: center;
    font-style:italic;
}



main{
    background:url(images/frame.png);
    height:720px;
    width:857px;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    position:relative;
    font-size:1rem;
}

section{
    width:100%;
    display:flex;
    justify-content:center;
}

h3{
    text-decoration: underline;
}

#examples{
    font-size:1rem;
}

#examples h1{
    text-decoration:underline;
}

#examples h1, #examples h2{
    margin:0;

}

#how{
    position:relative;
    background:url(images/yuricharacter2.png);
    background-position: center;
    margin-top:15%;
    width:40vw;
    height:80vh;
    background-repeat: no-repeat;
}

.yurianatomy{
    position:absolute;
    font-family:'oceanside';
    text-align:justify;
    width:50%;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size:1rem;
}

.yurianatomy:first-child{
    top:-10%;
    left:-10%;    
}

.yurianatomy:nth-child(2){
    bottom:0;
    left:-20%;  
}

.yurianatomy:nth-child(3){
    bottom:30%;
    right:-20%;  
}

.yurianatomy h1{
    font-family:'p22';
    margin:0;
}

#farcille{
    position:fixed;
    bottom:0;
    left:0;
    z-index:9999;
}

#pageSlide{
    background:url(images/page.png);
    height:403px;
    width:291px;
    display:none;
    margin-left:10%;
    position:absolute;
    top:1%;
    left:0;
    padding-left:20px;
    box-sizing: border-box;
    color:black;
}

yuri-nomicon{
    margin-top:10vh;
    position:relative;
    background:url(images/yurinomicon.png);
    height:411px;
    width:344px;
    display:block;
    filter:drop-shadow(var(--shadow));
}

#quill{
    position:absolute;
    bottom:5%;
    right:20%;
    z-index:9999;
}

#butterfly{
    position:absolute;
    top:0;
    left:15%;
    z-index:-9999;
}

@font-face {
    font-family: 'alagard';
    src: url(alagard.woff);
}

@font-face {
    font-family: 'p22';
    src: url('P22 Morris Golden Regular.ttf');
}

@font-face {
    font-family: 'oceanside';
    src: url('oceanside.ttf');
}