@font-face {
  font-display: swap;
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v23-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Gupter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gupter-v14-latin-regular.woff2") format("woff2");
}

:root {
  --COLOURI: #f4c2c2;
  --COLOURII: #4d2729;
  --COLOURIII: #d8ebf5;
  --COLOURIV: #0091a1;
  --COLOURV: #feebd6;
  --COLOURVI: #2f2c23;
}

html { scroll-behavior: smooth; }

body { font-family: "Gupter"; background: var(--COLOURV); }

header img { width: 100%; height: 100%; }

.bgblack { background: var(--COLOURII); }

.janetdoe { background: var(--COLOURI) !important; color: var(--COLOURII) !important; }
.resume { background: var(--COLOURIV) !important; color: var(--COLOURIII) !important; }
.work { background: var(--COLOURVI) !important; color: var(--COLOURIII) !important; }
.contact { background: var(--COLOURIII) !important; color: var(--COLOURVI) !important; }

header .port-item { width: 30%; }
header .port-item:hover { opacity: 0.8; cursor: pointer; }

footer .developer, #developer { font: bold 1.2rem "Gabriela"; color: #ffffff; text-shadow: 1px 1px 2px #ffd700, 0 0 25px #000000, 0 0 5px #000000; }
#developer { letter-spacing: 0.4rem; }