@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');

/* ========== VARIABLES ========== */
:root {
    --red: #ffcaca;
    --orange: #ffedc1;
    --yellow: #feffb8;
    --green: #c4ffcb;
    --blue: #add8ff;
    --purple: #ccafe9;
    --pink: #EBADCB;

    --lightblue: #d1e9ff;

    --white: #ffffff;
    --lightgray: #9EADBD;
    --darkgray: #6D839C;
    --black: #011627;


    --lessred: #ffcacaaa;
    --lessorange: #ffedc1aa;
    --lessyellow: #feffb8aa;
    --lessgreen: #c4ffcbaa;
    --lessblue: #add8ffaa;
    --lesspurple: #ccafe9aa;

    --lesswhite: #ffffffdd;

    --bluehint: #add8ff55;
    --pinkhint: #efbdd555;

    --gradient: linear-gradient(45deg, var(--blue), var(--pink));

    --rainbow: linear-gradient(to bottom, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%,  var(--purple) 100%);
    --rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%,  var(--purple) 100%);
    --rainbowdiag: linear-gradient(125deg, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%,  var(--purple) 100%);

    --hrainbow: linear-gradient(to right, #00000000 0%, var(--lessred) 10%, var(--orange) 20%, var(--yellow) 30%, var(--green)70%, var(--blue) 80%,  var(--lesspurple) 90%, #00000000 100%);
    --bgrainbow: linear-gradient(to right, var(--lessred) 0%, var(--lessorange) 20%, var(--lessyellow) 40%, var(--lessgreen) 60%, var(--lessblue) 80%,  var(--lesspurple) 100%);

    --default: url(images/cursor/default.png);
    --pointer: url(images/cursor/pointer.png);
}




* {
  overflow-wrap:break-word;
  cursor: var(--default), auto;
}

html{
  min-height: 100%;
}

body {
  color: var(--black);
  font-family: Merriweather, Georgia, serif;
  font-weight: normal;

  margin: 0;
  padding: 0;

  background-color: var(--blue);


  min-height: 100%;
  height: 100%;

  /* background-image: linear-gradient(to bottom, var(--black) 0%, #242430 30%, #111119 60%);
  background-size: auto;
  background-position: center; */
}


p, a, input, button, textarea {
  font-family: Merriweather, Georgia, serif;
}


a {
  /* cursor: var(--pointer), auto; */
  display: inline-block;
  color: inherit;
  position: relative;
  text-decoration: none;

}

.content-box a {
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 3px;

  color: var(--darkgray);

}

.content-box a:hover{
  text-decoration: none;

  color: var(--black);

  background: var(--rainbowright);
  -webkit-background-clip: highlight;
}

.content-box a[target="_blank"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
}


h1, h3, h4, h5, h6 {
  font-family: Roboto, sans-serif;
}

h2 {
  font-style: italic;
  font-size: 24px;
  margin-top: 10px;
  margin-left: 50px;
  margin-bottom: 5px;
  color: var(--darkgray);
}

hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium dotted transparent;

  border-image: var(--hrainbow);
  border-image-slice: 1;
  text-align: center;
  position: relative;

  height: 0;
  margin-top: 10px;
  margin-bottom: 30px;
}

hr::after {
  content: "‧̍̊˙· 𓆝.° ｡˚𓆛˚｡ °.𓆞 ·˙‧̍̊";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: min(1.5em, 5vw);
  padding: 0 0.5em;
  background: var(--lightblue);


  color: var(--lightgray);
  font-weight: 100;

}

svg path {
  fill: var(--darkgray);
}
svg:hover path {
  fill: var(--lightgray);
}

::selection{
  color: var(--darkgray);
  background-color: var(--blue);
}




form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20%;
  font-size: inherit;
}

input, textarea {
  padding: 10px;
  background-color: transparent;
  border: 3px solid var(--lightgray);
  border-radius: 10px;
  display: block;
  font-size: inherit;
}

input:focus, textarea:focus {
  border: 3px solid var(--darkgray);
  outline: none;
}


button[type="submit"] {
  font-size: inherit;
  box-shadow: 3px 3px var(--pink);
  color: var(--pink);
  border-radius: 10px;
  border: none;
  background-color: var(--darkgray);
  padding: 10px;
  /* display: block; */
}

