@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');

@-webkit-keyframes nxxGradient {
    0%{background-position:0% 43%}
    50%{background-position:100% 58%}
    100%{background-position:0% 43%}
}
@-moz-keyframes nxxGradient {
    0%{background-position:0% 43%}
    50%{background-position:100% 58%}
    100%{background-position:0% 43%}
}
@keyframes nxxGradient {
    0%{background-position:0% 43%}
    50%{background-position:100% 58%}
    100%{background-position:0% 43%}
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

#logo {
}

body, #header, #header h1, #header h3, #header p, #header a, #header a:hover {
  color: white;
}

h1#hero {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 450%;
}

#notes {
    transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(0deg) rotateZ(-30deg);
  box-shadow: -10px 10px 5px 3px rgba(0,0,0,0.3);
  border-radius: 4px;
}

#notes, #notes p {
  line-height: 160%;
  font-size: 200%;
  color: #333;
  font-family: 'Patrick Hand SC', cursive;
}

#header {
background: -webkit-linear-gradient(218deg, #ff505e, #b829e3, #0070dd);
background: -moz-linear-gradient(218deg, #ff505e, #b829e3, #0070dd);
background: -o-linear-gradient(218deg, #ff505e, #b829e3, #0070dd);
background: linear-gradient(308deg, #ff505e, #b829e3, #0070dd);
  background-size: 600% 600%;

  -webkit-animation: nxxGradient 23s ease infinite;
  -moz-animation: nxxGradient 23s ease infinite;
  animation: nxxGradient 23s ease infinite;
}