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

:root {
    --site-black: #262626;
    --site-white: #ece2eb; /* previously #eee */
    --star: rgb(0, 89, 255);
    --code: rgb(0, 167, 0);
    --h2width: 17rem;
}
body {
    margin: 0;
    font-family: 'Montserrat', 'segoe ui', sans-serif;
    background-color: var(--site-white);
    background-color: #273043;
    color: var(--site-black);
}

header#navbar {
	position: fixed;
	z-index: 100;
	width: 100%;
	top: -110px;
	transition: top 0.4s;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	box-shadow: 0 3px 3px #4040402e;
}
header#navbar a,
footer#site-footer a {
    text-decoration: none;
    color: var(--site-white);
    transition: .5s;

    &:hover {
        color: orangered;

        & span {
            transform: scale(1.5) rotate(216deg) translate(1px, -3px);
            color: var(--star);
        }
    }

    & span {
        display: inline-block;
        transition: 0.5s;
    }
}


#navbar,
#site-footer {
    color: var(--site-white);
    background-color: var(--site-black);
    padding: 1em;
    font-family: 'Montserrat', 'segoe ui', sans-serif;
    font-size: clamp(15px, 1vw, 20px);
}
#navbar > a {
    margin-right: 2em;
}

#navbar ul {
	list-style-type: none;
	padding: 0;
	display: inline-flex;
	gap: 1.5em;
	margin: 1em 1em 0 0;
}
.page-container {
    min-height: 100vh;
    position: relative;
    padding-bottom: 7em;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: .8em;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 2em;
}


 /* -------- LIST PAGE styles ---------- */

.list-page {
    max-width: 1800px;
    margin: 0 auto;
    padding-inline: 1em;
}

.list-layout {
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;

    & > a {
	display: block;
	background-color: #636b87;
	color: #eff6ee;
    }
    & > a:hover {
        background-color: #f02d3a;
    }
    & h2 {
        margin: 0;
    }
    & li {
        padding: 1em;
        position: relative;
        height: 100%;
    }
}

.pageNo {
    position: absolute;
    inset: 0;
    font-weight: bold;
    font-size: 9em;
    line-height: 1;
    text-align: center;
    opacity: .14;
    overflow: hidden;
    outline: 1px solid black;
}
.pageNo span {
    display: block;
    transform: rotate(-10deg);
}
/* body:not(.scraps) .pageNo {
    display: none;
} */

/* ----------- HOME PAGE ----------- */

@property --shadow {
    syntax: "<length>";
    initial-value: 30vw;
    inherits: true;
}

@property --c1 {
    syntax: "<color>";
    initial-value: #010157;
    inherits: true;
}

@property --c2 {
    syntax: "<color>";
    initial-value: #ff0;
    inherits: true;
}

@property --a1 {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@property --a2 {
    syntax: "<angle>";
    initial-value: 7deg;
    inherits: true;
}

@property --a3 {
    syntax: "<angle>";
    initial-value: 10deg;
    inherits: true;
}

body.home {
    background-color: hsl(240, 100%, 20%);
    background-image: 
    radial-gradient(circle at center bottom, var(--c2) 0px 20vmax, #000),
    radial-gradient(circle at center bottom, #006 0px 10vmax, transparent 60px),
    repeating-conic-gradient(at center bottom, var(--c1) var(--a1) var(--a2), #000066 var(--a2) var(--a3));
    background-blend-mode: color-burn, normal, normal;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;

    animation: 
      dawn 8s ease-out  both,
      rotate 8s linear 1 both;
}

@keyframes dawn {
    from {
        --shadow: 0vw;
        --c1: #010157;
        --c2: #000;
    }
    
    to {
        --shadow: 210vw;
        --c1: #004;
        --c2: #fff;
    }
}

@keyframes rotate {

    to {
        --a1: 17deg;
        --a2: 20deg;
        --a3: 23deg;
    }
    
}

.home h1 {
    position: absolute;
    margin: 0;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    font-size: max(60px, 16vw);
    line-height: .5;
    color: #0404be;
}
.home h1 small {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: max(15px, 3vw);
    text-transform: uppercase;
    letter-spacing: 1em;
    color: #2d6afb;
}

.home h1 + ul {
	padding: 1.5em 1em 2em 1em;
	list-style-type: none;
	display: flex;
	justify-content: center;
	gap: 3em;
	font-size: 1.2em;
	font-weight: 500;
	text-transform: uppercase;
}

@media screen and (orientation: portrait) and (max-width: 900px) {
    .home h1 + ul {
        flex-direction: column;
        /* justify-items: center; */
        height: 80vh;
        align-items: center;
    }
}

.home :is(header, footer) {
    display: none;
}
.home a {
    color: #2d6afb;
    font-size: 1.25em;
}

/* ------- CODE BLOCKS ----------- */

pre, code {
    font-family: 'Space Mono', 'Source Code Pro';
}

pre {
    display: inline-block;
    padding: 1em 2em 1em 1em;
    border-radius: 3px;
    transition: transform width 350ms ease-out;
    width: fit-content;
    white-space: pre-wrap;
}

/* .blog pre:hover {
    /* white-space: pre; */
    /* display: block; */
    /* transform: translateX(calc( -1 * (var(--h2width) + (50vw - 600px))  )  ); */
    /* transform: scaleX(3); */
    width: 94vw;
} */


p>code,
li>code {
    color: rgb(0, 167, 0);
}

a {
    text-decoration: none;
}


/* ------- MEDIA QUERIES --------- */

@media (max-width: 740px) {
    footer .f2,
    footer .f3,
    footer .f4,
    footer .f5 {
        display: none;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --site-black: #ddd;
        --site-white: #464345; 
        --star: rgb(0, 89, 255);
        --code: rgb(0, 167, 0);
        --h2width: 17rem;
} 




iframe[src*=youtube] {
    max-width: 580px;
    max-height: 315px;
}



/* --------- for the TAGS page ------------ */

.tags .content {
    padding: 1em;
}
.tags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    width: min(100%, 750px);
}
.tag a {
    display: block;
    background-color: orange;
    padding: .1em 1em;
    border-radius: 25px;
}





/* ------ for the 404 page --------- */


.fourohfour{
    display: grid;
    height: 100vh;
    place-content: center;
    color: #292929;
    background-color: #181717;
    text-align: center;
}

.fourohfour h1 {
    font-size: 35vw;
    margin: 0;
    line-height: 1;
}

.fourohfour p {
    font-size: 2vw;
    /* max-width: 60vw; */
    line-height: 1;
    margin-top: 0em;
    margin-bottom: 1em;
}

.fourohfour p > a {
    text-decoration: none;
    font-size: 1.4vw;
}
.fourohfour .arrow {
    display: inline-block;
    font-size: 2em;
    transform: rotate(180deg);
}
.fourohfour p > a:hover {
    color: orangered;
}