/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/
/*ABOUT THIS FILE*/
/*This is a CSS file. Inline styling can be inefficient, so we use CSS to make styling HTML a little easier.*/
/*I left comments to make it easy to follow along, but the best way to learn is to see what happens when you change things.*/
/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/

/*Do NOT modify anything below this line.*/
/*STANDARDIZATION -- START*/
/*This section is to remove the quirks of many common HTML tags so that they do not behave in an unexpected and annoying ways when applying further styling.*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, img, small, strike, strong, b, u, i, center, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, menu, section, summary, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

img { vertical-align: bottom; max-width: 100%; object-fit: contain; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

*::before, *::after {
    pointer-events: none;
}

/*If items with float applied start to behave strangely, add this class to the tag*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*STANDARDIZATION -- END*/
/*Do NOT modify anything above this line.*/

/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/
/*Everything modified below this line will effect the entire page, proceed with caution.*/
/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/

/*FOUNDATION -- START*/

/*These are variables you can use to quickly change values on your page. For example, if you want to change every instance of red on your site to blue, instead of changing each tag individually, you can just swap hexcodes in the root.

You can also change the names to better suit your needs by doing Find and Replace All.
ie "--pink" ==> "--primary1-color"
*/

:root {
    --pink: #FDD2E9;
    --offwhite-pink: #FFF2F8;
    --red: #FF629E;
    
    --orange: #FFD3AD;
    --yellow: #FFFA99;
    
    --green: #D9F4B9;
    --offwhite-green: #F4FBE5;
    
    --blue: #A1E6FD;
    
    --purple: #D7C4E8;
    
    --rainbow: linear-gradient(to right, var(--pink),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple) );
    
    --body: #A39089;
    
    --sidebar-width: 200px;
}

/*Then, we will style the html and body tags. Anything that should universally be applied to your tags should be applied here.*/

html {
    font-size: 10pt; 
    /* In other tag styling, you can use rem instead of pt or px as the unit for font size. */
    /*If you make the font size here larger or smaller, any other measurement using rem as the unit will also be changed.  For example, in this case, 2rem will be 20pt. If you change the font size to 6pt, 2rem will be 12pt.  */
    
    line-height: 1.5;
}

body {
    font: 1rem "Verdana", sans-serif;
    letter-spacing: 1px;
    color: var(--body);
    width: 100vw;
    min-height: 100vh;
    background: var(--offwhite-green);
    background-image: url(assets/layout/tile.png); /*Change background here.*/
    background-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

/*SKELETON*/
/*This is to establish the base structure for the layout.*/
/*We have a header, a footer, and two sidebars. This is a fairly typical 3-column layout.*/


.wrapper {
    max-width: 1000px;
    margin: 1rem;
    display: flex;
    flex-flow: row wrap;
    border: white 1px solid;
    border-radius: 6px;
    padding: 12px;
    background: var(--offwhite-pink) url("assets/layout/pinkdot.png");
    background-size: 15px;
}

#main {
    width: calc(100% - (var(--sidebar-width) * 2) );
    background: white;
    background-clip: border-box;
    border: var(--pink) 1px dashed;
    border-width: 0 1px;
}

.sidebar {
    width: var(--sidebar-width);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    background: var(--pink);
    overflow-x: hidden;
}

#header, #footer {
    width: 100%;
    height: 200px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
#footer {
    /* If a selector has styling applied to the same property more than once, whatever rule is closest to the bottom of the document will override all rules that preceed it.*/
    height: unset;
}

#main,
#header,
#footer,
.sidebar {
    padding: .5rem;
}

iframe {
    width: 100%;
    display: block;
    margin: 0 auto;
}

a, a:active, a:visited { color: var(--red); }
a:hover { color: var(--purple); }

h1, h2, h3 { margin-bottom: .5rem; }

h1 {
    max-width: 100%;
    font: italic bold 2rem "Times New Roman";
    background-image: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
}

h2 {
    text-transform: uppercase;
    font-weight: bold;
    background: var(--blue);
    text-shadow: 1px 1px white, 1px -1px white, -1px 1px white, -1px -1px white;
    padding: 2px;
}

h3 {
    font-weight: bold;
    color: var(--blue);
}

p {
    margin-bottom: 1rem;
}

b { 
    font-weight: bold;
}

i { 
    font-style: italic;
}

hr {
    color: var(--pink);
    border-style: solid;
}

::selection {
    color: var(--red);
    background: var(--offwhite-pink);
    text-shadow: none;
}


/*Scrollbars*/
* { scrollbar-color: var(--blue) var(--green); }

