/* FONTS  */

@font-face {
  font-family: tos;
  src: url("https://braigwen.neocities.org/fonts/TOS_Title.ttf");
}




:root {
    
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */
    
    --mainlink: blue; /*Content link color*/
    --mainlinkhover: LightSlateGrey; /*Content link hover color*/
    --textcolor: black ; /*Body text color*/

/*Fonts*/
    --body-font: Arial, sans-serif; /* Body text font */
    
    


/* The div that contains the actual stuff written on the page. */
.content {                  
    margin: 5%;
    text-align: center;
    
}



body { 
    color: var(--textcolor);
  font-family: "Arial", sanserif;
}


main img { 
    margin: 5px; 
    max-width:90%;
}

footer {
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
}

@font-face {
    font-family: "Eadui"; 
    src: url("/Eadui.ttf") format("truetype");
}





h1 {
  font-family: arial;
  color: navy;
  text-shadow: 1px 1px 2px #7a766d,b 0 0 25px #7a766d, 0 0 5px #7a766d;
  font-size: 55px;
  letter-spacing: 5px;
}

h2 {
  font-family: arial;
  color: navy;
  text-shadow: 0px 0px 3px #7a766d;
  font-size: 40px;
  letter-spacing: 2px;
}

h3 {
  font-family: arial;
  color: navy;
  font-size: 30px;
  letter-spacing: 2px;
}


p{
  font-family: arial;
  color: black;
  font-size: 20px;
}


/* blockquote {
    border-left: 1px solid var(--main);
    padding-left: 0.5em;
    margin-left: 1em;
    font-style: italic;
} */

button {
    transition: all .3s ease-in-out;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

button:hover, .active {
    filter: brightness(140%);
}


mark {
  background: #e9fdd0;
  padding: 1px 5px;
  margin: 0 3px;
}


.rainbowtext {
  background-image: linear-gradient(to right, #e91e63, #ffc107, #009688, #673ab7, #e91e63);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;}

/*divs*/



  #container{
    width: 99%;
    overflow:auto;
    overflow-x:none;
    background: aliceblue;
    border: 2px solid blue;
    border-radius: 105px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;}
    

  #bigbox{
    width: 80vw;
    overflow:auto;
    overflow-x:none;
    background: #FFEBA6;
    border: 20px#EDBA13;
    outline: 10px solid #EDBA13;
    border-radius: 100px;
    margin: 0 auto;}
    
  #boxround{
    width: 300px;
    overflow:auto;
    overflow-x:none;
    background: seagreen;
    border: 20px seagreen;
    outline: 10px solid seagreen;
    border-radius: 13px;
    margin: 0 auto;
    margin-top: 70px;
    margin-bottom: 70px;}

/*Styles the sidebars. They're both flex items as well as flex containers.*/
.sidebar-left, .sidebar-right {
    width: 15vw;
    height: 85vh; /* !!! Remember, padding is included in this height. Do not add padding in the main divs !!! */
    overflow: visible; /* auto: Enables scrolling if the content overflows; visible: to help with the border */
    display: flex;
    flex-direction: column; /* Stack children vertically */   
}

/*Styles the actual divs that have the navigation links inside them*/
.leftbox, .rightbox {
    flex: 1; /* This allows boxes to grow and fill the space */
    margin: 5px; /* Optional: for some space between the boxes */    
}

#stickynote1 {
    width: 180;
    margin-bottom: 20px;
    position: fixed;
    z-index: 100000000000;
    top: 30px; /** position from top of screen **/
    left: 30px; /** position from left of screen **/
}
 
#stickynote1 {
    width: 300; /** width of your sticky note **/
    background-color: black /** background colour **/
}
 
.dragstickynote1 {
    font-family: consolas;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
    background-color: black;
}
 
.closestickynote1 {
    cursor: pointer;
    margin-left: 200px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-family: arial;
    font-size: 10px;
    position: absolute;
    text-align: center;
    float: right;
    background-color: rgba(255,255,255,0.4);
}
 
 /*coded by yukoki - sticky note style start*/
.stickynotecontent {
    padding: 10px;
    font-family: consolas;
    font-size: 10px;
}
 
.stickynotecontent b,strong {
    color: #000000; /** colour of bolded text **/
}
 
.stickynotecontent i,em {
    color: #666666; /** colour of italic text **/
}
 
.stickynotecontent a {
    text-decoration: underline;
    color: #666666; /** colour of linked text **/
}
 
.stickynotecontent a:hover {
    color: #aaaaaa; /** colour of hovered linked text **/
}
/*coded by yukoki - sticky note style end*/









