:root{ --gap: 1rem; }

::selection{ color: black; background-color: #feecbc;}

@font-face { font-family: 'FFF Forward';
	src:
	  local("fff-forward"),
	  url("/fonts/fff-forward.ttf") format("truetype"); 
	  font-display: swap; }

html{ scroll-behavior: smooth;}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; }

.skip-link:focus { left: 1rem; top: 1rem; background: white; padding: 0.5rem; border: 2px solid black;}

/*Base Elements*/ 

body{ margin: 0; font-family: 'Lexend', sans-serif; font-weight: 300; line-height: 1.4;}

body{  --s: 70px; /* control the size */
    --c: #4a4b4dd1;
    
    --_l: #0000 46%,var(--c) 47% 53%,#0000 54%;
    background:
      radial-gradient(100% 100% at 100% 100%,var(--_l)) var(--s) var(--s),
      radial-gradient(100% 100% at 0    0   ,var(--_l)) var(--s) var(--s),
      radial-gradient(100% 100%,#0000 22%,var(--c) 23% 29%, #0000 30% 34%,var(--c) 35% 41%,#0000 42%)
      #feecbc;
    background-size: calc(var(--s)*2) calc(var(--s)*2);}

h1 { font-size: 1.5rem; }

h2 { font-size: 1.25rem; }

header{ background: #feecbc; margin-bottom: calc( var(--gap) *2); border-bottom: 4px dashed black;}

ul.nav-icons, aside.right-sidebar ul, aside.left-sidebar ul { padding-left: 0.25rem; list-style-type: none; }

ul.nav-icons li, aside.right-sidebar ul li, aside.left-sidebar ul li { padding-left: 1.25rem; background-image: url("/images/paintball.png"); background-position: left center; background-size: var(--gap); background-repeat: no-repeat; margin-bottom:0.25rem;}

aside{ width: 300px;}

main { flex: 1; order: 2; width: calc(100% * .4); ul li, ol li{ margin-bottom: 0.5rem;}}

article :is(h2,h3,h4,h5) { -webkit-font-smoothing:var(--gap);}

article p {gap:calc(var(--gap) *2);}

footer { margin-top: var(--gap); text-align: center; order: 4; width: 100%; }

footer > *, h1.headings, h2.headings, .img-center, .date, .right-sidebar img, p, .banner { margin-bottom: var(--gap); }

a { color: inherit; font-weight: 500; text-decoration: 3px solid underline #FF5482; }

b, strong {font-weight: 500;}

a:hover{ font-weight: bold;}

img, figure { max-width: 100%; height: auto;  }


/*Classes*/

.header-centered span,h1,h2,h3,h4,h5 { padding: 0; margin: 0; font-family: 'FFF Forward', sans-serif; -webkit-font-smoothing: antialiased;color:#FF5482;text-transform:uppercase; -webkit-text-stroke: 1px black;}

.inner-header { display: flex; gap: calc(var(--gap) * 2); width: 100%; justify-content: center; }

.header-centered{ display: flex; align-items: center; a{ text-decoration: none; color: inherit;}; }

.header-centered span{ font-size: 3rem; color: #FF5482; background-image: linear-gradient(180deg, #FF5482 , #FFCB78 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 

.banner { width: 100%; padding: 1rem 1rem 0 1rem; margin-bottom: var(--gap); }

.headings, article :is(h1) { padding: .5rem; background: #feecbc; text-align: center; border: 2px solid #000; }

.container { margin: 0 auto; max-width: 57rem; box-shadow: 20px 0 20px black; margin-bottom: calc( var(--gap) *2) }

.flex-content { display: flex; flex-wrap: wrap; background: #feecbc; border: 14px solid #feecbc; outline: 10px solid #4a4b4dd1; }

.box { overflow-wrap: break-word; outline: 4px dashed black; background: white; }

.left-sidebar, .right-sidebar, main, footer, header { padding: var(--gap); } 

.left-sidebar, .right-sidebar { width: calc(100% * .23); }

.left-sidebar { order: 1; margin-right: calc(var(--gap)); }

.right-sidebar { order: 3; margin-left: calc(var(--gap)); }

.footer-buttons { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; a{line-height: 0; text-decoration: none;} align-items: center;}

/*Mobile Responsiveness*/

@media only screen and (max-width: 800px) {

	body { font-size: calc(var(--gap)); }

	.flex-content { flex-wrap: wrap; }

	.box { margin-bottom: var(--gap); }

	h1 { font-size: 1.5rem; }

    h2 { font-size: 1.2rem; }

	main { order: 1; }

	footer { margin: 0; }

	aside { width: 100%; }

	img { max-width: 100%; height: auto; }

	ul.pokeball-icons li, aside.right-sidebar ul li { padding-left: calc(1.25rem * 1.23); background-size: calc(var(--gap) * 1.23); }

	.header-centered span { font-size: var(--gap); }

	.left-sidebar { order: 2; }

	.right-sidebar { order: 3; }

	.left-sidebar, .right-sidebar { width: 100%; margin: 0 auto var(--gap); }
}