@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Bungee+Shade&family=Lato:wght@300;400;700&family=Roboto+Slab:wght@200;300;400;500;600;700;800;900&display=swap");
*:focus {
  outline: 2px solid black; }

* {
  box-sizing: border-box; }

.funkykong {
  display: none;
  width: 10%;
  pointer-events: none;
  z-index: 12;
  position: fixed;
  top: 0;
  left: 0; }
  .funkykong img {
    width: 100%;
    z-index: 12;
    pointer-events: none; }

audio {
  display: none; }

@media screen and (min-width: 800px) {
  header {
    margin-bottom: 20px; } }

#content {
  padding: 40px;
  padding-top: 0; }

footer {
  padding: 40px; }

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 10deg; }

.theme--funky .funkykong {
  display: block; }

.theme--funky audio {
  display: block;
  position: fixed;
  visibility: hidden; }

.theme--funky nav, .theme--funky #content, .theme--funky footer {
  background: #ffdd00 !important;
  border: 5px solid;
  transition: --a 0.5s;
  --a:10deg;
  border-image: repeating-linear-gradient(var(--a), #01befe 0 5px, #ffdd00 0 10px, #ff7d00 0 15px, #ff006d 0 20px, #adff02 0 25px, #8f00ff 0 30px) 5;
  animation: 2s rotate ease-in-out infinite;
  animation-direction: alternate-reverse; }

.theme--funky body {
  --r: 56px;
  /* control the size */
  --c1: #ff7d00 /*color 1*/ 99%,#0000 101%;
  --c2: #01befe /*color 2*/ 99%,#0000 101%;
  --s:calc(var(--r)*.866);
  /* .866 = cos(30deg) */
  --g0:radial-gradient(var(--r),var(--c1));
  --g1:radial-gradient(var(--r),var(--c2));
  --f:radial-gradient(var(--r) at calc(100% + var(--s)) 50%,var(--c1));
  --p:radial-gradient(var(--r) at 100% 50%,var(--c2));
  background: var(--f) 0 calc(-5*var(--r)/2), var(--f) calc(-2*var(--s)) calc(var(--r)/2), var(--p) 0 calc(-2*var(--r)), var(--g0) var(--s) calc(-5*var(--r)/2), var(--g1) var(--s) calc( 5*var(--r)/2), radial-gradient(var(--r) at 100% 100%, var(--c1)) 0 calc(-1*var(--r)), radial-gradient(var(--r) at 0% 50%, var(--c1)) 0 calc(-4*var(--r)), var(--g1) calc(-1*var(--s)) calc(-7*var(--r)/2), var(--g0) calc(-1*var(--s)) calc(-5*var(--r)/2), var(--p) calc(-2*var(--s)) var(--r), var(--g0) calc(-1*var(--s)) calc(var(--r)/ 2), var(--g1) calc(-1*var(--s)) calc(var(--r)/-2), var(--g0) 0 calc(-1*var(--r)), var(--g1) var(--s) calc(var(--r)/-2), var(--g0) var(--s) calc(var(--r)/ 2) #01befe;
  /*color 2 again here (yes I got lazy defining a variable ) */
  background-size: calc(4*var(--s)) calc(6*var(--r)); }

@keyframes rotate {
  from {
    --a: 40deg; }
  to {
    --a: 50deg; } }

body {
  font-family: "Lato", sans-serif;
  font-size: 1.2rem;
  margin: 0;
  padding: 20px;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden; }
  .theme--light body {
    background-color: white;
    color: black; }
  .theme--dark body {
    background-color: #1d1d29;
    color: white; }
  .theme--funky body {
    background-color: #01befe;
    color: #8f00ff; }

#content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  min-height: 90vh;
  margin: 0 auto; }
  #content a {
    font-weight: 600; }
    .theme--light #content a {
      color: #0077b6; }
    .theme--dark #content a {
      color: #FD74F1; }
    .theme--funky #content a {
      color: #adff02; }
  @media screen and (min-width: 800px) {
    #content {
      padding-left: 100px;
      width: calc(clamp(60%, 80%, 1600px)); } }
