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

@font-face {
font-family: 'Benecarlo';
src: url('fonts/Benecarlo-Book-webfont.woff2') format('woff2'),
     url('fonts/Benecarlo-Book-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Benecarlo';
src: url('fonts/Benecarlo-Italic-webfont.woff2') format('woff2'),
     url('fonts/Benecarlo-Italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Benecarlo';
src: url('fonts/Benecarlo-Bold-webfont.woff2') format('woff2'),
     url('fonts/Benecarlo-Bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Benecarlo';
src: url('fonts/Benecarlo-BoldItalic-webfont.woff2') format('woff2'),
     url('fonts/Benecarlo-BoldItalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'ApricotXenC';
src: url('fonts/Px437_ApricotXenC.woff2') format('woff2'),
     url('fonts/Px437_ApricotXenC.woff') format('woff');
}

@font-face {
font-family: 'ArchitectsDaughter';
src: url('fonts/ArchitectsDaughter-Regular.woff2') format('woff2'),
     url('fonts/ArchitectsDaughter-Regular.woff') format('woff');
}

/*M*/
@font-face {
font-family: 'Runes1';
src: url('fonts/runes1.woff2') format('woff2'),
     url('fonts/runes1.woff') format('woff');}

/*R*/
@font-face {
font-family: 'Runes2';
src: url('fonts/droon.woff2') format('woff2'),
     url('fonts/droon.woff') format('woff');}

html {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
margin: 0px;	
cursor: url('assets/cursor.png'), auto;
}

body {	
background-image: 
url('assets/background4.gif'), 
url('assets/background3.gif');

background-repeat: 
repeat-x,
repeat;

background-blend-mode: 
screen,
normal;

background-position: 
center 0px,
left top;

background-size:  
auto, 
auto;

background-color: #000000;
font-size: 11px;
line-height: 10px;
overflow-x: hidden;
font-family: 'ApricotXenC';
}

a {
cursor: url(assets/cursorhover.png), auto;
}

/*------------BACKDROP STYLING------------------*/

div.threadcontainer {
width: 500px;
height: auto;
position: absolute;
left: 50%;
margin-left: -250px;
}


div.barral {
width: 500px;
min-height: 1001px;
background-repeat: no-repeat;
border-radius: 15px;
padding-bottom: 10px;
}


table.words {
display: inline-table;
font-size: 14px;
max-width: 280px;
margin-left: 111px;
background-color: rgba(0,0,0,.6);
background-image: url('assets/background3.gif');
background-attachment: fixed;
background-position: top left;
text-align: center;
border: 1px solid rgba(158, 255, 229, .8);
border-radius: 10px;
box-shadow: 3px 3px 5px 2px  rgba(0, 0, 0, .3);
color: rgba(158, 255, 229, .8);
text-shadow: 0 0 4px rgba(158, 255, 229, .8);
font-family: 'ApricotXenC';
}

table.words td {
width: 60px;
vertical-align: middle;
}



/* -THIS IS THE OPPOSITE OF A REDACTION -*/
span.emph {
}

/*-------------INLINE ELEMENTS-------------------*/

h1 {
display: inline-block;
width: 423px;
height: 69px;
padding-top: 29px;
margin-left: 38px;
letter-spacing: 4px;
font-size: 24px;
background-image: url('assets/barral---h1.png');
background-repeat: no-repeat;
text-align: center;
color: white;
text-shadow: 0px 0px 9px #ffefd3;
font-variant: small-caps; 
font-variant-caps: all-small-caps;
font-family: 'Benecarlo';
}

div.inlinebutton {
display: block;
width: 67px;
height:67px;
background-image: url(assets/portraitframe.png);
background-repeat: no-repeat;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
vertical-align: middle;
filter: none;
transition: filter .3s ease-in-out;
}
div.inlineschbutton:hover{
filter: brightness(200%);
}
div.inlineschbutton {
display: block;
width: 65px;
height:65px;
background-image: url(assets/schportrait.gif);
background-repeat: no-repeat;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
text-align:center;
vertical-align: middle;
filter: none;
transition: filter .3s ease-in-out;
}
div.inlinebutton:hover{
filter: brightness(200%);
}

img.inlinemark {
display: block;
height: 14px;
width: 14px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}

hr {
display: block;
height: 24px;
width: 88px;
border: none;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(assets/horizontalruling.gif);
}



/*-----------DIALOGUE STYLING-------------------*/

.dream {
font-size: 13px;
font-family: 'Benecarlo';
background: -webkit-linear-gradient(0deg,rgba(86,0,190,1) 33%, rgba(0,212,255,1) 66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 15px blue;
font-weight: bold;
text-align: center;
}

.might {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 13px;
font-family: 'Benecarlo';
background: -webkit-linear-gradient(0deg, rgba(3,71,0,1) 0%, rgba(1,247,0,1) 68%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 15px green;
font-weight: bold;
}

.passion {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 13px;
font-family: 'Benecarlo';
background: -webkit-linear-gradient(180deg, rgba(247,0,0,1) 0%, rgba(247,0,183,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 15px red;
font-weight: bold;
}

.dreamrunes {
font-size: 20px;
line-height: 22px;
font-family: 'Runes2';
background: -webkit-linear-gradient(0deg,rgba(86,0,190,1) 33%, rgba(0,212,255,1) 66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
text-shadow: 0px 0px 15px blue;
text-align: center;
}

.mightrunes {
font-size: 20px;
font-family: 'Runes2';
line-height: 22px;
background: -webkit-linear-gradient(0deg, rgba(3,71,0,1) 0%, rgba(1,247,0,1) 68%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 15px green;
letter-spacing: 2px;
}

.passionrunes {
font-size: 20px;
font-family: 'Runes2';
line-height: 22px;
background: -webkit-linear-gradient(180deg, rgba(247,0,0,1) 0%, rgba(247,0,183,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 15px red;
letter-spacing: 2px;
}


div.postit {	
display: block;
width: 326px;
min-height: 60px;
margin-left: 85px;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 30px;
padding-bottom: 30px;

background-image:
url('assets/notebottom.png'),
url('assets/notetop.png'),
url('assets/notemiddle.png');

background-position: 
0px 100%,
0px 0px,
0px 0px;

background-repeat:
no-repeat,
no-repeat,
repeat-y;

background-clip:
border-box,
border-box,
content-box;
}

div.postit p {
width: 278px;
text-indent: 0;
margin-left: 25px;
margin-top: 5px;
font-family: 'ArchitectsDaughter';
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: black;
}

div.postit table {
font-family: 'ArchitectsDaughter';
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: black;
}

div.speechbubble {
	
display: block;
width: 437px;
position: relative;
left: 50%;
margin-left: -215px;
margin-bottom: 7px;
padding-top: 25px;
padding-bottom: 25px;

background-image:
url('assets/dialoguebottombg.png'),
url('assets/portraitframe2.png'),
url('assets/dialoguetopbg.png'),
url('assets/dialoguebg.png');

background-position: 
0px 100%,
0px 0px,
0px 0px,
0px 30px;

background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-y;

background-clip:
border-box,
border-box,
border-box,
content-box;
}

div.speechbubble p {
width: 315px;
margin-left: 102px;
line-height: 14px;
text-indent: 0;
color: rgba(255,239,209,.7);
font-family: 'Benecarlo';
}

div.speechbubble img {
display: inline-block;
width: 45px;
height: 45px;
position: absolute;
left: 38px;
top: 36px;
transform:translate(-50%,-50%);
mix-blend-mode: screen;
opacity: .9;
}

div.schspeechbubble {
	
display: block;
width: 437px;
position: relative;
left: 50%;
margin-left: -215px;
margin-bottom: 10px;
padding-top: 30px;
padding-bottom: 30px;

background-image:
url('assets/schdialoguebottom.png'),
url('assets/schportraitframe.png'),
url('assets/schdialoguetop.png'),
url('assets/schdialoguebg.png');

background-position: 
0px 100%,
0px 0px,
0px 0px,
0px 30px;

background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-y;

background-clip:
border-box,
border-box,
border-box,
content-box;
}

div.schspeechbubble p {
width: 325px;
margin-left: 102px;
margin-top: 0px;
margin-bottom: 0px;
text-indent: 0;
font-size: 16px;
line-height: 14px;
color: rgba(255,239,209,.7);
}

div.schspeechbubble img {
display: inline-block;
width: 45px;
height: 45px;
position: absolute;
left: 39px;
top: 36px;
transform:translate(-50%,-50%);
mix-blend-mode: screen;
opacity: .8;
}

.accent {
font-family: 'Benecarlo';
font-style: italic;
text-shadow: 0px 0px 4px #ffefd3;
font-size: 13px;
}

/*-----------PAINTING & TOOLTIPS---------------*/

div.painting {
display: block;
width: 460px;
height: 583px;
margin-left: 20px;
box-shadow: 0px 0px 5px 2px  rgba(0, 0, 0, .7);
border-radius: 10px;
background-repeat: no-repeat;
background-position: 20px 24px;
}

hr {
display: block;
height: 24px;
width: 88px;
border: none;
background-image: url(assets/horizontalruling.gif);
}

img.questionbutton {
display: float;
background-image: url(assets/questionmark.gif);
background-color: black;
border-radius: 30px;
background-position: 53% 53%;
background-size: 19px 19px;
width: 33px;
height: 33px;
background-repeat: no-repeat;
position: relative;
left: 403px;
bottom: 17px;
transition: background-image .3s ease-in-out;
}
img.questionbutton:hover {
background-image: url(assets/cursor.png);
cursor: url(assets/questionmark.gif), auto;}
img.questionbutton:hover + .tooltip {
transition: opacity .3s ease-in-out;
opacity: 100%;
}
.tooltip {
transition: opacity .3s ease-in-out;
opacity: 0%;
position: relative;
left: 395px;
bottom: 91px;
display: inline-grid;
grid-template-columns: 370px;
grid-template-rows: 26px auto 26px;
gap: 0px 0px;
grid-auto-flow: row;
align-items: center;
font-family: 'ApricotXenC';
font-size: 16px;
line-height: 12px;
color: #84d4e5;
grid-template-areas:
"tooltiptop"
"tooltiparea"
"tooltipbot";
}
.tooltiptop { grid-area: tooltiptop; background-image: url(assets/dialoguetopbg.gif); background-repeat: no-repeat; height: 26px;}
.tooltiparea { grid-area: tooltiparea; background-image: url(assets/dialoguebg.gif); background-repeat: repeat-y;
padding-left: 30px; padding-right: 30px;}
.tooltipbot { grid-area: tooltipbot; background-image: url(assets/dialoguebottombg.gif); background-repeat: no-repeat;height: 26px;}


/*-----------VFI TEXT STYLING------------------*/

#titlev {
display: inline;
color: lightblue;
text-shadow: 0px 0px 4px lightblue, 0px 2px 9px blue;
position: relative;
top: 130px;
left: 603px;
width: 202px;
text-align: center;
}
#titlef {
display: inline;
color: lightgreen;
text-shadow: 0px 0px 4px lightgreen, 0px 2px 9px green;
position: relative;
top: 130px;
left: 714px;
width: 202px;
text-align: center;
}
#titlei {
color: #deb19f;
text-shadow: 0px 0px 4px #deb19f, 0px 2px 9px red;
position: relative;
top: 130px;
left: 813px;
width: 202px;
text-align: center;
}
.v {
color: lightblue;
text-shadow: 0px 0px 6px blue;
}
.f {
color: lightgreen;
text-shadow: 0px 0px 6px green;
}
.i {
color: #deb19f;
text-shadow: 0px 0px 6px red;
}


/*---------------SCROLLBAR STYLING=-----------------*/

/* width */
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background-image: url('assets/scrolltrack.gif');
border-left: 1px outset rgba(100, 100, 160, .5);
border-right: 1px outset rgba(100, 100, 160, .5);
}
/* Handle */
::-webkit-scrollbar-thumb {
background-image: url('assets/scrollthumb.gif');
border: 1px outset rgba(100, 100, 160, .5);
border-radius: 10px;
transition: border .3s ease-in-out;}
::-webkit-scrollbar-thumb:hover {
border: 1px outset rgba(158, 255, 229, 1);
}
::-webkit-scrollbar-thumb:active {
border: 1px solid rgba(158, 255, 229, 1);
}