/*RESET*/
* { padding: 0; margin: 0; box-sizing: border-box; }

/*GLOBAL VARS*/
:root{
--font-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--font-sans-serif: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
--font-monospace: Menlo, "Courier New", monospace;
--font-display: system-ui, sans-serif;
--color0: #000000;
--color0rgb: 0,0,0;
--color1: #FFFFFF;
--color1rgb: 255,255,255;
--color2: #090040;
--color2rgb: 9,0,64;
--color3: #471396; 
--color3rgb: 71,19,150;
--color4: #B13BFF;
--color4rgb: 177,59,255; 
--color5: #FFCC00; 
--color5rgb: 255,204,0; 
--color6: #00B8ED; 
--color6rgb: 0,184,237;
--color7: #F1F2F2;
--color7rgb: 241,242,242; 
--width-full: 100%;
--width-normal: 80em;
--width-medium: 60em;
--width-narrow: 40em;
--gap-xs: 5px;
--gap-sm: 10px;
--gap-md: 15px;
--gap-base: 20px;
--gap-lg: 25px;
--gap-xl: 30px;
--gap-xxl: 40px;
--gap-xxxl: 60px;
--gap-xxxxl: 80px;
--text-xs: clamp(0.79rem, 0.02vi + 0.79rem, 0.8rem);
--text-sm: clamp(0.89rem, 0.2vi + 0.84rem, 1rem);
--text-base: clamp(1rem, 0.44vi + 0.9rem, 1.25rem);
--text-md: clamp(1.13rem, 0.77vi + 0.94rem, 1.56rem);
--text-lg: clamp(1.27rem, 1.22vi + 0.98rem, 1.95rem);
--text-xl: clamp(1.42rem, 1.8vi + 1rem, 2.44rem);
--text-xxl: clamp(1.6rem, 2.56vi + 1rem, 3.05rem);
--text-xxxl: clamp(1.8rem, 3.56vi + 0.97rem, 3.81rem);
--text-xxxxl: clamp(2.03rem, 4.85vi + 0.89rem, 4.77rem);
}

