/* FONTS  */

@font-face {
  font-family: whitestorm;
  src: url("/fonts/whitestorm.ttf");
}

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

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




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

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


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



body {
 background-image: url('https://www.publicdomainpictures.net/pictures/20000/velka/seamless-paper-texture.jpg');
  font-family: "Texturina", serif;
}

/*Styles the "main" element, the middle div in which each page's actual content is displayed.*/
main {
    width: 70vw; /* 70% of the viewport width */
    height: 80vh; /* !!! Remember, padding is included in this height. Do not add padding in the main divs !!! */
    overflow-y: auto; /* Scrolls only vertically */
    margin: auto 2%; /* topbottom leftright */
}

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

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


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

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

h3 {
  font-family: imfell;
  color: black;
  font-size: 30px;
  letter-spacing: 2px;
}

/* 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;
}

p {
  font-family: "Texturina", serif;

}

highlight {
background:#7ab576;
border-radius:10px;  
}

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

/*divs*/



#container { 
    max-width: 800px;
    padding: 10px;
    margin: 25px auto;
    display: flex;
    gap:15px;
    background: #195230 
}

  #bigbox{
    width: 70vw;
    overflow:auto;
    overflow-x:none;
    background: #f5efcb;
    border: 20px#f5efcb;
    outline: 10px solid #f5efcb;
    border-radius: 13px;
    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*/




/* Styles all the boxes with the cute leafy border and green background */
.greenbox {
    border: 5px solid transparent; /* Actual, solid border on top of which the image is placed */
    /*border: 85px solid transparent; */
    border-image-source: url(navborder250.png); /* Square image 1000px */
    border-image-slice: 250; /* 1000/4 = 250. Each side is divided in 4 chunks. 2 of those are angles and inner 2s are repeated borders. */
    border-image-width: 10; /* The bigger it is the bigger the image on the transparent border will be!! Too big and it will conver the contents of the div */
    border-image-outset: 4 3 2 3; /* top, right, bottom, left. How much the image can extend outside of the div. Yeah idk this just works well with my image. */
    border-image-repeat: round; /* "round: the image tiles to fill the area, and is rescaled if necessary to avoid dividing tiles." Src: https://css-tricks.com/almanac/properties/b/border-image/ */
    background-color: #cbea9d;
}






    
    #greenbox {
    border: 10px solid transparent;
    border-image: url(https://braigwen.neocities.org/graphics/navborder250.png) 30 round;
      padding: 60px;
    border-image-slice: 250;
    border-image-width: 10;
    border-image-outset: 4 3 2 3;
    border-image-repeat: round;
    background-color: beige;
    width: 80%
}    





/* NAVLINKS */
#navlinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: flex-start;
}

#navlinks a {
    background-color: lavender;
    color: var(--background);
    padding: 8px;
    margin: 5px;
    border-radius: 20px;
    text-decoration: none;
}


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;
}