/* This document contains the CSS for all of the features that will be demonstrated on live preview pages. Therefore, some of these elements will not appear on every
 * page. I will put a note to seperate where the "non-essential"/optional element styling begins. Please note that technically, many declarations here are
 * strictly aesthetic (border-box, the colors, fonts, etc.) but are essential in the sense that removing them will break the entirety of the live previews
 * I have created.*/


/* These load in the fonts you're hosting to style text elements later. */
@font-face {
    font-family: Alte;
    src: url(/LivePreview/AlteHaasGroteskRegular.ttf)
}
@font-face {
    font-family: Flowers;
    src: url(/LivePreview/FlowersKingdom.ttf);
}
/* The body styles essential elements such as the background of the entire page and the default color of text. Since we're not changing the font size,
 * we don't need to uniquely style <p> text because the body does it for us!*/
body {
    background-color: #70c1b3;
    color: #247ba0;
    font-family: Alte;
    
}
/* Here we are styling two types of heading text. */
h1 {
    color: #f25f5c;
    font-family: Flowers;
}

h2 {
    font-family: Flowers;
    color: #f25f5c;
}
/* Link styling. */
a {
    color: #f25f5c;
}
a:hover {
    color: #247ba0;
}
a:visited {
    color: #247ba0;
}
/* Styling what color highlighted text will be. */
::selection {
    color: #247ba0;
    background: #70c1b3;
}
/* We are styling the header element. */
header {
    border: 45px solid;
    margin: 1%;
    height: fit-content;
	text-align: center;
    color: #50514f;
    border-image: url(border.png) 42% round; /* If you are using your own border imager (rather than the one I'm using as an example,
                                              * you will probably have to adjust the % numbers.) */
    background-color: #ffe066;
    background-clip: padding-box; /* We need the background to clip at when the padding starts in order for the border-image selector to work
                                   * correctly. */
}
/* We are styling the footer element. */
footer {
    border: 45px solid;
    margin: 1%;
    height: fit-content;
	text-align: center;
    border-image: url(border.png) 42% round; /* If you are using your own border imager (rather than the one I'm using as an example,
                                              * you will probably have to adjust the % numbers.) */
    background-color: #ffe066;
    background-clip: padding-box; /* We need the background to clip at when the padding starts in order for the border-image selector to work
                                   * correctly. */
}
/* This contains everything between the header and footer in order to let the flexboxes work. */
.flexarea {
    width: 100hw; 
    height: 100hv;
    /* These make the two sections take up the entire width and height of your viewing device. 
     * "100hv" and "100hw" are the values that equal "fullscreen", basically. */
    display: flex;
    margin: auto;
    overflow: scroll;
}
/* The column on the right side of the page. */
.section1 {
    width: 85%;
    border: 45px solid;
    padding: 1%;
    margin: 1%;
    border-image: url(border.png) 42% round;/* If you are using your own border imager (rather than the one I'm using as an example,
                                              * you will probably have to adjust the % numbers.) */
    background-color: #ffe066;
    background-clip: padding-box; /* We need the background to clip at when the padding starts in order for the border-image selector to work
                                   * correctly. */
    
}
/* The column on the left side of the page. */
.section2 {
    width: 14%;
    border: 45px solid;
    padding: 2%;
    margin: 1%;
    border-image: url(border.png) 42% round; /* If you are using your own border imager (rather than the one I'm using as an example,
                                              * you will probably have to adjust the % numbers.) */
    background-color: #ffe066;
    background-clip: padding-box; /* We need the background to clip at when the padding starts in order for the border-image selector to work
                                   * correctly. */
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}
/* In order to have an image with responsive sizing on this side, we need to create a container for it. */
.s2img {
    width: 80%;
    vertical-align: middle;
}
/* Making images put with the s2img div fit correctly. */
.s2img img {
    width: 100%;
}
/* Container for the text. */
.s2text {
    width: inherit; /* This means it's going to use the size we specified in its parent element, "section2". */
}

/* After this line begins optional elements that could be added to your page. */

/* A scrolling box for writing out the content of your updates. */
.updates {
height: 20em;
	width: 35em;
	font-size: 1em;
	border: 30px solid black;
    border-image: url(borderUpdates.png) 42% round;
	margin: 0;
	overflow: scroll;
    background-color: #70c1b3;
    background-clip: padding-box;
    padding: 1%;
}
/* Styling images to lay in a nice grid format. Adjusting the amount of columns is possible, but I recommend using no more than five. */
.images {
	display: inline-block;
	columns: 3;
	padding: 2%;
	column-width: auto;
	text-align: center;
	vertical-align: top;
	width: 100%;
	height: auto;
}
.images img {
	width: 100%;
	height: auto;
	padding: 2%;
}
/* Styling the details element. */
details {
	width: 90%;
    height: max-content;
	padding: 2%;
  overflow: hidden; /* Prevents stuff from clipping out of the element. */
}
details::open {
	width: inherit;
    height: fit-content; 
	padding: 2%;
  overflow: hidden;
	background-color: transparent; /* Prevents stuff from clipping out of the element. */
}
summary::marker { 
	color: transparent;
}