@charset "utf-8";
/* 
	Author :: Elodie BAYET
	Origin :: Belgium, EU
	  Role :: Fullstack Web Developer
	  Date :: 2018.08 + 2022.03 + 2025.01
*/

/*
Part I : Base
	•• Models
	•• Normalize
	•• Typography
	•• Composition
Part II : Components
	•• Generic
	•• Lists
	•• Elements
	•• Dedicated Content
	•• Evolved System
*/


/*
	Part I : Base
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* Color Variables */
:root {
    --font-color: rgb(38, 26, 26); /* 10% */
    --bg-color: rgb(242, 239, 239); /* 94% */
    /* Greys */
	--bright: rgb(255, 255, 255);
    --light: rgb(217, 212, 212); /* 85% */
	--m-light: rgb(172, 166, 166); /* 65% */
    --medium: rgb(134, 128, 128); /* 50% */
    --m-dark: rgb(95, 89, 89); /* 35% */
    --dark: rgb(64, 58, 58); /* 25% */
	--obscur: rgb(0, 0, 0);
    /* Theme colors */
    --lighten: rgb(236, 102, 51);
	--original: rgb(160, 20, 0);
    --darken:  rgb(128, 32, 18);
	/* Status colors */
	--lt-error: rgb(217, 6, 0);
	--error: rgb(191, 6, 0);
	--dk-error: rgb(166, 6, 0);
	--lt-valid: rgb(26, 217, 0);
	--valid: rgb(20, 191, 0);
	--dk-valid: rgb(6, 166, 0);
}

/* Animations */
@keyframes Disapear {
	0% { 
		text-shadow: 0px 6px 4px var(--m-light);
		opacity: 1;
	}
	100% { 
		text-shadow: 0px 0px 0px var(--m-light);
		opacity: .5;
	}
}


/*
	Normalize
*/
body {
	color: var(--font-color);
	background-color: var(--light);
}

main {
	color: inherit;
	background-color: var(--bg-color);
	border-radius: 4px;
	box-shadow: 0px 16px 10px 2px var(--medium);
}

input, input:invalid, select, button {
    border: none;
}

input:invalid, textarea:invalid{
	box-shadow: none;
}


/*
	Typography
*/

h1 {
	font-family: "Sansation", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-shadow: 0px 6px 4px var(--m-light);
	color: var(--darken);
	background-color: transparent;
}
h2, h3, h4 {
	font-family: "Sansation", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: var(--dark);
	background-color: transparent;
}
h5, h6, strong, em {
	color: var(--obscur);
	background-color: transparent;
}
p sub, p sup {
	color: var(--obscur);
	background-color: transparent;
}


/* 
	Composition
*/

header nav ul li a, 
header nav ul li a:link, 
header nav ul li a:visited {
	font-family: "Sansation", sans-serif;
	font-weight: 700;
	color: var(--darken);
	text-shadow: 0px 6px 4px var(--m-light);
}
header nav ul li a:hover, 
header nav ul li a:focus, 
header nav ul li a:active {
	color: var(--original);
	text-shadow: 0px 7px 5px var(--m-light);
}

.applogo .title {
	font-family: "Sansation", sans-serif;
	font-weight: 400;
	font-size: 3.6rem;
	color: var(--light);
	text-shadow: 0px 4px 5px var(--m-dark);
}
.applogo:hover .title {
	color: var(--bright);
}

/*
	Part II : Components
*/

/*
	Generic
*/

