@font-face {
  font-family: "FreightDisp W03 Light";
  src: url("https://db.onlinewebfonts.com/t/04db118a9b25f4da283aa41813aa6c22.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/04db118a9b25f4da283aa41813aa6c22.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/04db118a9b25f4da283aa41813aa6c22.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #000;
  background: #fff;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
}

/* HEADER CENTER*/
.header-center {
  font-family: "FreightDisp W03 Light", serif;
  font-weight: 300;
  font-size: 22px;
  cursor: pointer;
}

.header-center a {
  text-decoration: none;
  color: #000;
}

/* HEADER CENTER RAINBOW */
.header-center {
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-center a {
    text-decoration: none;  
    color: inherit;         
    cursor: pointer;        
}

.header-center a:hover {
    color: inherit;
    text-decoration: none;
}

/* Rainbow */
.header-center {
  display: inline-block;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Regenboog animatie op hover */
.header-center:hover {
  animation: rainbow-text 0.7s linear infinite;
}

@keyframes rainbow-text {
  0%   { color: #ff0000; }   
  10%  { color: #ff3300; }   
  20%  { color: #ff6600; }   
  30%  { color: #ffcc00; }   
  40%  { color: #ccff00; }   
  50%  { color: #00ff00; }   
  60%  { color: #00ffcc; }   
  70%  { color: #00ccff; }  
  75%  { color: #3300ff; }  
  80%  { color: #9900ff; }   
  90%  { color: #ff00ff; }   
  95%  { color: #ff66cc; }   
  100% { color: #ff0000; }   
}

/* HEADER LEFT & RIGHT*/
.header-left-right {
  text-align: right;
  font-style: italic;
  line-height: 1.4;
}

.header-left-right a {
  color: #000;           
  text-decoration: none; 
}

/* FOOTER */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 25px 30px; 
  font-size: 10px;
}

/* Left en Right smaller zodat center echt gecentreerd is */
.footer-left {
  text-align: left;
}

.footer-left a {
  color: #000;           
  text-decoration: none; 
}

.footer-right a {
  color: #000;           
  text-decoration: none; 
}

/* ABOUT ME MAIN */
.about-me {
  display: flex;
  flex: 1;
  align-items: center;     
  min-height: 50vh;        
  padding: 0 30px;         
}

/* CONTENT IN DE MIDDEL */
.about-me-intro {
  max-width: 650px;   
  text-align: left;  
}

.about-me-intro p {
  margin-bottom: 20px; 
  line-height: 1.3;    
}