@charset "UTF-8";
/* Media Queries */
/* Colors */
/* Font Sizes */
/* Other */
.bg-vertical-lines-dark {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
z-index: -100;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Crect x='0' y='0' width='1' height='100%' fill='black'/%3E%3C/svg%3E");
background-size: 20vw 100vh;
background-repeat: repeat;
}
.bg-vertical-lines-dark-dashed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
z-index: -100;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%25'%3E%3Cline x1='0' y1='0' x2='0' y2='100%' stroke='black' stroke-width='2' stroke-dasharray='10,10'/%3E%3C/svg%3E");
background-size: 20vw 100vh;
background-repeat: repeat;
}
.bg-waves {
position: fixed;
top: 0;
width: 100vw;
height: 100%;
z-index: -100;
background-size: 100vw 100vh;
background-image: url("data:image/svg+xml,");
}
.bg-waves-2 {
position: fixed;
top: 0;
width: 100vw;
height: 100%;
z-index: -100;
background-size: 100vw 100vh;
background-image: url("data:image/svg+xml,");
}
.bg-stars {
position: fixed;
top: 0;
width: 100vw;
height: 100%;
z-index: -100;
background-size: 100vw 100vh;
background-image: url("data:image/svg+xml,");
}
.bg-triangles-light {
z-index: 999;
background-image: url("data:image/svg+xml,");
}
.bg-triangles-light-2 {
background-image: url("data:image/svg+xml,");
}
.bg-triangles-dark-gray {
background-size: 100vw 100vh;
background-image: url("data:image/svg+xml,");
}
.bg-gradient-linear-dark {
position: fixed;
z-index: -100;
top: 0;
width: 100vw;
height: 100%;
background: linear-gradient(to right, rgba(15, 18, 25, 0) 0%, rgba(15, 18, 25, 0.5) 25%, rgb(15, 18, 25) 50%, rgba(15, 18, 25, 0.5) 75%, rgba(15, 18, 25, 0) 100%);
/* Optional: Add a blur effect */
filter: blur(100px);
}
.bg-diagonal-stripe-light {
background-image: repeating-linear-gradient(135deg, rgba(211, 203, 231, 0.15) 0px, rgba(211, 203, 231, 0.15) 1px, transparent 1px, transparent 4px);
}
.bg-frosted-dark {
background: rgba(41, 55, 97, 0.1); /* Semi-transparent background */
backdrop-filter: blur(10px); /* Blurs the background */
-webkit-backdrop-filter: blur(10px); /* Safari support */
}
.bg-frosted-dark-faded {
background: rgba(41, 55, 97, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Radial gradient mask to keep the center visible and fade the edges */
mask-image: radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
}
.bg-the-creation-of-adam {
background-image: url("/the_creation_of_adam.jpg");
}
/* preloader.scss */
#home #pre-loader .bg-pre-fade {
/* Animate the gradient over 3 seconds */
animation: gradientAnim 3s ease-in-out forwards !important;
}
/* Loader overlay styling */
#pre-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: rgb(211, 203, 231);
font-size: 1.5rem;
opacity: 1;
transition: opacity 1s ease-in-out;
background-color: #e5e9f0;
background-size: 100vw 100vh;
overflow: hidden;
}
#pre-loader .bg-triangles-light {
height: 100%;
width: 100%;
}
#pre-loader .bg-pre-fade {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
--grad-stop: 100%;
background: radial-gradient(circle, #e5e9f0 var(--grad-stop), transparent 0%);
animation: gradientAnim 1s ease-in-out forwards;
}
@keyframes gradientAnim {
from {
--grad-stop: 100%;
}
to {
--grad-stop: 0%;
}
}
#pre-loader #logo-2 {
text-align: center;
z-index: 10000;
font-family: "SpaceMono-Bold", sans-serif;
font-style: italic;
font-size: 7em;
}
@media (min-width: 1720px) {
#pre-loader #logo-2 {
font-size: 9rem;
}
}
@media (max-width: 1536px) {
#pre-loader #logo-2 {
font-size: 8rem;
}
}
@media (max-width: 1280px) {
#pre-loader #logo-2 {
font-size: 7rem;
}
}
@media (max-width: 1024px) {
#pre-loader #logo-2 {
font-size: 6rem;
}
}
@media (max-width: 680px) {
#pre-loader #logo-2 {
font-size: 5rem;
}
}
/*Sass variables don’t animate, and they get compiled statically before the browser sees the CSS.*/
@property --grad-stop {
syntax: "";
inherits: false;
initial-value: 100%;
}
.pre-loader-radical {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #e5e9f0; /* solid background */
z-index: 100;
overflow: hidden;
transition: background-color 2s ease-in-out; /* Add transition */
}
/* The radial gradient overlay using a pseudo-element */
.pre-loader-radical::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100vw; /* adjust as needed */
height: 100vh;
transform: translate(-50%, -50%);
background: radial-gradient(circle, #e5e9f0, transparent 70%);
opacity: 1;
transition: opacity 2s ease-in-out;
}
/* When the .fade-out class is added, the pseudo-element fades to transparent */
.pre-loader-radical.fade-out::before {
opacity: 0;
}
/* And the element's background-color transitions to transparent */
.pre-loader-radical.fade-out {
background-color: transparent;
}
.pre-loader-radical-inverse {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #e5e9f0; /* solid background */
z-index: 100;
overflow: hidden;
transition: background-color 2s ease-in-out; /* Add transition */
}
/* The radial gradient overlay using a pseudo-element */
.pre-loader-radical-inverse::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100vw; /* adjust as needed */
height: 100vh;
transform: translate(-50%, -50%);
background: radial-gradient(circle, transparent, #e5e9f0 70%);
opacity: 1;
transition: opacity 2s ease-in-out;
}
/* When the .fade-out class is added, the pseudo-element fades to transparent */
.pre-loader-radical-inverse.fade-out::before {
opacity: 0;
}
/* And the element's background-color transitions to transparent */
.pre-loader-radical-inverse.fade-out {
background-color: transparent;
}
.frosted-container {
position: relative;
width: 100%;
height: 100%; /* Full screen */
display: flex;
justify-content: center;
align-items: center;
border-width: 0px !important;
}
/* Blurred overlay */
.frosted-container::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(10px) brightness(0.7);
-webkit-backdrop-filter: blur(10px) brightness(0.7);
background: radial-gradient(circle, rgba(41, 55, 97, 0.3) 40%, rgba(41, 55, 97, 0) 100%);
z-index: 1;
pointer-events: none;
}
.spinner-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
z-index: 10;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-top-color: rgb(66, 102, 148);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.aurora-text {
position: relative; /* Needed for the pseudo-element */
background: linear-gradient(45deg, rgb(66, 102, 148), rgb(211, 203, 231), rgb(93, 130, 192), rgb(152, 165, 220), rgb(41, 55, 97));
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* Hides the text color so only the gradient shows */
animation: aurora-animation 10s ease-in-out infinite;
transition: all 0.3s ease; /* Optional, for hover effects */
text-decoration: none;
z-index: 1;
}
.border-square {
/* Set a solid border width */
border: 4px solid;
/* Use the gradient as the border image */
border-image: linear-gradient(45deg, oklch(96.2% 0.018 272.314deg), oklch(92.9% 0.013 255.508deg), oklch(87% 0.065 274.039deg), oklch(98.4% 0.003 247.858deg), oklch(92.9% 0.013 255.508deg)) 1;
}
.aurora-text-light {
position: relative; /* Needed for the pseudo-element */
background: linear-gradient(45deg, oklch(96.2% 0.018 272.314deg), oklch(92.9% 0.013 255.508deg), oklch(87% 0.065 274.039deg), oklch(98.4% 0.003 247.858deg), oklch(92.9% 0.013 255.508deg));
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* Hides the text color so only the gradient shows */
animation: aurora-animation 10s ease-in-out infinite;
transition: all 0.3s ease; /* Optional, for hover effects */
text-decoration: none;
z-index: 1;
}
/* Define an example animation for the background gradient */
@keyframes aurora-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Font */
@font-face {
font-family: "SpaceMono";
src: url("/fonts/SpaceMono/SpaceMono-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SpaceMono";
src: url("/fonts/SpaceMono/SpaceMono-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "SpaceMono-Bold";
src: url("/fonts/SpaceMono/SpaceMono-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SpaceMono-Bold";
src: url("/fonts/SpaceMono/SpaceMono-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-Black";
src: url("/fonts/Barlow/Barlow-Black.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-Black";
src: url("/fonts/Barlow/Barlow-BlackItalic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow";
src: url("/fonts/Barlow/Barlow-Bold.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-BoldItalic";
src: url("/fonts/Barlow/Barlow-BoldItalic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-BoldItalic";
src: url("/fonts/Barlow/Barlow-ExtraBold.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-ExtraLight";
src: url("/fonts/Barlow/Barlow-ExtraLight.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-ExtraLight";
src: url("/fonts/Barlow/Barlow-ExtraLight.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-Light";
src: url("/fonts/Barlow/Barlow-Light.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-Light";
src: url("/fonts/Barlow/Barlow-Light.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-Medium";
src: url("/fonts/Barlow/Barlow-Medium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-Medium";
src: url("/fonts/Barlow/Barlow-Medium.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow";
src: url("/fonts/Barlow/Barlow-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow";
src: url("/fonts/Barlow/Barlow-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-SemiBold";
src: url("/fonts/Barlow/Barlow-SemiBold.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-SemiBold";
src: url("/fonts/Barlow/Barlow-SemiBold.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Barlow-Thin";
src: url("/fonts/Barlow/Barlow-Thin.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow-Thin";
src: url("/fonts/Barlow/Barlow-Thin.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
#error-404 {
margin: 0px;
padding: 0px;
}
#error-404 > .content > .error-404-info {
height: 80vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#error-404 > .content > .error-404-info .container {
height: fit-content;
width: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px;
}
#error-404 > .content > .error-404-info .container h2 {
font-size: 172px;
}
#error-404 > .content > .error-404-info .container h3 {
font-style: italic;
text-decoration-line: underline !important;
text-decoration-color: rgb(66, 102, 148) !important;
text-decoration-thickness: 1px;
text-decoration-style: double;
}
@media (max-width: 1024px) {
#error-404 > .content > .error-404-info .container h2 {
font-size: 148px;
}
#error-404 > .content > .error-404-info .container p {
height: 150px;
width: 150px;
}
}
@media (max-width: 600px) {
#error-404 > .content > .error-404-info .container h2 {
font-size: 96px;
}
#error-404 > .content > .error-404-info .container p {
height: 100px;
width: 100px;
}
}
/**
*/
.pixelarticons--cast {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3h18v18h-8v-2h6V5H4v4H2V3zm0 16H2v2h2zm-2-4h4v2H2zm8-4H2v2h8v8h2V11zm-4 4h2v6H6z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/**
*/
.pixelarticons--check {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 6h2v2h-2zm-2 4V8h2v2zm-2 2v-2h2v2zm-2 2h2v-2h-2zm-2 2h2v-2h-2zm-2 0v2h2v-2zm-2-2h2v2H6zm0 0H4v-2h2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.bxl--discord-alt {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.82 4.26a10 10 0 0 0-.53 1.1a14.7 14.7 0 0 0-4.58 0a10 10 0 0 0-.53-1.1a16 16 0 0 0-4.13 1.3a17.33 17.33 0 0 0-3 11.59a16.6 16.6 0 0 0 5.07 2.59A13 13 0 0 0 8.23 18a9.7 9.7 0 0 1-1.71-.83a3.4 3.4 0 0 0 .42-.33a11.66 11.66 0 0 0 10.12 0q.21.18.42.33a11 11 0 0 1-1.71.84a12.4 12.4 0 0 0 1.08 1.78a16.4 16.4 0 0 0 5.06-2.59a17.22 17.22 0 0 0-3-11.59a16 16 0 0 0-4.09-1.35M8.68 14.81a1.94 1.94 0 0 1-1.8-2a1.93 1.93 0 0 1 1.8-2a1.93 1.93 0 0 1 1.8 2a1.93 1.93 0 0 1-1.8 2m6.64 0a1.94 1.94 0 0 1-1.8-2a1.93 1.93 0 0 1 1.8-2a1.92 1.92 0 0 1 1.8 2a1.92 1.92 0 0 1-1.8 2'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.bxl--twitter {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.633 7.997c.013.175.013.349.013.523c0 5.325-4.053 11.461-11.46 11.461c-2.282 0-4.402-.661-6.186-1.809c.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721a4.04 4.04 0 0 1-3.767-2.793c.249.037.499.062.761.062c.361 0 .724-.05 1.061-.137a4.03 4.03 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.02 4.02 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.46 11.46 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a8 8 0 0 0 2.556-.973a4.02 4.02 0 0 1-1.771 2.22a8 8 0 0 0 2.319-.624a8.7 8.7 0 0 1-2.019 2.083'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.bxl--reddit {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9.67' cy='13' r='1.001' fill='%23000'/%3E%3Cpath fill='%23000' d='M14.09 15.391A3.28 3.28 0 0 1 12 16a3.27 3.27 0 0 1-2.081-.63a.27.27 0 0 0-.379.38c.71.535 1.582.809 2.471.77a3.8 3.8 0 0 0 2.469-.77v.04a.284.284 0 0 0 .006-.396a.28.28 0 0 0-.396-.003m.209-3.351a1 1 0 0 0 0 2l-.008.039h.051a1 1 0 0 0 .958-1.038a1 1 0 0 0-1.001-1.001'/%3E%3Cpath fill='%23000' d='M12 2C6.479 2 2 6.477 2 12c0 5.521 4.479 10 10 10s10-4.479 10-10c0-5.523-4.479-10-10-10m5.859 11.33q.018.22 0 .439c0 2.24-2.609 4.062-5.83 4.062s-5.83-1.82-5.83-4.062a3 3 0 0 1 0-.439a1.46 1.46 0 0 1-.455-2.327a1.46 1.46 0 0 1 2.063-.063a7.15 7.15 0 0 1 3.899-1.23l.743-3.47v-.004A.313.313 0 0 1 12.82 6l2.449.49a1.001 1.001 0 1 1-.131.61L13 6.65l-.649 3.12a7.1 7.1 0 0 1 3.85 1.23a1.46 1.46 0 0 1 2.469 1c.01.563-.307 1.08-.811 1.33'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.bxl--github {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12.026 2c-5.509 0-9.974 4.465-9.974 9.974c0 4.406 2.857 8.145 6.821 9.465c.499.09.679-.217.679-.481c0-.237-.008-.865-.011-1.696c-2.775.602-3.361-1.338-3.361-1.338c-.452-1.152-1.107-1.459-1.107-1.459c-.905-.619.069-.605.069-.605c1.002.07 1.527 1.028 1.527 1.028c.89 1.524 2.336 1.084 2.902.829c.091-.645.351-1.085.635-1.334c-2.214-.251-4.542-1.107-4.542-4.93c0-1.087.389-1.979 1.024-2.675c-.101-.253-.446-1.268.099-2.64c0 0 .837-.269 2.742 1.021a9.6 9.6 0 0 1 2.496-.336a9.6 9.6 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021c.545 1.372.203 2.387.099 2.64c.64.696 1.024 1.587 1.024 2.675c0 3.833-2.33 4.675-4.552 4.922c.355.308.675.916.675 1.846c0 1.334-.012 2.41-.012 2.737c0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2' clip-rule='evenodd'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--radio-signal {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 2h2v2h-2zm2 14V4h2v12zm0 0v2h-2v-2zM1 4h2v12H1zm2 12h2v2H3zM3 4h2V2H3zm2 2h2v8H5zm2 8h2v2H7zm0-8h2V4H7zm10 0h2v8h-2zm0 0h-2V4h2zm0 8v2h-2v-2zm-6-7h4v6h-2v9h-2v-9H9V7zm0 4h2V9h-2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--mail {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 4H2v16h20zM4 18V6h16v12zM8 8H6v2h2v2h2v2h4v-2h2v-2h2V8h-2v2h-2v2h-4v-2H8z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--list-box {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 3h20v18H2zm18 16V5H4v14zM8 7H6v2h2zm2 0h8v2h-8zm-2 4H6v2h2zm2 0h8v2h-8zm-2 4H6v2h2zm2 0h8v2h-8z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--bug {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 2h2v4h4V2h2v4h2v3h2v2h-2v2h4v2h-4v2h2v2h-2v3H6v-3H4v-2h2v-2H2v-2h4v-2H4V9h2V6h2zm8 6H8v3h8zm-5 5H8v7h3zm2 7h3v-7h-3zM4 9H2V7h2zm0 10v2H2v-2zm16 0h2v2h-2zm0-10V7h2v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--mood-sad {
display: inline-block;
width: 100%;
height: 100%;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h14v2H5zm0 16H3V5h2zm14 0v2H5v-2zm0 0h2V5h-2zM10 8H8v2h2zm4 0h2v2h-2zm-5 8v-2h6v2h2v-2h-2v-2H9v2H7v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--mood-happy {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h14v2H5zm0 16H3V5h2zm14 0v2H5v-2zm0 0h2V5h-2zM10 8H8v2h2zm4 0h2v2h-2zm-5 6v-2H7v2zm6 0v2H9v-2zm0 0h2v-2h-2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--chevron-left {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 5v2h-2V5zm-4 4V7h2v2zm-2 2V9h2v2zm0 2H8v-2h2zm2 2v-2h-2v2zm0 0h2v2h-2zm4 4v-2h-2v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--chevron-right {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v2h2V5zm4 4V7h-2v2zm2 2V9h-2v2zm0 2h2v-2h-2zm-2 2v-2h2v2zm0 0h-2v2h2zm-4 4v-2h2v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--sort-numeric {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 2h-2v2H9v2h2V4h2v2h2V4h-2zM2 8h4v8H4v-6H2zm6 0h6v5h-4v1h4v2H8v-5h4v-1H8zm12 0h-4v2h4v1h-4v2h4v1h-4v2h6V8zm-9 10v2H9v-2zm2 2h-2v2h2zm0 0v-2h2v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--sort-alphabetic {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2v2h-2zm0 2v2H9V4zm2 0h2v2h-2zM9 18v2h2v2h2v-2h2v-2h-2v2h-2v-2zM8 8H2v8h2v-2h2v2h2zm-2 4H4v-2h2zm6-1v-1h2v1zm4-3h-6v8h6zm-4 6v-1h2v1zm10-6h-4v8h4v-2h-2v-4h2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--heart {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2H5v2H3v2H1v6h2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2V6h-2V4h-2V2h-4v2h-2v2h-2V4H9zm0 2v2h2v2h2V6h2V4h4v2h2v6h-2v2h-2v2h-2v2h-2v2h-2v-2H9v-2H7v-2H5v-2H3V6h2V4z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--list-box {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 3h20v18H2zm18 16V5H4v14zM8 7H6v2h2zm2 0h8v2h-8zm-2 4H6v2h2zm2 0h8v2h-8zm-2 4H6v2h2zm2 0h8v2h-8z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--label {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2H2v10h2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h-2v-2h-2V8h-2V6h-2V4h-2zm0 2v2h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2H8v-2H6v-2H4V4zM6 6h2v2H6z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--label-alt {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 5H2v14h14v-2h2v-2h2v-2h2v-2h-2V9h-2V7h-2zm0 2v2h2v2h2v2h-2v2h-2v2H4V7z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--home {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 2h-4v2H8v2H6v2H4v2H2v2h2v10h7v-6h2v6h7V12h2v-2h-2V8h-2V6h-2V4h-2zm0 2v2h2v2h2v2h2v2h-2v8h-3v-6H9v6H6v-8H4v-2h2V8h2V6h2V4z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/*
*/
.pixelarticons--chevron-right {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v2h2V5zm4 4V7h-2v2zm2 2V9h-2v2zm0 2h2v-2h-2zm-2 2v-2h2v2zm0 0h-2v2h2zm-4 4v-2h2v2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.pixelarticons--user {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15 2H9v2H7v6h2V4h6zm0 8H9v2h6zm0-6h2v6h-2zM4 16h2v-2h12v2H6v4h12v-4h2v6H4z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
header #logo {
position: relative;
font-family: "SpaceMono-Bold", sans-serif;
font-style: italic;
font-size: 48px;
}
header #logo .title-transparent-text-with-underline {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: transparent;
text-underline-offset: 6px;
}
header #logo a {
color: transparent;
text-decoration-style: wavy;
text-decoration-color: rgb(41, 55, 97);
text-decoration-thickness: 2px;
}
header nav {
margin: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding-left: 20px;
padding-top: 10px;
}
header nav .internal-links {
font-size: 1.125rem;
line-height: 1.5555555556;
display: flex;
flex-direction: row;
gap: 20px;
}
@media (max-width: 600px) {
header nav .internal-links {
font-size: 1rem;
line-height: 1.5;
}
}
header {
display: flex;
flex-direction: row;
height: 15vh;
width: 100%;
text-align: left;
padding: 0;
margin: 0;
}
footer #logo-2 {
position: relative;
font-family: "SpaceMono-Bold", sans-serif;
font-style: italic;
font-size: 48px;
}
footer #logo-2 .title-transparent-text-with-underline {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: transparent;
text-underline-offset: 6px;
}
footer #logo-2 a {
color: rgb(152, 165, 220);
text-decoration-style: wavy;
text-decoration-color: rgb(41, 55, 97) !important;
text-decoration-thickness: 2px;
}
footer #logo-2 a:hover {
color: rgb(211, 203, 231);
}
footer #helpful-links ul li {
margin-bottom: 2px;
}
footer #helpful-links a {
color: rgb(229, 233, 240);
}
footer #helpful-links a:hover {
color: rgb(93, 130, 192);
}
footer #navigation {
font-size: 20px;
}
footer #contact-email a {
color: rgb(229, 233, 240);
font-size: 14px;
}
footer #contact-email a:hover {
color: rgb(93, 130, 192);
}
footer #policy {
height: 100%;
font-size: 14px !important;
}
footer #policy ul {
margin: 0px 2px;
padding: 0;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1em;
flex-wrap: wrap;
}
footer #policy ul a {
color: rgb(152, 165, 220);
}
footer #policy ul a:hover {
color: rgb(211, 203, 231);
}
footer #policy ul li {
text-align: center;
white-space: nowrap;
}
footer #cc {
font-size: 14px;
}
footer #social li {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
font-size: 20px;
}
footer #social li a {
color: rgb(229, 233, 240);
}
footer #social li a:hover {
color: rgb(93, 130, 192);
}
footer h2 {
text-decoration-line: underline;
text-underline-offset: 4px;
text-decoration-style: dashed;
text-decoration-thickness: 1px;
text-decoration-color: rgb(41, 55, 97);
line-height: 1em;
}
footer ul {
margin-bottom: 2em;
}
footer ul li {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
}
footer ul li a {
text-decoration: none;
color: rgb(93, 130, 192);
}
footer ul li a:hover {
color: rgb(152, 165, 220);
}
footer p {
margin: 0;
padding: 8px 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-family: "SpaceMono", sans-serif;
text-align: center;
}
footer p span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
footer {
/* Display */
padding: 0;
margin: 0;
height: auto;
width: 100%;
display: grid;
/* Border */
box-sizing: border-box;
border-top-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
/* Style */
text-align: center;
font-size: 16px;
color: rgb(93, 130, 192);
/* Mobile View */
}
@media (max-width: 720px) {
footer {
display: flex;
flex-direction: column;
height: auto;
}
}
footer section:first-child {
grid-column-start: 1;
grid-column-end: 4;
grid-row: 3;
}
footer section:nth-child(2) {
grid-column-start: 4;
grid-column-end: 5;
grid-row: 3;
}
footer section:nth-child(3) {
grid-column-start: 5;
grid-column-end: 6;
grid-row: 3;
}
footer section:nth-child(4) {
grid-column-start: 1;
grid-column-end: 6;
grid-row: 4;
}
footer section:nth-child(5) {
grid-column-start: 1;
grid-column-end: 6;
grid-row: 5;
}
footer section:nth-child(6) {
grid-column-start: 1;
grid-column-end: 6;
grid-row: 6;
}
footer section:nth-child(1), footer section:nth-child(2), footer section:nth-child(3) {
min-height: 300px;
padding: 28px 36px;
text-align: left;
}
footer section:nth-child(2), footer section:nth-child(3) {
/* Border */
border-style: dashed;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 0px;
border-color: rgba(211, 203, 231, 0.15);
/* Mobile View */
}
footer section:nth-child(2) a, footer section:nth-child(3) a {
text-decoration-line: none;
}
@media (max-width: 720px) {
footer section:nth-child(2), footer section:nth-child(3) {
border-left-width: 0px;
border-top-width: 1px;
}
}
footer section:nth-child(4), footer section:nth-child(5), footer section:nth-child(6) {
min-height: 2em;
height: fit-content;
/* Border */
border-style: dashed;
border-top-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-color: rgba(211, 203, 231, 0.15);
}
#blog .filter > ul {
line-height: 1;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#blog .filter > ul > li {
margin-left: 4px;
margin-right: 4px;
}
#blog .filter > ul > li button {
font-size: 16px;
margin: 2px;
padding: 2px;
border-bottom: 4px double rgb(41, 55, 97);
}
#blog .filter > ul > li button:hover {
margin: 2px;
padding: 2px;
border-bottom: 4px double rgb(152, 165, 220);
}
#blog .posts div h2,
#blog .posts ul li > :first-child h2 {
font-size: 20px;
}
#blog .posts div h3,
#blog .posts ul li > :first-child h3 {
font-size: 16px;
}
#blog .posts div :first-child,
#blog .posts ul li > :first-child :first-child {
width: 100px;
}
#blog .posts div > :nth-child(2),
#blog .posts ul li > :first-child > :nth-child(2) {
width: 200px;
}
#blog .posts div > :nth-child(3),
#blog .posts ul li > :first-child > :nth-child(3) {
width: auto;
}
#blog .posts div > :nth-child(3) span,
#blog .posts ul li > :first-child > :nth-child(3) span {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#blog .posts div > :nth-child(3),
#blog .posts ul li > :first-child > :nth-child(3) {
color: rgb(229, 233, 240);
}
#blog .posts div,
#blog .posts ul li > :first-child {
padding: 0rem 1rem;
display: flex;
flex-direction: column;
text-align: left;
color: rgb(229, 233, 240);
}
@media (max-width: 1280px) {
#blog .posts div :first-child,
#blog .posts ul li > :first-child :first-child {
width: 75px;
}
#blog .posts div > :nth-child(2),
#blog .posts ul li > :first-child > :nth-child(2) {
width: 175px;
}
#blog .posts div > :nth-child(3) span,
#blog .posts ul li > :first-child > :nth-child(3) span {
max-width: 100%;
}
}
@media (max-width: 780px) {
#blog .posts div h2,
#blog .posts ul li > :first-child h2 {
font-size: 18px;
}
#blog .posts div h3,
#blog .posts ul li > :first-child h3 {
font-size: 14px;
}
#blog .posts div :first-child,
#blog .posts ul li > :first-child :first-child {
width: 60px;
}
#blog .posts div > :nth-child(2),
#blog .posts ul li > :first-child > :nth-child(2) {
width: 130px;
}
#blog .posts div > :nth-child(3) span,
#blog .posts ul li > :first-child > :nth-child(3) span {
max-width: 100%;
}
}
#blog .posts {
min-height: 35rem;
height: fit-content;
display: flex;
flex-direction: column;
text-align: left;
color: rgb(229, 233, 240);
}
#blog .posts h2 {
font-size: 20px;
}
#blog .posts h3 {
font-size: 16px;
}
#blog .posts div {
width: fit-content;
height: 3rem;
display: flex;
flex-direction: row;
align-items: center;
}
#blog .posts div h2,
#blog .posts div h3 {
color: rgb(229, 233, 240);
}
#blog .posts ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#blog .posts ul li > :first-child {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
text-align: left;
}
#blog .posts ul li {
display: flex;
flex-direction: column;
}
#blog .posts ul li a {
font-size: 14px;
}
@media (max-width: 600px) {
#blog .posts ul li a {
font-size: 12px;
}
}
#blog .posts ul li a h3 {
color: rgb(211, 203, 231);
}
#blog .posts ul li a:hover h3 {
color: rgb(93, 130, 192);
}
#blog .pagination li,
#blog .pagination span,
#blog .pagination button {
font-size: 16px;
}
@media (max-width: 600px) {
#blog .pagination li,
#blog .pagination span,
#blog .pagination button {
font-size: 14px;
}
}
#blog .pagination ul {
margin: 0;
padding: 0;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.6rem;
line-height: 1;
}
#blog .pagination ul .pagNumsGroup {
height: 100%;
min-width: 180px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.4rem;
}
#blog .pagination ul .pagNumsGroup .pagNum > span {
height: 100%;
display: flex;
flex-direction: column;
align-items: end;
justify-content: end;
text-align: center;
}
#blog .pagination ul .pagNumsGroup .pagNum > span button {
height: 100%;
margin-left: 1px;
margin-right: 1px;
}
#blog .pagination ul .pagNumsGroup .pagNum #ellipsis {
padding-bottom: 4px;
}
@media (max-width: 1280px) {
#blog .pagination ul .pagNumsGroup {
min-width: 130px;
}
}
@media (max-width: 600px) {
#blog .pagination ul .pagNumsGroup {
min-width: 120px;
}
}
#blog .pagination ul li:not(.pagNumsGroup) button {
margin-left: 1px;
margin-right: 1px;
width: 60px;
color: rgb(211, 203, 231);
}
@media (max-width: 1280px) {
#blog .pagination ul li:not(.pagNumsGroup) button {
width: 50px;
}
}
@media (max-width: 600px) {
#blog .pagination ul li:not(.pagNumsGroup) button {
width: 40px;
}
}
#blog .pagination ul li:not(.pagNumsGroup) button:hover {
color: rgb(93, 130, 192);
}
@media (max-width: 600px) {
#blog .pagination {
gap: 0.1rem;
}
#blog .pagination .pagNumsGroup {
min-width: 100px;
}
#blog .pagination .pagNum button {
margin-left: 1px;
margin-right: 1px;
}
#blog .pagination li:not(.pagNum) button {
margin-left: 1px;
margin-right: 1px;
}
}
#blog .pagination li button {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#blog {
overflow: scroll !important;
}
#blog main {
width: auto;
margin: 1rem 0rem 3.2rem 0rem;
padding: 0;
height: 86vh;
overflow: hidden;
}
#blog main section:first-child {
box-sizing: border-box;
border-width: 1px 1px 1px 1px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
color: rgb(211, 203, 231);
}
#blog main section:not(:first-of-type) {
box-sizing: border-box;
border-width: 0px 1px 1px 1px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
}
#blog main section {
padding: 8px 2px;
width: 100%;
max-width: 1000px;
}
@media (max-width: 1720px) {
#blog main section {
max-width: 800px;
}
}
@media (max-width: 1280px) {
#blog main section {
max-width: 600px;
}
}
@media (max-width: 780px) {
#blog main section {
max-width: 400px;
}
}
#blog main ul {
display: flex;
flex-wrap: wrap;
}
#blog main button {
background-color: transparent;
box-sizing: border-box;
border-width: 0px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
color: rgb(229, 233, 240);
}
#blog main button.active {
color: rgb(93, 130, 192);
font-weight: bold;
}
#blog main button:hover {
color: rgb(93, 130, 192);
}
.blogpost {
margin: 0;
padding: 0;
}
.blogpost hr {
min-width: fit-content;
height: 0;
border-top: 1px solid rgb(211, 203, 231) !important;
}
.post-content {
margin-top: 1em;
margin-bottom: 4em;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 100%;
max-width: 1120px;
height: fit-content;
text-align: left;
}
@media (max-width: 600px) {
.post-content {
margin-top: 0em;
}
}
.post-content aside {
font-size: 14px;
text-align: left;
width: 100%;
font-family: "SpaceMono", sans-serif;
}
.post-content aside ul {
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 0px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
}
.post-content aside ul li {
margin-left: 2em;
height: auto;
text-wrap: wrap;
display: flex;
flex-direction: row;
gap: 0.5em;
}
.post-content aside ul li div {
color: rgb(211, 203, 231);
}
.post-content aside ul li div:nth-child(1) {
color: rgb(152, 165, 220);
}
.post-content aside ul li div:nth-child(2) span:first-child {
display: none;
}
@media (max-width: 600px) {
.post-content aside ul li {
gap: 0em;
flex-direction: column;
}
.post-content aside ul li div:nth-child(2) {
display: flex;
flex-direction: row;
padding: 0.1em 2em;
}
.post-content aside ul li div:nth-child(2) span:first-child {
display: inline-block;
}
}
.post-content article {
/* Border */
position: relative;
isolation: isolate;
padding: 4em 4em 4em 4em;
/* keep only the right & bottom edges on the element itself */
border-right: 0em;
border-bottom: 0em;
/* top border: start after $cut */
/* left border: start after $cut */
margin-top: 2em;
margin-bottom: 4em;
margin-left: 3em;
margin-right: 2em;
padding-top: 0;
padding-bottom: 0em;
padding-left: 1em;
padding-right: 1em;
font-size: 18px;
text-align: left;
}
.post-content article::before, .post-content article::after {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
}
.post-content article::before {
top: 0;
left: 4em;
right: 0;
height: 0;
border-top: 0;
}
.post-content article::after {
top: 4em;
left: 0;
bottom: 0;
width: 0;
border-left: 1px dashed rgba(211, 203, 231, 0.15);
}
.post-content article hr {
margin-bottom: 2em;
}
.post-content article h1,
.post-content article h2,
.post-content article h3,
.post-content article h4,
.post-content article h5,
.post-content article h6,
.post-content article h7 {
font-family: "SpaceMono", sans-serif;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: end;
}
.post-content article h1 {
font-size: 36px;
}
@media (max-width: 600px) {
.post-content article h1 {
font-size: 28px;
}
}
.post-content article h1 .pixelarticons--home,
.post-content article h1 .pixelarticons--user,
.post-content article h1 .pixelarticons--chevron-right {
color: rgb(192, 192, 192);
margin: 0px 2px;
height: 36px;
width: 36px;
}
@media (max-width: 600px) {
.post-content article h1 .pixelarticons--home,
.post-content article h1 .pixelarticons--user,
.post-content article h1 .pixelarticons--chevron-right {
height: 28px;
width: 28px;
}
}
.post-content article h2 {
font-size: 28px;
}
@media (max-width: 600px) {
.post-content article h2 {
font-size: 20px;
}
}
.post-content article h2 .pixelarticons--chevron-right {
color: rgb(192, 192, 192);
margin: 0px 2px;
height: 28px;
width: 28px;
}
@media (max-width: 600px) {
.post-content article h2 .pixelarticons--chevron-right {
height: 22px;
width: 22px;
}
}
.post-content article h2 .pixelarticons--home,
.post-content article h2 .pixelarticons--user {
color: rgb(152, 165, 220);
margin: 0px 4px;
height: 24px;
width: 24px;
align-self: center;
}
@media (max-width: 600px) {
.post-content article h2 .pixelarticons--home,
.post-content article h2 .pixelarticons--user {
height: 20px;
width: 20px;
}
}
.post-content article p {
color: rgb(192, 192, 192);
}
@media (max-width: 600px) {
.post-content article p {
font-size: 16px;
}
}
.post-content article span a {
color: rgb(66, 102, 148);
word-break: break-all;
}
@media (max-width: 600px) {
.post-content article span a {
font-size: 16px;
}
}
.post-content article #author {
color: rgb(152, 165, 220);
}
.post-content article .blog-about {
color: rgb(211, 203, 231);
}
#newsletter {
min-height: 100vh;
height: fit-content;
min-width: 0;
width: 100%;
box-sizing: border-box;
padding-inline: 5vw;
padding-block: 6rem 4rem;
overflow-wrap: break-word;
}
#newsletter h1 {
font-family: "SpaceMono", sans-serif;
text-decoration-line: underline;
text-decoration-color: rgb(66, 102, 148);
text-decoration-thickness: 1px;
text-decoration-style: double;
font-size: 64px;
}
@media (max-width: 600px) {
#newsletter h1 {
font-size: 36px;
}
}
#newsletter h3 {
font-family: "Barlow", sans-serif;
font-size: 28px;
margin-bottom: 20px;
}
#newsletter p {
font-family: "SpaceMono", sans-serif;
}
#newsletter .sub-news-form-empty, #newsletter form {
width: calc(100% - 1rem); /* 2 rem gap on both sides = 4 rem total */
max-width: 640px;
margin-inline: auto;
box-sizing: border-box;
font-family: "SpaceMono", sans-serif;
color: rgb(229, 233, 240);
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
/* Border */
border-style: dashed;
border-width: 1px 1px;
border-color: rgba(211, 203, 231, 0.15);
}
#newsletter .sub-news-form-empty input,
#newsletter .sub-news-form-empty select,
#newsletter .sub-news-form-empty textarea, #newsletter form input,
#newsletter form select,
#newsletter form textarea {
/* baseline state */
border: 1px dashed rgba(211, 203, 231, 0.15);
background-color: transparent;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
/* ① keyboard focus (and mouse-click on browsers without :focus-visible) */
/* ② optional hover style, separate from focus */
}
#newsletter .sub-news-form-empty input:focus-visible, #newsletter .sub-news-form-empty input:focus,
#newsletter .sub-news-form-empty select:focus-visible,
#newsletter .sub-news-form-empty select:focus,
#newsletter .sub-news-form-empty textarea:focus-visible,
#newsletter .sub-news-form-empty textarea:focus, #newsletter form input:focus-visible, #newsletter form input:focus,
#newsletter form select:focus-visible,
#newsletter form select:focus,
#newsletter form textarea:focus-visible,
#newsletter form textarea:focus {
border-color: rgb(152, 165, 220);
outline: 0;
}
#newsletter .sub-news-form-empty input:hover:not(:focus-visible):not(:focus),
#newsletter .sub-news-form-empty select:hover:not(:focus-visible):not(:focus),
#newsletter .sub-news-form-empty textarea:hover:not(:focus-visible):not(:focus), #newsletter form input:hover:not(:focus-visible):not(:focus),
#newsletter form select:hover:not(:focus-visible):not(:focus),
#newsletter form textarea:hover:not(:focus-visible):not(:focus) {
border-color: rgba(219.8, 213.4, 235.8, 0.15);
}
#newsletter .sub-news-form-empty .container, #newsletter form .container {
height: fit-content;
width: 100%;
display: flex;
flex-direction: row;
}
#newsletter .sub-news-form-empty .feedback, #newsletter form .feedback {
font-family: "SpaceMono", sans-serif;
}
#newsletter .sub-news-form-empty *, #newsletter .sub-news-form-empty *::before, #newsletter .sub-news-form-empty *::after, #newsletter form *, #newsletter form *::before, #newsletter form *::after {
box-sizing: border-box;
}
#newsletter .sub-news-form-empty input, #newsletter form input {
display: inline-block;
width: 100%;
padding: 0 4px;
text-align: left;
border-style: dashed;
border-width: 0 0 0 0;
border-color: rgba(211, 203, 231, 0.15);
background-color: rgba(41, 55, 97, 0.2);
font-family: "SpaceMono", sans-serif;
font-size: 16px;
color: rgb(229, 233, 240);
}
#newsletter .sub-news-form-empty input:focus, #newsletter form input:focus {
border-color: rgb(41, 55, 97);
outline: none;
}
#newsletter .sub-news-form-empty button, #newsletter form button {
width: 100%;
border-style: dashed;
border-width: 0px 0 0 0;
border-color: rgba(211, 203, 231, 0.15);
background: linear-gradient(to left, transparent 0%, rgba(152, 165, 220, 0.1) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: "SpaceMono", sans-serif;
font-size: 20px;
color: rgb(229, 233, 240);
}
#newsletter .sub-news-form-empty button:hover, #newsletter form button:hover {
background-color: rgba(152, 165, 220, 0.7);
}
#newsletter .sub-news-form-empty #userInfo, #newsletter form #userInfo {
display: flex;
flex-direction: column;
}
#newsletter .sub-news-form-empty #userInfo .container, #newsletter form #userInfo .container {
display: flex;
flex-direction: column;
}
#newsletter .sub-news-form-empty #userInfo label, #newsletter .sub-news-form-empty #userInfo input, #newsletter form #userInfo label, #newsletter form #userInfo input {
height: 30px;
padding: 0px 4px;
}
#newsletter .sub-news-form-empty #userInfo label, #newsletter form #userInfo label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
border-style: dashed;
border-width: 0 0px 0px 0;
border-color: rgba(211, 203, 231, 0.15);
text-align: left;
font-size: 16px;
color: rgb(152, 165, 220);
}
#newsletter #preferences {
border-style: dashed;
border-width: 1px 0px 0px 0px;
border-color: rgba(211, 203, 231, 0.15);
}
#newsletter #preferences ul > li {
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-left: 4px;
border-style: dashed;
border-width: 0px 0px 1px 0px;
border-color: rgba(211, 203, 231, 0.15);
}
#newsletter #preferences ul > li .container {
color: rgb(152, 165, 220);
}
#newsletter #preferences ul > li .container label > span {
color: rgb(192, 192, 192);
}
#newsletter #preferences ul > li input {
width: fit-content !important;
}
#newsletter #preferences ul > li input[type=checkbox] {
accent-color: rgb(152, 165, 220);
margin: 0;
padding: 0;
}
#newsletter #preferences ul > li label {
margin-left: 4px;
margin-right: 4px;
}
#newsletter #preferences ul > li span {
width: fit-content !important;
}
#newsletter #preferences ul > li span label {
text-align: right;
}
#newsletter #preferences ul > li p {
text-align: left;
text-wrap: wrap;
color: rgb(229, 233, 240);
font-family: "Barlow", sans-serif;
line-height: 1;
margin: 0;
padding: 0;
}
#home #landing {
z-index: -20;
width: 100%;
height: 90vh;
min-height: 90vh;
display: flex;
justify-content: center;
align-content: center;
}
#home #landing .landing-bg {
position: relative;
z-index: -10;
top: 0;
width: 100vw;
height: 100%;
background: linear-gradient(to right, rgba(15, 18, 25, 0) 0%, rgba(15, 18, 25, 0.5) 25%, rgb(15, 18, 25) 50%, rgba(15, 18, 25, 0.5) 75%, rgba(15, 18, 25, 0) 100%);
/* Optional: Add a blur effect */
filter: blur(100px);
}
#home #landing p {
font-family: "SpaceMono", sans-serif;
line-height: 0;
font-size: 18px;
}
#home #landing h1 {
align-self: center;
background-image: url("/the_creation_of_adam.jpg");
background-attachment: local;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: sans-serif;
font-size: 18rem;
text-transform: uppercase;
text-shadow: rgba(96, 115, 159, 0.4) 0px 0px 39px;
text-align: center;
line-height: 1;
padding-top: 0em;
padding-bottom: 0em;
padding-left: 0.4em;
padding-right: 0.4em;
}
@media (min-width: 1720px) {
#home #landing h1 {
font-size: 18rem;
padding-left: 0.2em;
padding-right: 0.2em;
}
}
@media (max-width: 1720px) {
#home #landing h1 {
font-size: 16rem;
padding-left: 0.2em;
padding-right: 0.2em;
}
}
@media (max-width: 1536px) {
#home #landing h1 {
font-size: 14rem;
padding-left: 0.2em;
padding-right: 0.2em;
}
}
@media (max-width: 1280px) {
#home #landing h1 {
font-size: 13rem;
}
}
@media (max-width: 1164px) {
#home #landing h1 {
font-size: 12rem;
}
}
@media (max-width: 1024px) {
#home #landing h1 {
font-size: 9rem;
}
}
@media (max-width: 780px) {
#home #landing h1 {
font-size: 8rem;
}
}
@media (max-width: 680px) {
#home #landing h1 {
font-size: 7rem;
}
}
@media (max-width: 600px) {
#home #landing h1 {
font-size: 5.5rem;
}
}
#home #landing h1 span {
font-style: italic;
text-decoration-color: rgb(152, 165, 220);
text-decoration-line: underline;
text-decoration-style: double;
}
/* Customize scrollbar width */
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(229, 233, 240, 0.5);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(229, 233, 240, 0.5) transparent;
}
html, body {
width: 100vw;
margin: 0;
padding: 0;
overflow: auto;
scroll-behavior: smooth;
}
body::before {
content: "";
z-index: -1000;
position: fixed;
padding: 0;
margin: 0;
inset: 0;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.2;
background-color: rgb(34, 41, 57);
background-image: url("/galaxy.jpg");
}
body {
z-index: 0;
font-family: "SpaceMono", sans-serif;
color: rgb(229, 233, 240);
font-size: 20px;
line-height: 1.7;
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2em;
background-color: rgb(34, 41, 57);
overflow: auto;
}
body main {
min-height: 70vh;
height: auto;
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
overflow: auto;
}
.content {
box-sizing: border-box;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 1px;
border-style: dashed;
border-color: rgba(211, 203, 231, 0.15);
}
.content {
opacity: 0;
transition: opacity 3s ease-in-out;
}
.content.visible {
opacity: 1;
}
.content.fading-out {
opacity: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5rem 0;
line-height: 1.2;
font-family: "SpaceMono-Bold", sans-serif;
}
strong, b {
font-weight: 700;
}
p {
font-family: "Barlow", sans-serif;
}
a {
color: rgb(229, 233, 240);
}
a:hover {
color: rgb(152, 165, 220);
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
hr {
border: none;
border-top: 1px solid rgb(229, 233, 240);
}
hr.aurora-light {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, oklch(96.2% 0.018 272.314deg), oklch(92.9% 0.013 255.508deg), oklch(87% 0.065 274.039deg), oklch(98.4% 0.003 247.858deg), oklch(92.9% 0.013 255.508deg), transparent);
animation: aurora-animation 10s ease-in-out infinite;
margin: 10px 0;
}
hr.aurora-dark {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgb(66, 102, 148), rgb(211, 203, 231), rgb(93, 130, 192), rgb(152, 165, 220), rgb(41, 55, 97), transparent);
animation: aurora-animation 10s ease-in-out infinite;
opacity: 0.3;
margin: 10px 0;
}
hr.faded-dark {
border: 0;
height: 1px;
background: rgb(41, 55, 97);
animation: aurora-animation 10s ease-in-out infinite;
opacity: 0.3;
margin: 10px 0;
}
button {
font-family: "SpaceMono", sans-serif;
}
/* global.scss or a partial that’s imported there */
@supports (view-transition-name: none) {
/* only browsers that support the API enter here */
@view-transition {
navigation: auto;
}
.card {
view-transition-name: card;
}
}
/* Autofill */
/* baseline input --------------------------------------------------------- */
input {
border: 1px dashed rgba(211, 203, 231, 0.15);
background: transparent;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* generic keyboard focus / click focus ---------------------------------- */
input:focus-visible,
input:focus {
border-color: rgb(152, 165, 220);
outline: 0;
/* outer glow only (no inset background here) */
box-shadow: 0 0 0 1px rgba(152, 165, 220, 0.45);
}
/* Works in Chrome, Edge, Opera, Safari */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
/* ① Paint over the browser’s color */
box-shadow: 0 0 0 1000px #1e1e2f inset; /* your desired background */
-webkit-box-shadow: 0 0 0 1000px #1e1e2f inset;
/* ② Optional: adjust text / caret colors */
-webkit-text-fill-color: #f1f1f1; /* text */
caret-color: #f1f1f1;
/* ③ Prevent Chrome from flashing yellow before our shadow applies */
transition: background-color 9999s ease-in-out;
}
/* Works in Firefox (Gecko) */
input:-moz-autofill {
box-shadow: 0 0 0 1000px #1e1e2f inset;
-moz-text-fill-color: #f1f1f1;
}