*::-webkit-scrollbar { width: 12px; }
*::-webkit-scrollbar-track { background: var(--green); }
*::-webkit-scrollbar-thumb { background-color: var(--blue); }


/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/
/*Everything modified above this line will effect the entire page, proceed with caution.*/
/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/

/*HEADER & FOOTER -- START*/
/*Styling for the header and footer. Some of could have been applied in the SKELETON section, but for readability, I decided to do it here instead.*/

#header, #footer { color: white; }

/*Top banner image. You can also change it by replacing the image in the folder.*/
#header {
    background: url(assets/layout/banner.jpg) no-repeat center;
    background-size: cover;
}
#footer {
    background: url(assets/layout/banner.jpg) no-repeat bottom;
    background-size: cover;
}

#header h1 {
    color: transparent;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 2px;
    word-wrap: break-word;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-bottom: 1ch;
    padding-right: 1ch;
    filter: drop-shadow(1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px 1px white) drop-shadow(-1px -1px white);
    background: var(--rainbow);
    -webkit-background-clip: text;

}

@keyframes marquee {
    
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
    
}
.marquee {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 0;
    color: white;
}
.marquee-content {
    width: 100%;
    flex-shrink: 0;
    border: 1px solid white;
    border-width: 1px 0;
    padding: 2px 0;
}
.marquee-content * { display: inline-block; margin: 0; vertical-align: middle; }

.marquee {
    animation: marquee linear infinite;
    animation-duration: 15s; /* Change speed here */
}
.marquee:hover { animation-play-state: paused; }


/*HEADER & FOOTER -- END*/

/*SIDEBARS -- START*/
/*Styling for items on the inside of either sidebar.*/

.sidebar .section {
    width: 100%;
    padding: 6px;
    margin-bottom: .5rem;
    background: white;
    border-radius: 10px;
}
.sidebar .section:last-child {
    margin-bottom: 0; 
}

.sidebar h2 {
    border-radius: 6px 6px 0 0;
    padding: 3px;
    background: var(--rainbow);
}

.sidebar ul {
    list-style: none;
}
.sidebar ul li {
    margin: .5rem 0;
}
.sidebar ul a { text-decoration: none; }
.sidebar ul a:hover li { background: var(--offwhite-green); }

.icon {
    margin: 0 2px;
    width: 20px;
}

.updates {
    background: var(--offwhite-green);
}
.updates ul {
    font-size: .8rem;
    padding: 6px;
    list-style: none;
}
.updates li { 
    padding-right: 20px;
    margin-bottom: 4px;
}
.updates span { 
    font-weight: 600;
}

/*SIDEBARS -- END*/

/*MAIN -- START*/
/*Styling for main content.*/

em { 
    font-style: normal;
    color: white;
    font-weight: 600;
    text-shadow: 1px 1px var(--body), 1px -1px var(--body), -1px 1px var(--body), -1px -1px var(--body);
    filter: drop-shadow( .5px .5px var(--pink) ) drop-shadow( .5px -.5px var(--pink) ) drop-shadow( -.5px .5px var(--pink) ) drop-shadow( -.5px -.5px var(--pink) );
}
em:nth-of-type(2n) { 
    filter: drop-shadow( .5px .5px var(--yellow) ) drop-shadow( .5px -.5px var(--yellow) ) drop-shadow( -.5px .5px var(--yellow) ) drop-shadow( -.5px -.5px var(--yellow) );
}
em:nth-of-type(3n) { 
    filter: drop-shadow( .5px .5px var(--blue) ) drop-shadow( .5px -.5px var(--blue) ) drop-shadow( -.5px .5px var(--blue) ) drop-shadow( -.5px -.5px var(--blue) );
}
em:nth-of-type(4n) { 
    filter: drop-shadow( .5px .5px var(--green) ) drop-shadow( .5px -.5px var(--green) ) drop-shadow( -.5px .5px var(--green) ) drop-shadow( -.5px -.5px var(--green) );
}

.imgbox {
    max-width: 50%;
    background: var(--offwhite-pink);
    padding: 6px;
    border-radius: 6px;
    margin: 2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*MAIN -- END*/

/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/
/*Media Query*/
/*∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴*/

@media screen and (max-width: 800px) {
    .sidebar, #main {
        width: 100%;
    }
    .sidebar {
        flex-flow: row nowrap;
        align-items: stretch;
        justify-content: space-between;
    }
    .sidebar .section {
        width: unset;
        margin-bottom: 0;
        margin-left: .5rem;
    }
    .sidebar .section:first-child {
        margin-left: 0;
    }
}