@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Raleway&display=swap');

:root {
	--textStyle: "Raleway";
  --titleStyle: "Raleway";
  --fontSize: 1.1em;
  --menuWidth: 300px;
    	--nomCompostante: "";
}

html[data-theme='light'] {
  --homeBG1: #c1002a;
  --homeBG2: white;
  --linkColor: #c1002a;
  --btnBG:#250712;
  --borderColor: #c1002a;
  --toolboxBG:#F6E9E6;
  --toolboxFG:#72565D;
  --toolboxActiveBG:#FBD5D9;
  --toolboxActiveFG: #c1002a;
  --contentBG: white;
  --contentFG: #3F3F3F;
  --contentLightFG: #7b7b7b;
  --accentDarkBG: #AD364B;
  --accentDarkFG: #ffffff;
  --accentLightBG: #E8CEC4;
  --accentLightFG: #000;
  --pBkText: #a86290;
  --pBkTextLight: #E8DFFF;
  --pBkDemo: #3b4395;
  --pBkDemoLight: #e0e8fb;
  --pBkExpression: #85a34b;
  --pBkExpressionLight: #ebf9d2;
  --pBkWarning: #fe7429;
  --pBkWarningLight: #fef1e9;
  --pBkComplement: #adaf1a;
  --pBkComplementLight: #FFF9C6;
  --headerBG: white;
  --headerFG:#3F3F3F;
  --footerBG: white;
  --footerFG:#3F3F3F;
  --quizAnswerBG:#e2f8d9;
  --quizAnswerFG:#295716;
  --quizWorstFG:#aa1016;
  --quizWorstBG:#ffe7e7;
  --quizBadFG:#cd903c;
  --inputBG:#F6E9E6;
  --inputBorder:#bababa;
  --inputFocus:#AD364B;
}

html[data-theme='dark'] {
  --homeBG1:#3d3a38;
  --homeBG2:#c1002a;

  --linkColor:#dddc00;

	--btnBG:#FBD5D9;

  --borderColor: #3F3F3F;

  --toolboxBG:#3b3b3b;
  --toolboxFG:#FFE5F3;
  --toolboxActiveBG:#250712;
  --toolboxActiveFG:#FFE5F3;

  --contentBG:#292929;
  --contentFG: #E5D4DC;
  --contentLightFG: #c0c0c0;

  --accentDarkBG: #FF94A7;
  --accentDarkFG: #000000;
  --accentLightBG: #3F3F3F;
  --accentLightFG: #fff;

	--pBkText:#e7c8ff;
	--pBkTextLight:#a86290;
	--pBkDemo:#d0d3fb;
	--pBkDemoLight:#6268aa;
	--pBkExpression:#ebffd1;
	--pBkExpressionLight:#acce69;
	--pBkWarning:#fed5be;
	--pBkWarningLight:#fe7429;
	--pBkComplement:#f2ebab;
	--pBkComplementLight:#adaf1a;

  --headerBG:#292929;
  --headerFG:#E5D4DC;

  --footerBG:#292929;
  --footerFG:#E5D4DC;

  --quizAnswerBG:#293e21;
  --quizAnswerFG:#3ca610;
  --quizWorstFG:#ff5d63;
  --quizWorstBG:#36191a;
  --quizBadFG:#bf740e;

  --inputBG: #3B3B3B;
  --inputBorder: #191919;
  --inputFocus: #FF94A7;
}

@font-face {
  font-family: 'mapleLight';
  src: url('res/Maple-Light.otf');
}

#home{
	background: url('res/leCnam_logo_rouge.svg') top 3rem right 3rem no-repeat;
	background-size: auto 2rem;
	&> div .home_ti {
	    font-weight: 600;
		color: white;
		margin-inline-start: 3rem;
		margin-block-start: 3em;
	}
	&:after{
    content: var(--nomComposante);
    position: absolute;
    right: 3rem;
    top: 5.5rem;
    color: #405a68;
    font-size: 1.83rem;
    font-family: "mapleLight";
	}
	&:before{
		background: url("res/FacadeCnamBlanc.svg") bottom 1.5rem center no-repeat;
		background-size: 90%;
		animation: none;
		top: 8.3rem;
		left: 3rem;
		background-color:var(--homeBG1);
	}
	.home_co{
		margin-inline-start:3rem;
		color: white;
	}
	&> div > nav{
		margin-inline-start:3rem;
		.loadingMessage{
			color:white;
		}
		button{
			background:white;
			color:var(--homeBG1);
		}
	}
}

html[data-theme='dark'] #home{
  background-image: url('res/leCnam_logo_blanc.svg');
	button {
	    background:var(--linkColor);
	}
  &:after{
    color:white
	}
}