em{
  color: darkblue;
text-shadow: 0px 0px 5px aliceblue;
}



/* BLOCKQUOTE */

blockquote.pull {
	background-color: #e1d2a6;
	padding: 2em 2em 2em 2em;
	padding-top: 2.2em;
	text-align: justify;
	font-size: 1.2em;
	border: 4px solid #c2a77c;
	margin: 0em 0.8em 0.8em 0em; /* because i'm floating the quote to the left, i've added a margin to every side except that one */
	width: 20%;
	border-radius: 1em;
	color: #876c41;
	position: relative;
	float: left; /* this can be changed, but be sure to change the corresponding margins above such that there's no margin on the right (and a 0.8em margin on the left) if you do that */
}

/* the below two items just style how links appear within your blockquote, including within the source/citation. useful if you're linking to another page, as i've done here, as you can see */
blockquote.pull a {
	text-decoration: none;
	border-bottom: 1px solid #c2a77c;
	color: #876c41;
	border-radius: 3px;
	transition: ease 1s all;
}
blockquote.pull a:hover {
	border: 0px;
	background-color: #c2a77c;
}

/* this section concerns the quotation marks resting in the corners of the quote container. trebuchet ms works well for them, but of course, they can be any color you want. the size can change, but that requires so much fiddling with margins that it frankly doesn't seem worth it... */
blockquote.pull::before,
blockquote.pull::after {
	font-family: trebuchet ms;
	font-size: 4em;
	color: #c2a77c;
	position: absolute;
}

blockquote.pull::before {
	content: "";
	top: -0.1em;
	left: 0em;
}

blockquote.pull::after {
	content: "";
	bottom: -0.6em;
	right: 0.1em;
}

/* i am here using the <small> tag within the <blockquote> tag as a signifier for the citation or source of the pullquote, whatever you want to call it. this styles that. */
blockquote.pull small {
	text-align: right;
	font-size: 0.7em;
	display: block; /* important */
	font-style: italic;
	font-weight: bold;
	margin: 0.5em 0em 0em 0em;
	color: #876c41;
}

/* this adds a dash before the source of the quote, preventing you from having to do so manually with each quote */
blockquote.pull small::before {
	content: "- ";
}


/* mouseover hover */



  #text09 { 
display: inline-block; 
transition: .2s ease; 
} 
#text09:hover { 
transform: translateY(-20%); 
  cursor:help;
}
  
#text09 a { 
display: inline-block; 
transition: .2s ease; 
} 
#text09 a:hover { 
transform: translateY(-20%); 
} 








blockquote.quoth {
	border-radius: 1em;
	padding-top: 0.5em;
	background-color: #38355c;
	width: 80%; /* here, the width has been set to 80% of the available space. if you, perchance, would like a (slightly) smaller or larger quote, change this, of course - the quote will remain centered on the page. it is possible to float it to the left or right by adding a different width, alongside float:<left/right> in the CSS.*/
	margin: 0.5em auto; /* if you're floating the quote to the left or right, change this to margin:0.5em; you may also want to play with the margin-right and margin-left value to align it with the side of the page better depending on where it is floated */
	position: relative;
}
/* this creates the curled quotation mark in the corner of the box; i've found this works best if it stays with the (websafe) font trebuchet ms, and it is sized properly for that. */
blockquote.quoth::before {
	content: " ";
	font-family: trebuchet ms;
	position: absolute;
	opacity: 0.2; /* as you could probably tell, the quotation mark itself isn't entirely opaque. */
	font-size: 20em;
	top: -0.2em;
	left: 0em;
}

/* presumably a long quote *will* have paragraphs, so you'd better provide some formatting for them! */
blockquote.quoth p {
	margin: 1em;
	color: #cad2e3;
}

/* the below *small* tag actually styles the bottom bar of the quote which displays the source of the words... */
blockquote.quoth small {
	display: block;
	background: #201e36;
	padding: 0.4em 0;
	width: 100%;
	border-radius: 0 0 1em 1em;
	color: #79a3fc;
	margin: 0 auto 0 0;
	text-align: center;
}

/* since the colors and such used in your large blockquotes are no doubt unique, you might want to change the link colors within them, too, including those in that *small* tag we're using as the citation, just in case it clashes with your theme */
blockquote.quoth small a,
blockquote.quoth a {
	color: #b279fc;
	text-decoration: underline solid;
	transition: ease 1s all;
}

blockquote.quoth a {
	color: #ad6b00;
}

blockquote.quoth a:hover {
	color: #ad6b00;
	background-color: #f0e8bb;
}