*,
::before,
::after {
	transition: background-color 0.2s, color 0.2s;
}

:root {
    --color-text: light-dark(#000000, #ffffff);
    --color-lightertext: light-dark(#202020, #b0b0b0);

	--color-ultradark: light-dark(#a6a6a6, #080808);
	--color-dark: light-dark(#d7d7d7, #141414);
	--color-medium: light-dark(#bababa, #1d1d1d);
	--color-light: light-dark(#949292, #2e2e33);

	--color-back: light-dark(#bababa, #19171b);
	--color-pannel: light-dark(#d7d7d7, #121114);

    --color-purple: light-dark(#dcc5d7, #300045);
    --color-light-purple: light-dark(#dcc5d7, #470066);
    --color-ultralight-purple: light-dark(#c487d8, #8300bb);
    
    --color-whitepurple: light-dark(#360845, #eed6f9);

    --color-selectionbackground: light-dark(#9733b988,#a47e2688);
    --color-selectioncolor: light-dark(#eed6f9, #ffffff);
    
    --color-box: light-dark(#dbad6d, #470066);
    --color-hoverbox: light-dark(#c18f4a, #8300bb);

    --home-color-bg: light-dark(rgb(255,230,100), rgb(42, 0, 42));
    --home-color-top: light-dark(rgba(100,0,100,0.8), rgba(255,240,150,0.8)); /* Couleur du background du header (lu dans le fichier app/script.js, ne prend pas en compte le coeff alpha). Aussi la couleur du haut du dégradé derrière le big-text (prend en compte le coeff alpha) */
    --home-color-header-text: light-dark(rgb(255,230,100), rgb(42, 0, 42));
    --home-color-header-hover: light-dark(rgb(57, 0, 57), rgb(255, 226, 62));
    --home-color-big-text: light-dark(rgb(120,0,120), yellow);
    --home-color-text: light-dark(rgb(84,0,84), rgb(255,230,100));

    --left-pannel-width: 20%;

    --violet-deep:  #2B0F52;
    --violet-deep-rgb: 43,15,82;
    --violet-mid:   #45208C;
    --violet-bright:#8A5CF0;
    --yellow:       #F9DD3B;
    --yellow-dim:   #C99A2C;
    --paper:        #F1E7D0;
    --paper-dark:   #DFC998;
    --cream:        #F6EFE2;
    --ink:          #241436;

    --display: "Fraunces", serif;
    --mono: "Space Mono", monospace;
    --body: "Work Sans", sans-serif;
}

::selection {
  background: var(--color-selectionbackground);
  color: var(--color-selectioncolor);
  text-shadow: none;
  border-radius: 3px;
  padding: 2px;
  opacity: 0.6;
}

@font-face {
    font-family: 'ErnestFont';
    src: url('ernest.otf');
}
.ens {
    font-family: 'ErnestFont';
}

.foot{
    height: 30px;
    /*width: calc(100% - 10px);*/
    /*background-color: var(--color-ultradark);*/
    padding: 5px;
    position: fixed;
    bottom: 0px;
}

.switch_lightdark_button {
    background-color: var(--color-medium);
    border: solid var(--color-lightertext) 5px;
    border-radius: 15px;
    cursor: pointer;
    color: var(--color-lightertext);
}

/* Global butons */
.global-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(246,239,226,.2);
  background: var(--violet-mid);
  color: var(--cream);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(43,15,82,.35);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.global-btn-icon{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.global-btn:hover{
  background: var(--violet-bright);
  border-color: var(--yellow);
  transform: translateY(-1px);
}