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

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

html { font-size: 17px; cursor: url('/cursor/unavailable.cur'), auto}
@media screen and (min-width: 600px) {html {font-size: 18px;} }

:root {    
    --licht: rgb(255, 236, 236);
    --kleur: #d47474;
    --kleur2: #f75757;
}

body {
    width: 100vw;
    height: 100svh;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: url(mijn_bureau.png) 45% center no-repeat;
    background-size: cover;
    background-color: #ffdbdb;
}

header {font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif}

header h1 { text-align: center; font-weight: 300; color: var(--licht); background-color: rgba(4, 2, 4, 0); text-shadow: var(--kleur) 0px 0px 5px, var(--kleur) 0px 0px 10px, var(--kleur) 0px 0px 15px;}
header h2 { text-align: center; font-size: 1em; font-weight: 600; color: var(--licht); text-shadow: var(--kleur) 0px 0px 5px, var(--kleur) 0px 0px 10px, var(--kleur) 0px 0px 15px;} 
header h1 span:nth-child(2) {font-style: italic;}

aside h2 { text-align: center; font-size: 1.2em; font-weight: 300; font-family: "Vibur", cursive;}
aside h2 { color: var(--licht); background-color: rgba(4, 2, 4, 0); padding: 0 1px; text-shadow: var(--kleur) 0px 0px 5px, var(--kleur) 0px 0px 10px;}

.flicker-slow{ animation: flicker 3s linear infinite;}
.flicker-fast{ animation: flicker 1s linear infinite;}
  
@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;   
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
      opacity: 0.4;
  }
}

a {
  color: var(--licht);
  font-size: 1.4em;
  font-weight: 400;
  font-family: "Vibur", cursive;

  padding: 5px;
  margin-top: 20px;

  text-shadow: var(--kleur) 0px 0px 5px, var(--kleur) 0px 0px 10px;

  animation: glow 2s ease-in-out infinite alternate;
  cursor: url('/cursor/link.cur'), auto;
}
  
@keyframes glow {
  from { text-shadow: 0 0 10px var(--licht), 0 0 20px var(--licht), 0 0 30px var(--kleur2), 0 0 40px var(--kleur2), 0 0 50px var(--kleur2), 0 0 60px var(--kleur2), 0 0 70px var(--kleur2);}
  to { text-shadow: 0 0 20px var(--licht), 0 0 30px var(--kleur2), 0 0 40px var(--kleur2), 0 0 50px var(--kleur2), 0 0 60px var(--kleur2), 0 0 70px var(--kleur2), 0 0 80px var(--kleur2);}
}