a, a:link, a:visited, button, .button, figure img,
input[type="submit"], input[type="reset"], input[type="button"],
label.box, .choice, .choice *, .toggle *, .toggle::before, .applogo .title {
	-webkit-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

main a:not(.button), main a:not(.button):link, main a:not(.button):visited {
	color: var(--original);
	background-color: transparent;
	font-weight: 600;
	text-decoration: underline var(--dark) dashed 1px;
}
main a:not(.button):hover, main a:not(.button):focus, main a:not(.button):active {
	color: var(--darken);
	background-color: transparent;
	text-decoration: underline var(--dark) dashed 1px;
}

.nothing::before {
	color: var(--error);
}
.errnote {
	color: var(--obscur);
	background-color: transparent;
	border: 1px solid var(--error);
	padding: 6px 12px;
}

.light {
	color: var(--light);
}
.m-light {
	color: var(--m-light);
}
.medium {
	color: var(--medium);
}
.m-dark {
	color: var(--m-dark);
}
.dark {
	color: var(--dark);
}


/*
	Lists
*/
main .listitem li::before {
	font-weight: 400;
	color: var(--original);
	padding-right: 6px;
}
main ul.listitem li::before {
	content: "⨀";
}
main ol.listitem li:first-of-type {
	counter-reset: ol;
}
main ol.listitem li::before {
	counter-increment: ol;
	content: counter(ol, lower-greek);
}

/*
	Elements
*/

noscript {
	border: 1px solid var(--m-dark);
}

/* Buttons */
.button {
	font-family: "Sansation", sans-serif;
	font-weight: 400;
	color: var(--bright);
	background-color: var(--darken);
	background-image: linear-gradient(160deg, var(--lighten), var(--darken), var(--darken));
	border-radius: 4px;
	box-shadow: 0px 6px 6px 1px var(--m-light);
	opacity: 1;
}
.button:hover {
	opacity: .9;
	box-shadow: 1px 6px 7px 2px var(--m-light);
}
.button.disabled, .button:disabled {
	color: var(--dark);
	background-color: var(--medium);
}
.button.disabled:hover, .button:disabled:hover {
	cursor: not-allowed;
}
.button.icon span {
	background-color: rgba(255, 255, 255, .9);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 18px;
	border-right: 2px solid var(--obscur);
	border-radius: 2px 0 0 2px;
}
.button.icon .github {
	background-image: url('https://www.elodiebayet.com/assets/icons/icon_github.svg');
}


/*
	Dedicated Blocks
*/

/* Topics */
.topic > div {
	background-color: var(--light);
	border-radius: 4px;
	border-bottom: 1px solid var(--bright);
	box-shadow: 0px 6px 6px 1px var(--m-light) inset;
	-webkit-transition: .33s ease-in-out;
	transition: .33s ease-in-out;
}
.topic > div h3 {
	color: var(--darken);
	background-color: transparent;
}
.topic > div p {
	color: var(--obscur);
	background-color: transparent;
}
.topic > div h3,
.topic > div p {
	text-shadow: 0px 6px 4px var(--m-light);
	-webkit-transition: .33s ease-in-out;
	transition: .33s ease-in-out;
}
.topic > div:hover h3 {
	color: var(--original);
}
.topic > div:hover p {
	color: var(--dark);
}
.topic > div:hover h3,
.topic > div:hover p {
	text-shadow: 0px 7px 5px var(--m-light);
}


/*
	Evolved System
*/

/* Chrono Block */
.chrono p {
	color: var(--bright);
	background-color: transparent;
}
.chrono.break p {
	animation: Disapear .75s ease-in 0s infinite alternate none;
}

/* Tasks Block */
.tasks li {
	padding-bottom: 12px;
	border-bottom: 2px dotted var(--medium);
}
.tasks li span s {
	color: var(--m-dark);
	text-decoration-style: line-through;
	text-decoration-style: wavy;
	text-decoration-color: var(--original);
	text-decoration-thickness: 2px;
}

/* Form Block */
.chrono,
form .toggle, form .choice,
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="url"],
form select,
form textarea {
	text-shadow: 0px 5px 3px var(--m-light);
	color: var(--obscur);
	background-color: var(--light);
	border-width: 1px;
	border-style: solid;
	border-color: var(--bg-color) var(--bg-color) var(--bright);
	border-radius: 4px;
	box-shadow: 0px 6px 6px 1px var(--m-light) inset;
}
form .error input[type="text"],
form .error input[type="email"],
form .error input[type="number"],
form .error input[type="url"],
form .error select,
form .error textarea {
	color: var(--dk-error);
	border-color: var(--dk-error) var(--dk-error) var(--lt-error);
}
form input[type="text"]:read-only,
form input[type="email"]:read-only,
form input[type="number"]:read-only,
form input[type="url"]:read-only,
form textarea:read-only {
	outline: 0;
	text-shadow: none;
	color: var(--dark);
	background-color: var(--bg-color);
	border-color: var(--m-light);
	box-shadow: none;
}

form .choice::before,
form .toggle::before {
	font-size: 2.4rem;
	text-shadow: none;
	color: var(--dark);
	position: absolute;
	display: block;
	left: -7px;
}
form .choice::before {
	content: "□";
}
form .choice.on::before,
form .choice:hover::before {
	content: "■";
	color: var(--original);
}
form .toggle::before {
	content: "○";
}
form .toggle.on::before,
form .toggle:hover::before {
	content: "●";
	color: var(--original);
}
form .choice strong,
form .toggle strong {
	color: var(--m-dark);
}
form .choice.on span,
form .choice:hover span,
form .toggle.on span,
form .toggle:hover span {
	color: var(--obscur);
}
form .choice.on strong,
form .choice:hover strong,
form .toggle.on strong,
form .toggle:hover strong {
	color: var(--darken);
}

form .error .box,
form .error .slab {
	color: var(--lt-error);
	font-weight: 600;
}

form input[type="submit"],
form input[type="reset"],
form input[type="button"] {
	font-family: "Sansation", sans-serif;
	font-weight: 700;
	letter-spacing: .2rem;
	background-color: transparent;
	text-transform: uppercase;
	border-top-width: 2px;
	border-top-style: solid;
}
form input[type="submit"]:not(:disabled), 
form input[type="reset"]:not(:disabled),
form input[type="button"]:not(:disabled) {
	text-shadow: 0px 4px 2px var(--m-light);
	color: var(--darken);
	background-image: radial-gradient(ellipse closest-side at 50% 50%, var(--m-light), var(--light), transparent);
	background-position-y: -24px;
  	background-repeat: no-repeat;
	border-top-color: var(--medium);
}
form input[type="submit"]:hover,
form input[type="reset"]:hover,
form input[type="button"]:hover {
	color: var(--original);
	border-top-color: var(--dark);
}
form input[type="button"]:disabled,
form input[type="reset"]:disabled,
form input[type="submit"]:disabled {
	color: var(--m-light);
	border-top-color: var(--light);
}
form input[type="button"]:disabled:hover,
form input[type="reset"]:disabled:hover,
form input[type="submit"]:disabled:hover {
	cursor: not-allowed;
}

form .currency span {
	color: var(--bright);
	background-color: var(--original);
	background-image: linear-gradient(-20deg, var(--lighten), var(--darken));
	border-radius: 0 4px 4px 0;
	border-top: 1px solid var(--darken);
	border-right: 1px solid var(--lighten);
	border-bottom: 1px solid var(--bright);
}
form .currency.error span {
	background-color: var(--error);
	background-image: linear-gradient(-20deg, var(--lt-error), var(--dk-error));
	border-top: 2px solid var(--dk-error);
	border-right: 1px solid var(--error);
	border-bottom: 1px solid var(--lt-error);
}

form .value span {
	color: var(--medium);
	border-radius: 4px;
	border: 1px solid var(--m-light);
}
form .value span::after {
	content: " ";
    position: absolute;
    border-width: 8px;
    border-style: solid;
	border-color: transparent transparent var(--m-light) transparent;
    bottom: 100%;
	right: 50%;
	margin-left: -4px;
}