/* DEFAULTS */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-sans-serif); font-weight: normal; color: var(--color0); line-height: 1.5; padding: 0; margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--color2) url(/assets/images/bg.svg); background-size: 100%; background-repeat: no-repeat; background-position: top; background-attachment: fixed; }
img { max-width: 100%; height: auto; }	
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 900; line-height: 1.25; margin: 0 0 var(--gap-base) 0; }
h1 { font-size: var(--text-xxxxl); }
h2 { font-size: var(--text-xl); margin-top: var(--gap-xxl); }
h3 { font-size: var(--text-md); }
h4,h5,h6 { font-size: var(--text-base); }
p,ul,ol,dl,table,figure,figcaption { font-size: var(--text-base); margin: 0 0 var(--gap-base) 0; }
p { margin: 0 0 var(--gap-xl) 0; }
ul { margin-left: var(--gap-lg); }
ul ul { margin-top: 0; margin-bottom: 0; }
ol { margin-left: var(--gap-lg); }
dt { font-weight: 700; }
hr { margin: 45px 0 30px 0; height: 5px; background: var(--color4); border: 0; }
small { font-size: var(--text-sm); }
blockquote { position: relative; font-family: serif; font-size: var(--text-lg); color: var(--color2); padding: 30px 30px 30px 60px; margin: 0 0 var(--gap-base) 0; opacity: 0.75; border-top: 1px solid var(--color2); border-bottom: 1px solid var(--color2); }
blockquote::before { content: "\275D"; position: absolute; left: 0; font-size: var(--text-xxl); color: var(--color2); line-height: 1; }
blockquote p { margin: 0; }
blockquote cite { font-size: var(--text-sm); }
figure { text-align: center; margin: 0 0 var(--gap-lg) 0; }
figure img { display: block; width: 100%; }
figcaption { font-family: var(--font-sans-serif); font-size: var(--text-sm); color: var(--color3); text-align: center; padding-top: 5px; }
code { font-family: var(--font-monospace); font-size: var(--text-sm); padding: 3px 5px; background: rgba(var(--color7rgb),0.75); }
pre { white-space: pre-wrap; border-radius: 13px; border: 1px dotted rgba(var(--color0rgb),0.3); margin: 0 0 var(--gap-base) 0; overflow: hidden; }
pre code { position: relative; display: block; padding: var(--gap-xl); }
audio { width: 100%; background: #555; }
time { font-weight: var(--text-sm); }
a { color: var(--color3); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
a:hover,a:focus { background: var(--color5); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.row-nav { padding: var(--gap-lg) 5vw var(--gap-base) 5vw; }
.row-header { padding: 5vw 5vw 7.5vw 5vw; }
.row-content { padding: calc(var(--gap-xxl) + 2.5vw) 5vw; background: rgba(var(--color1rgb),0.975); }
.row-content-features { background: rgba(var(--color6rgb),0.75); }
.nav, .header, .section, .footer { max-width: var(--width-normal); margin: 0 auto; }

/*PRIMARY NAV*/
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.push { margin-left: auto; }
.logo { font-size: var(--text-sm); font-weight: 700; color: var(--color7); text-transform: uppercase; }
.logo a { color: var(--color7); text-decoration: none; }
.logo a:hover, .logo a:focus { text-decoration: none; }

/*HEADER*/
.header h1, .header p { color: var(--color1); }
.header p { font-size: var(--text-lg); font-weight: 300; }

/*FEATURES*/
.features { display: grid; gap: calc(2.5vw + 20px); grid-template-columns: 1fr; }
.features .item {position:relative;padding: var(--gap-xl); background-color:var(--color1); border-radius: 0 128px 0 64px; box-shadow: 4px 4px var(--color3); transition: 0.5s; overflow: hidden;}
.features .item {background: linear-gradient( rgba(var(--color1rgb),0.9), rgba(var(--color1rgb),0.5) ); }
.features .item:hover {background: linear-gradient( rgba(var(--color1rgb),0.9), rgba(var(--color1rgb),0.65) ); border-radius: 0 96px 0 32px; box-shadow: 5px 5px var(--color2);}
.item1-image, .item2-image {position: absolute; right: -20px; bottom: -20px; width:42%; height: 100%; opacity:0.35;}

.item1-image {background: url(/assets/images/ee-logo.svg) no-repeat 100% 100%; opacity:0.35;}
.item2-image {background: url(/assets/images/castle-logo.svg) no-repeat 100% 100%; opacity:0.1; background-size: contain;}


.feature-heading { margin-top: 0; margin-bottom: var(--gap-lg); }
.feature-heading::before { content: "\276D  "; }
@media only screen and (min-width: 1024px) {
.features { grid-template-columns: 1fr 1fr; }
}
 
/*ARTICLES*/
.posts-heading { font-size: var(--text-xxl); text-align: center; margin: 0 auto var(--gap-xxl) auto; }
.posts-heading::before { content: "\276C  "; }
.posts-heading::after { content: "  \276D"; }
.posts-list { display: grid; gap: var(--gap-xl); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); list-style: none; margin-left: 0; }
.posts-list li { }
.posts-list a { display: block; width: 100%; height: 100%; font-size: var(--text-md); font-weight: 700; text-decoration: none; padding: var(--gap-xl); background: rgba(var(--color6rgb),0.1); transition: 0.25s; border-radius: 13px; }
.posts-list a:hover, .posts-list a:focus { background: var(--color5); }

/*ARTICLE*/
.article-body { max-width: var(--width-medium); }

/*LINKS*/
.cta {text-align: center; padding: 5vw 5vw 0 5vw; }
.cta a { display: inline-block; height: 48px; font-size: var(--text-base); line-height: 48px; padding: 0 3rem; font-weight: 700; text-decoration: none; color: var(--color0); background: var(--color5); box-shadow: 4px 4px var(--color3); margin: 0 auto; border-radius: 13px; transition: 0.15s; }
.cta a::before {content: "\0040  ";}
.cta a:hover, .cta a:focus {color: var(--color1); background: var(--color3); box-shadow: 4px 4px var(--color5);}


/*ALERTS*/
.alert { padding: var(--gap-sm); margin-bottom: var(--gap-lg); }
.alert-success { background: #FFFF00; }

/*UTILITIES*/
.skiplink { position: absolute; top:-999em; }