button[type="submit"]:hover {
  box-shadow: 3px 3px var(--blue);
  color: var(--blue);
  /* background: var(--gradient); */
}

/*
button[type="submit"]:disabled {
  background-color: var(--lightgray);
  padding: 10px;
} */

@keyframes swim {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}

.pageclip-form__submit--loading::after {
  content: "🐟";
  display: inline-block;
  text-align: center;
  position: relative;
  margin-left: -30px;
  margin-top: -10px;
  margin-bottom: -10px;
  left: 30px;
  animation: swim .7s infinite forwards linear;
  /* animation: swim 0.5s linear 0 infinite normal; */
}


/* .pageclip-form__submit::after {
  content: "🐟"
  border-color: rgba(0, 255, 0, 0.8);
  border-left-color: blue;
} */

/* .pageclip-form__submit--loading {
  background-color: var(--yellow);
} */






.container {
  max-width: 712px;
  margin: 10px auto;
  padding: 0 10px;

}

.box {
  padding: 20px 20px;
  padding-top: 20px;
  margin-bottom: 20px;

  border: 5px solid transparent;
  border-radius: 50px;
  background-image: linear-gradient(var(--lightblue), var(--lightblue)),
                    var(--rainbowdiag);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  -webkit-box-shadow: 5px 7px 15px -1px var(--lightgray);
  box-shadow: 5px 7px 15px -1px var(--lightgray);
}

.border {

  border: 3px solid transparent;
  border-radius: 50px;
  background-image: linear-gradient(var(--lightblue), var(--lightblue)),
                    var(--rainbowdiag);
  background-origin: border-box;
  background-clip: padding-box, border-box;



}

.maybe {
  display: none;
}




.navbar {
  /* margin-top: 1px; */
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
}


.navbar p{
  font-family: Roboto, sans-serif;
  font-size: 20px;
  text-shadow: none;
  color: var(--darkgray);
  font-weight: normal;
  text-align: center;
  margin: 0;

}

.navbar-item.current p{
  font-weight: bold;
  color: var(--black);
  text-shadow: 3px 3px var(--blue);

}

.navbar-item:hover p{
  color: var(--lightgray);

}


.navbar p.icon {
  font-family: Roboto, sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: var(--darkgray);
  text-shadow: 3px 3px var(--pink);

}

.navbar-item:hover p.icon {
  color: var(--lightgray);
  text-shadow: 3px 3px var(--blue);

}

.navbar-box {
  padding-bottom: 5px;
}



.main-heading {
  text-shadow: 3px 3px var(--lightgray);
  font-size: 6em;
  text-align: center;
  margin: 0;

}

.main-heading.heading-small {
  text-shadow: 3px 3px var(--lightgray);
  font-size: 2em;
  text-align: center;
  margin: 0;

  padding-bottom: 6px;


}

.main-heading span{
  font-variant-ligatures: none;

  animation-delay: var(--n);
  animation: wave 1s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running;
  position: relative;
}

.main-heading.heading-small span{
  animation: wave-small 1s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running;

}


@keyframes wave{
  0%    {top: 0px;}
  25%   {top: -3px;}
  50%   {top: 0px;}
  75%  {top: 3px;}
  100% {top: 0px;}
}


@keyframes wave-small{
  0%    {top: 0px;}
  25%   {top: -1px;}
  50%   {top: 0px;}
  75%  {top: 1px;}
  100% {top: 0px;}
}

@keyframes rainbow{
  0% {color: var(--red);}
  17% {color: var(--orange);}
  33% {color: var(--yellow);}
  50% {color: var(--green);}
  67% {color: var(--blue);}
  83% {color: var(--purple);}
  100% {color: var(--red);}
}

.fp-proj-hor {
  /* display: flex; */
}

.fp-proj-hor > div {
  /* display: flex;
  align-items: center; */
  /* width: 50%; */
}

.fp-proj-hor > div > div:nth-child(1) {
  width: 60%;
}

.fp-proj-hor > div > div:nth-child(2) {
  width: 40%;
}

