@import url('https://fonts.googleapis.com/css2?family=Artifika&display=swap');
:root {
	--dark: #2e222f;
	--nigga-dark: #45294f;
	--dim: #3e3546;
	--dim-alternative: #323353;
	--gray: #625565;
	--less-dark: #313638;
	--darkest-purple: #484a77;
	--orange: #ea4f36;
	--gruv-orange: #fb6b1d;
	--teal-orange: #e6905e;
	--midwest-orange: #f57d4a;
	--dark-orange: #cd683d;
	--clay: #966c6c;
	--clay-alt: #694f62;
	--hardened-clay: #6e2727;
	--raw-borden: #7a3045;
	--darkened-clay-orange: #9e4539;
	--yellow: #f9c22b;
	--orange-juice: #f79617;
	--pastel-yellow: #fbb954;
	--lightened-yellow: #fbff86;
	--lemonade-yellow: #d5e04b;
	--white: #ffffff;
	--teal: #fdcbb0;
	--sand: #ab947a;
	--skin: #fca790;
	--red: #e83b3b;
	--dark-red: #ae2334;
	--borden: #b33831;
	--purple: #6b3e75;
	--magenta: #905ea9;
	--light-purple: #a884f3;
	--pfister-pink: #eaaded;
	--nigga-pink: #753c54;
	--ebony-pink: #a24b6f;
	--cute-pink: #cf657f;
	--light-cute-pink: #ed8099;
	--night-pink: #831c5d;
	--reddened-pink: #c32454;
	--hot-pink: #f04f78;
	--skin-pink: #f68181;
	--dark-moss: #4c3e24;
	--moss: #676633;
	--gruv-green: #a2a947;
	--pastel-green: #91db69;
	--teal-green: #1ebc73;
	--dark-teal-green: #239063;
	--ocean-green: #547e64;
	--light-moss: #cddf6c;
	--dark-blue: #165a4c;
	--ocean-blue: #374e4a;
	--less-dark-blue: #0b5e65;
	--blue: #0b8a8f;
	--light-blue: #0eaf9b;
	--turquoise: #30e1b9;
	--pastel-blue: #8ff8e2;
	--blue-alternative: #4d9be6;
	--purple-blue: #4d65b4;
	--diamond-blue: #8fd3ff;
	--extra-clay: #7f708a;
	--white-blue: #9babb2;
	--diamond-white: #c7dcd0;
}

contents {
	opacity: 1;
}


body {
	background-color: var(--dark);
	color: var(--teal);
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	font-family: "Artifika";
	overflow: hidden;
	background: linear-gradient(rgba(46, 34, 47, 0.9), rgba(46, 34, 47, 0.9)), 
                url('/images/schizopolitique-background.png') no-repeat center center;
	background-size: cover;
}

bold {
	font-weight: bold;
}

italic, oblique {
	font-style: italic;
}

#title-1 {
	text-align: center;
	opacity: 1;
	font-size: 48px;
	text-shadow: 2px 2px var(--teal-orange);
}

#splitting-text {
	font-size: 20px;
	text-align: center;
}

#built-by-text {
	display: block;
    padding-top: 2.7%;
	text-align: center;
	width: 100%;
	font-size: 16px;
	color: var(--white);
	align-self: flex-end;
	cursor: default;
}

#built-by-img {
	display: inline;
	position: relative;
	border-radius: 50%;
	width:100%;
	max-width: 18px;
	vertical-align:bottom;
	margin-top: 1.5%;
}

#catriverr {
	display: inline;
	text-shadow: 2px 1px var(--magenta);
	color: var(--pfister-pink);
	transition: color 0.5s ease-in-out;
}

#catriverr:hover {
	color: var(--diamond-blue);
	cursor: pointer;
	transition: color 0.5s ease-in-out;
}

.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-size: cover;
	pointer-events: none; /* Ensure this layer doesn't interfere with mouse events */
    z-index: -1; /* Place it behind other content */
	background: url("/images/schizopolitique-background.png") no-repeat center center;
	background-size: cover;

	-webkit-mask-image: radial-gradient(circle 75px at var(--clip-x, 50%) var(--clip-y, 50%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle 75px at var(--clip-x, 50%) var(--clip-y, 50%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

	clip-path: circle(75px at var(--clip-x, 50%) var(--clip-y, 50%)); /* Initial clip-path for a circle */
	transition: clip-path 0s ease-out;
}


.cursor-area {
    position: absolute;
    width: 270px; /* Adjust the size of the circle as needed */
    height: 270px; /* Adjust the size of the circle as needed */
    border-radius: 50%; /* Ensure it's a circle */
    pointer-events: none; /* Let mouse events pass through */
    z-index: 999; /* Ensure it's above other content */
    display: none; /* Initially hide the cursor area */
	opacity: 1;
}

#infobox {
	display: block;
	border-color: #625565;
	border-radius: 10px;
	border-width: 3px;
	border-style: solid;
	width: 93.3%;
	height: 78%;
	text-align: left;
    margin: auto;
    margin-top: 0.5%;
}

#title2 {
	font-size: 3vh;
	text-align: center;
	color: var(--pastel-green);
	text-shadow: 2px 2px black;
}
#normaltext {
	display: block;
	text-align: left;
	padding-left: 10px;
    font-size: 2vh;
}

gdel {
	display: inline;
	color: var(--white-blue);
	text-shadow: 2px 2px var(--purple-blue);
	transition: all 0.3s ease-out;
}

gdel:hover {
	color: var(--blue-alternative);
	text-shadow: 2px 2px black;
	transition: all 0.3s ease-in;
	cursor: pointer;
}

highlight1 {
	color: var(--blue);
	text-shadow: 2px 2px black;
}

highlight2 {
	color: var(--dark-red);
	text-shadow: 2px 2px black;
}

highlight3 {
	color: var(--gruv-orange);
	text-shadow: 2px 2px black;
}

highlight4 {
	color: var(--pastel-yellow);
	text-shadow: 2px 2px black;
}

verywrong {
	color: var(--red);
	text-shadow: 2px 2px var(--dark-orange);
}

#gilles {
    display: block;
	width: 50%;
	max-width: 30vh;
	margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
	border-radius: 4%;
	filter: brightness(.4);
	transition: all 0.3s;
}

#gilles:hover {
	filter: brightness(.7);
	cursor: pointer;
	transition: all 0.3s;
}

#gilles_text {
    width: 100%;
    margin-top: 0.25%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

#gdels {
	display: inline;
	color: var(--white-blue);
	text-shadow: 2px 2px var(--purple-blue);
	transition: all 0.3s ease-out;
}
#gdels:hover {
	display: inline;
	cursor: pointer;
	color: var(--blue-alternative);
	text-shadow: 2px 2px black;
	transition: all 0.3s ease-in;
}