h1 {
  font-family: "Bungee Shade", cursive;
  line-height: 3.2rem;
  font-size: 2.5rem; }
  .theme--light h1 {
    color: black; }
  .theme--dark h1 {
    color: #fdc1f8; }
  .theme--funky h1 {
    color: #8f00ff; }
  h1 span {
    display: inline-block; }

h2, h3, h4 {
  font-family: "Roboto Slab", serif; }
  .theme--light h2, .theme--light h3, .theme--light h4 {
    color: black; }
  .theme--dark h2, .theme--dark h3, .theme--dark h4 {
    color: #fdc1f8; }
  .theme--funky h2, .theme--funky h3, .theme--funky h4 {
    color: #8f00ff; }

.listheading {
  margin-top: 40px;
  border-bottom: 2px solid;
  padding-bottom: 10px;
  font-size: 2rem; }
  .theme--light .listheading {
    border-color: black; }
  .theme--dark .listheading {
    border-color: #FD74F1; }
  .theme--funky .listheading {
    border-color: #ff006d; }

header {
  display: flex;
  display: block; }
  @media screen and (min-width: 800px) {
    header {
      margin-top: 30px;
      padding: 0 40px; } }
  header nav {
    margin: auto;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (min-width: 800px) {
      header nav {
        justify-content: right;
        padding: auto; } }
    header nav a {
      margin: 0 10px;
      text-decoration: none;
      font-family: "Roboto Slab", serif;
      font-weight: 400;
      font-size: 1.2rem; }
      .theme--light header nav a {
        color: black; }
      .theme--dark header nav a {
        color: white; }
      .theme--funky header nav a {
        color: #8f00ff; }
    header nav a:hover {
      font-weight: 600; }

.top {
  max-width: 800px; }

.modetoggle {
  width: max-content; }
  @media screen and (min-width: 800px) {
    .modetoggle {
      position: absolute;
      bottom: 20px;
      right: 20px; } }
  @media screen and (max-width: 800px) {
    .modetoggle {
      margin: auto;
      display: flex; } }
  .modetoggle .mode {
    width: 100%;
    background: none;
    border: 2px solid;
    padding: 5px;
    margin: 10px 5px; }
    .theme--light .modetoggle .mode {
      border-color: black;
      color: black; }
    .theme--dark .modetoggle .mode {
      border-color: white;
      color: white; }
    .theme--funky .modetoggle .mode {
      border-color: #8f00ff;
      color: #8f00ff; }
    .modetoggle .mode#funkymode {
      border: 5px solid;
      border-image: repeating-linear-gradient(45deg, #01befe 0 5px, #ffdd00 0 10px, #ff7d00 0 15px, #ff006d 0 20px, #adff02 0 25px, #8f00ff 0 30px) 3; }

.postlist a {
  text-decoration: none; }
  .theme--light .postlist a {
    color: black; }
  .theme--dark .postlist a {
    color: white; }
  .theme--funky .postlist a {
    color: #8f00ff; }

.postlist.projects {
  margin-bottom: 2rem; }
  @media screen and (min-width: 800px) {
    .postlist.projects {
      columns: 300px auto; }
      .postlist.projects .listheading {
        column-span: all; } }
  .postlist.projects .post {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    max-height: max-content;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px; }
    @media screen and (min-width: 800px) {
      .postlist.projects .post {
        break-inside: avoid;
        transition: box-shadow 0.1s, transform 0.1s; } }
    .postlist.projects .post img {
      width: 100%;
      height: calc(clamp(200px, 200px, 100%));
      object-fit: cover;
      object-position: top; }
    .theme--light .postlist.projects .post {
      border: 3px solid black; }
      @media screen and (min-width: 800px) {
        .theme--light .postlist.projects .post {
          box-shadow: -6px 10px #0077b6; } }
    .theme--dark .postlist.projects .post {
      border: 3px solid #FD74F1; }
      @media screen and (min-width: 800px) {
        .theme--dark .postlist.projects .post {
          box-shadow: -6px 10px #FD74F1; } }
    .theme--funky .postlist.projects .post {
      border: 3px solid #ff006d; }
      @media screen and (min-width: 800px) {
        .theme--funky .postlist.projects .post {
          box-shadow: -6px 10px #adff02; } }
    .postlist.projects .post h3 {
      font-family: "Roboto Slab", serif;
      font-weight: 400;
      font-size: 1.5rem; }
      .postlist.projects .post h3 a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .postlist.projects .post h3 a {
        text-decoration: none; }
        .theme--light .postlist.projects .post h3 a {
          color: black !important; }
        .theme--dark .postlist.projects .post h3 a {
          color: white !important; }
        .theme--funky .postlist.projects .post h3 a {
          color: #8f00ff !important; }
  @media screen and (min-width: 800px) {
    .theme--light .postlist.projects .post:hover {
      box-shadow: -3px 5px #0077b6;
      transform: translate(-3px, 5px); } }
  @media screen and (min-width: 800px) {
    .theme--dark .postlist.projects .post:hover {
      box-shadow: -3px 5px #FD74F1;
      transform: translate(-3px, 5px); } }
  @media screen and (min-width: 800px) {
    .theme--funky .postlist.projects .post:hover {
      box-shadow: -3px 5px #adff02;
      transform: translate(-3px, 5px); } }
.postlist.blogs .post {
  border-radius: 15px;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 400px;
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.1s;
  width: 100%; }
  .theme--light .postlist.blogs .post {
    border: 3px solid black; }
    @media screen and (min-width: 800px) {
      .theme--light .postlist.blogs .post {
        box-shadow: -6px 10px #0077b6; } }
  .theme--dark .postlist.blogs .post {
    border: 3px solid #FD74F1; }
    @media screen and (min-width: 800px) {
      .theme--dark .postlist.blogs .post {
        box-shadow: -6px 10px #FD74F1; } }
  .theme--funky .postlist.blogs .post {
    border: 3px solid #ff006d; }
    @media screen and (min-width: 800px) {
      .theme--funky .postlist.blogs .post {
        box-shadow: -6px 10px #adff02; } }
  @media screen and (min-width: 800px) {
    .postlist.blogs .post {
      display: flex;
      max-width: 1000px; } }
  @media screen and (min-width: 800px) {
    .postlist.blogs .post img {
      position: absolute; } }
  .postlist.blogs .post .text {
    z-index: 2;
    padding: 10px;
    max-width: 80%; }
    @media screen and (min-width: 800px) {
      .postlist.blogs .post .text {
        margin-top: 130px;
        margin-bottom: 20px; }
        .theme--light .postlist.blogs .post .text {
          border: 3px solid black;
          background-color: white; }
        .theme--dark .postlist.blogs .post .text {
          border: 3px solid #FD74F1;
          background-color: #1d1d29; }
        .theme--funky .postlist.blogs .post .text {
          border: 3px solid #ff006d;
          background-color: #01befe; } }
    .postlist.blogs .post .text h3 {
      font-family: "Roboto Slab", serif;
      font-weight: 400;
      font-size: 1.5rem; }
      .theme--light .postlist.blogs .post .text h3 a {
        color: black !important; }
      .theme--dark .postlist.blogs .post .text h3 a {
        color: white !important; }
      .theme--funky .postlist.blogs .post .text h3 a {
        color: #8f00ff !important; }
      .postlist.blogs .post .text h3 a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }

@media screen and (min-width: 800px) {
  .theme--light .postlist.blogs .post:hover {
    box-shadow: -3px 5px #0077b6;
    transform: translate(-3px, 5px); } }

@media screen and (min-width: 800px) {
  .theme--dark .postlist.blogs .post:hover {
    box-shadow: -3px 5px #FD74F1;
    transform: translate(-3px, 5px); } }

@media screen and (min-width: 800px) {
  .theme--funky .postlist.blogs .post:hover {
    box-shadow: -3px 5px #adff02;
    transform: translate(-3px, 5px); } }

footer {
  margin: auto;
  margin-top: 100px;
  text-align: center;
  position: relative; }
  footer .footerlinks {
    width: max-content;
    margin: auto; }
  .theme--light footer {
    color: black;
    background: white; }
  .theme--dark footer {
    color: white;
    background: #1d1d29; }
  .theme--funky footer {
    color: #8f00ff;
    background: #01befe; }
  footer input {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid;
    font-family: "Lato", sans-serif;
    font-size: 1.2rem; }
    .theme--light footer input {
      background-color: white;
      border-color: black;
      color: black; }
    .theme--dark footer input {
      background-color: #1d1d29;
      border-color: #FD74F1;
      color: white; }
    .theme--funky footer input {
      background-color: #01befe;
      border-color: #ff006d;
      color: #8f00ff; }
  footer .contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: auto; }
    footer .contact > * {
      margin: 10px; }

button {
  background: none;
  font-size: 1.2rem; }

.button {
  width: max-content;
  display: block;
  border-radius: 5px;
  padding: 10px;
  text-decoration: none;
  font-family: "Roboto Slab", serif; }
  .theme--light .button {
    border: 2px solid black;
    color: black !important; }
  .theme--dark .button {
    border: 2px solid #FD74F1;
    color: white !important; }
  .theme--funky .button {
    border: 2px solid #ff006d;
    color: #8f00ff !important; }
  .button img {
    max-height: 20px;
    margin-right: 10px; }

.theme--light .button:hover {
  background-color: black;
  color: white !important; }

.theme--dark .button:hover {
  background-color: #FD74F1;
  color: #1d1d29 !important; }

.theme--funky .button:hover {
  background-color: #ff006d;
  color: #01befe !important; }

#content img {
  min-width: 100%; }

#content p {
  line-height: 1.8rem; }

#content li {
  line-height: 1.8rem;
  margin-bottom: 10px; }

#content .postbody h2, #content .postbody h3, #content .postbody h4 {
  margin-top: 50px;
  margin-bottom: 20px; }

#content .postbody h2 {
  font-size: 3rem; }

#content .postbody h3 {
  font-size: 2rem; }

#content .postbody h4 {
  font-size: 1.2rem; }

#content .postbody table {
  border-collapse: collapse; }
  #content .postbody table td, #content .postbody table th {
    padding: 5px; }
    .theme--light #content .postbody table td, .theme--light #content .postbody table th {
      border: 2px solid black; }
    .theme--dark #content .postbody table td, .theme--dark #content .postbody table th {
      border: 2px solid white; }
    .theme--funky #content .postbody table td, .theme--funky #content .postbody table th {
      border: 2px solid #8f00ff; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.9); }

.modal-body {
  position: fixed;
  padding: 20px;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  min-width: 200px;
  overflow: auto; }
  .theme--light .modal-body {
    background-color: white;
    border: 2px solid black;
    color: black; }
  .theme--dark .modal-body {
    background-color: #1d1d29;
    border: 2px solid #FD74F1;
    color: white; }
  .theme--funky .modal-body {
    background-color: #01befe;
    border: 2px solid #ff006d;
    color: #8f00ff; }
  .modal-body h1 {
    font-family: "Roboto Slab", serif;
    font-weight: 400;
    font-size: 2rem;
    margin-bottom: 20px; }
  .modal-body .close {
    font-size: 0.8rem !important;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem; }
    .theme--light .modal-body .close {
      color: black; }
    .theme--dark .modal-body .close {
      color: white; }
    .theme--funky .modal-body .close {
      color: #8f00ff; }
  .modal-body input {
    display: block;
    margin: 10px auto; }
  .modal-body .button.submit {
    margin: auto; }

.coffee {
  margin: auto;
  display: flex;
  align-items: center; }
  .coffee img {
    max-width: 30px;
    margin-right: 10px; }