/*——————————————————————————————————————————————————
	COLOURS
  ——————————————————————————————————————————————————*/

:root {
  --body: #ffffff;
  --text: #2e2e2e;
  --color-1: #f95738;
  --color-2: #2f8c5c;
  --color-3: #ff00ff;
  --color-4: #a1a1ff;
}
:root.scheme-1 {
  --body: #ffffff;
  --text: #2e2e2e;
  --color-1: #f95738;
  --color-2: #2f8c5c;
  --color-3: #ff00ff;
  --color-4: #a1a1ff;
}
:root.scheme-2 {
  --body: #ffffff;
  --text: #2e2e2e;
  --color-1: #297bff;
  --color-2: #f5b2cc;
  --color-3: #ff7f00;
  --color-4: #fff200;
}
:root.scheme-3 {
  --body: #ffffff;
  --text: #2e2e2e;
  --color-1: #17ff75;
  --color-2: #cb5aff;
  --color-3: #f42a2a;
  --color-4: #76ffff;
}

html {
  background: var(--body);
  color: var(--text);
}

.c-cursor__img > * {
  fill:var(--color-3);
}

.colour-1 .colour-text,
.colour-1 a:hover {
  color:var(--color-1);
}
.colour-1 .colour-icon > svg > * {
  fill:var(--color-1);
}
.colour-2 .colour-text,
.colour-2 a:hover {
  color:var(--color-2);
}
.colour-2 .colour-icon > svg > * {
  fill:var(--color-2);
}
.colour-3 .colour-text,
.colour-3 a:hover {
  color:var(--color-3);
}
.colour-3 .colour-icon > svg > * {
  fill:var(--color-3);
}
.colour-4 .colour-text,
.colour-4 a:hover {
  color:var(--color-4);
}
.colour-4 .colour-icon > svg > * {
  fill:var(--color-4);
}



a:hover .colour-text {
  color:var(--text) !important;
}
a:hover .colour-icon > svg > * {
  fill:var(--text) !important;
}

.underline {
  position:relative;
}
.underline:after {
  content:'';
  position:absolute;
  width:100%;
  border-bottom: 2px solid;
  bottom: 18%;
  transform:scaleX(0);
  left:0;
  transform-origin: left;
  transition:transform 0.2s ease;
}
.underline:hover:after {
  transform:scaleX(1);
}
@media all and (max-height:1000px) {
  .underline:after {
    border-bottom: 1px solid;
  }
}