.fp-proj-hor img {
  display: block;
  margin: 0 auto;
  margin-top: 10px;

  width: 90%;
  text-decoration: none;
  text-decoration-color: none;
}

/*
.fp-proj-hor a[target='_blank']::after {
  content:" ";
  margin: 0;
}

.fp-proj-hor a:hover{
  background: none;
}

.fp-proj-hor a:hover img{
  border-color: var(--lightgray);
}

.fp-proj-hor p {
} */

.fp-proj {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}


.social-bar {
  display: flex;
  justify-content: space-evenly;
  padding: 20px;
  align-items: center;

}

.social-bar a {
  text-decoration: none;
  text-decoration-color: none;

  color: var(--darkgray);
}

.social-bar a:hover{
  text-decoration: none;

  color: var(--darkgray);

  background: none;
}

.social-bar a[target='_blank']::after {
  content:" ";
  margin: 0;
}



.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.projects a, .project-time {
  width: 25%;
  height: 80px;

  box-sizing: border-box;
  border-bottom: var(--white) 3px solid;

}

@media (max-width: 720px)
{
  .projects a, .project-time {
    width: 33.3%;
  }

  .fp-proj-hor {
    flex-flow: column
  }

  .fp-proj-hor div {
    width: 100%;
  }

  .maybe {
    display: block;
  }


}

@media (max-width: 525px) {
  .navbar {
    display: grid;
    grid-template-rows: 64px 64px; /* 2 rows of 50px */
    grid-auto-flow: column;  /* a column flow */
    grid-gap: 5px;
  }

  form {
    padding: 0;
  }


}

@media (max-width: 475px)
{
  .projects a, .project-time {
    width: 50%;
  }

}


@media (max-width: 475px)
{
  .projects a, .project-time {
    width: 50%;
  }

}

@media (max-width: 330px) {
  .projects a, .project-time {
    width: 100%;
  }

  .navbar {
    grid-template-rows: 64px 64px 64px; /* 2 rows of 50px */
  }
}

.project, .project-time{
  display: flex;
  flex-flow: column;
  justify-content: flex-end;

}

.project {
  padding: 10px 8px 2px 8px;

}

.project.ongoing:hover {
  background-color: var(--pink);
}

.project.finished:hover {
  background-color: var(--blue);
}


.project.forever:hover {
  background-color: var(--purple);
}

.project.idle:hover {
  background-color: var(--lightgray);
}

.project p, .project-time p {
  margin: 0;
  font-size: 16px;
}

.project p.type, .project p.tag{
  font-weight: 800;
  font-size: 20px;
  color: var(--lightblue);
  display: inline;
  vertical-align: middle;
}

.project p.type {
  text-shadow: none;

}

.project p.tag{
  display: inline;
  font-size: 13px;
  font-weight: normal;
  margin-top: 0;
  font-style: italic;
}


.project:hover p.type, .project:hover p.tag {
  color: var(--white);
}

.project:hover p.type {
  text-shadow: 1px 1px var(--darkgray)
}

.project-time div{
  /* background-color: var(--white); */
  border: 6px transparent solid;
  border-bottom: 0px transparent solid;
  box-sizing: border-box;
  padding: 20px 5px 0 5px;


  /* border-radius: 25px 25px 0 0; */
  background-image: linear-gradient(var(--white), var(--white)),
                    var(--rainbowdiag);
  background-origin: border-box;
  background-clip: padding-box, border-box;



}

.project-time p {
  font-size: 30px;
  font-weight: bold;
  font-family: Roboto, sans-serif;
  text-align: right;

}


.projects a.last-child {
  border: none;
  border-bottom: 3px dotted transparent;
  border-image: linear-gradient(to right, var(--white) 50%, transparent 100%);
  border-image-slice: 1;
}



@media (hover: none) {
  .project.ongoing {
    background-color: var(--pink);
  }

  .project.finished {
    background-color: var(--blue);
  }


  .project.forever {
    background-color: var(--purple);
  }

  .project.idle {
    background-color: var(--lightgray);
  }


  .project p.type, .project p.tag {
    color: var(--white);
  }

  .project p.type {
    text-shadow: 1px 1px var(--darkgray)
  }
}