/********** Reset **********/

* {border:0px; margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; box-sizing:border-box; font-family:'Yantramanav',sans-serif;}
html, body {min-width: 360px; height: 100%;}
p, li {
    line-height: 125%;
    text-align: justify;

}
h1, h2, h3, h4, h5, h6
{
    text-shadow: 0 1px 2px #000;
}

/********** Animations **********/

/********** Fonts **********/

/********** Style **********/

:root {
    --theme-width: 960px;
    --theme-colour-light: #ffd080;
    --theme-colour-dark: #bd9c60;
    --theme-colour2-light: #ff0080;
    --theme-colour2-dark: #800040;
    --theme-colour-font: #e0e0e0;
    --theme-colour-font-dark: #808080;
    --theme-colour-background1: #202022;
    --theme-colour-background2: #161618;

    --font-heading1: "Cinzel Decorative", serif;
    --font-heading2: "Ephesis", cursive;
    --font-content: 'Yantramanav', sans-serif;
    --font-monospace: 'Share+Tech+Mono', monospace;
}

*::selection {background: #ff0080;}

body {
    background: url("assets/bg3blur.jpg") no-repeat fixed;
    background-size: cover;
}
body .col { max-width: var(--theme-width); display: block; margin-right: auto; margin-left: auto; }

hr {
    max-width: var(--theme-width);
    height: 4px;
    margin: auto;
    border-top: solid 1px var(--theme-colour-font-dark);
    border-bottom: solid 1px var(--theme-colour-font-dark);
}

nav {
    background: var(--theme-colour-background2);
    border-bottom: 4px solid var(--theme-colour2-dark);
}
nav .flex { display: flex; justify-content: center; flex-wrap: wrap; flex-grow: 1;}
nav a { display: inline-block; flex: 1 1 0px; padding: 16px 24px;align-content: center; text-align: center; text-decoration: none; color: var(--theme-colour-font);}
nav a:hover { color: var(--theme-colour-light); background: var(--theme-colour-background1);}

header {
    background: #16161880;
    backdrop-filter: blur(6px);
    padding: 80px 0 80px 0;
}
header h1 { color: var(--theme-colour-font); text-align: center; font-size: 6em; font-family: var(--font-heading1); font-weight: normal; }
header h2 { color: var(--theme-colour-light); text-align: center; font-size: 2em; font-family: var(--font-heading2); font-weight: lighter; }

header .socials {display: flex; justify-content: center; gap: 12px;}
header svg { width:24px; fill: var(--theme-colour-light); }
header svg:hover { fill: var(--theme-colour-light); }

main {  }
main .col {
    /* background: #ffffff80; */
    /* backdrop-filter: blur(10px); */
    padding: 60px 30px 60px 30px;
    border-top: none;
    border-bottom: none;
}
main h1 {
    font-family: var(--font-heading);
    font-size: 4em;
    text-align:
    center; padding: 0 0 60px 0;
    color: var(--theme-colour-light);
}
main h2 {
    padding: 30px 0 10px 0;
    color: var(--theme-colour-light);
}
main p {
    padding: 0 0 30px 0;
    text-align: justify;
    color: white;
    text-shadow: 0 1px 2px black, 0 -1px 2px black, -1px 0 2px black, 1px 0 2px black;
}
main a {
    color: #000;
}

main ul li {
    padding: 0 0 20px 0;
}

ol, ul {
    padding: 0 2rem 0 2rem;
    list-style-position: inside;
}

ol li {
    counter-increment: (oli);
}

ol li:before {
    content: counter(oli);
    display: inline-block;
    min-width: 2rem;
    color: var(--theme-colour);
}