/* imports */

@font-face {
  font-family: 'agero';
  src:
    url("./media/fonts/agero!.woff") format("woff"),
    url('./media/fonts/agero!.ttf') format("truetype");
}

@font-face {
  font-family: "FiraCode";
  src:
    url("./media/fonts/FiraCode-Regular.woff") format("woff"),
    url("./media/fonts/FiraCode-Regular.ttf") format("tff");
}

/* variables */

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

:root {
  --accent1: #7752ff;
  --accent2: #bb9af7;
  --accent3: #C66BFF;
  --white: #c0caf5;
  --red: #f7768e;
  --orange: #ff9e64;
  --yellow: #e0af68;
  --green: #9ece6a;
  --teal: #73daca;
  --cyan: #7dcfff;
  --blue: #7aa2f7;
  --background: #1a1b26;
  --background2: #24283b;
  --background3: #151521;
}

/* elements */

body {
  font-family: "FiraCode";
  color: var(--white);

  /* background-image: radial-gradient(#24283b 1.5px, transparent 1.5px), radial-gradient(#24283b 1.5px, transparent 1.5px); */
  background-size: 25px 25px;
  background-position: 0 0, 15px 15px;
  background-color: var(--background);
  background-image: radial-gradient(var(--background2) 1px, transparent 1px);
}

p { font-size: 17px; }
h2 { font-size: 25px; }
img { user-select: none; }

a {
  color: var(--accent1);
  transition: text-shadow 0.1s linear;
}

a:hover {
  color: var(--accent2);
  text-shadow: 0 0 15px var(--accent2);
}

a:active {
  animation: shake 0.25s;
  animation-iteration-count: infinite;
}

table { margin: auto; }
td { padding: 0 0.3em; }

button {
  background-color: var(--background);
  border-radius: 5px;
  border-color: var(--accent1);
  color: var(--white);
}

select {
  background-color: var(--background);
  border-radius: 5px;
  border-color: var(--accent1);
  color: var(--white);
}

/* Classes */

.alt-color { color: var(--accent1) }
.alt-color-2 { color: var(--accent2) }

.box {
  background:
    linear-gradient(to bottom right, var(--background) 40%, var(--background3) 100%) padding-box,
    linear-gradient(to right, var(--accent1), var(--accent3)) border-box;
  border: 3px solid transparent;
  border-radius: 15px;
  padding: 0.625em 1.25em 1.875em 1.25em;
  margin: auto;
  margin-bottom: 3em;
  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.7);
}

.box p, h2, h3 {
  padding: 0 1.25em;
}

.box img {
  margin-left: 0.625em;
}

.box-content {
  display: flex;
}

.project-card {
  width: 12.5em;
  margin: 0 0.625em 1.25em 0.625em;
  border: solid var(--accent2);
  border-radius: 10px;
  transition: box-shadow 0.1s linear;
}

.project-card:hover {
  box-shadow: 0px 0px 10px var(--accent2);
}

.project-card:active {
  animation: shake 0.25s;
  animation-iteration-count: infinite;
}

.project-card a {
  color: var(--white);
  text-shadow: none;
  text-decoration:none;
}

.project-card h3 {
  text-align: center;
}

.project-card p {
  font-size: 14px;
}

.project-card img {
  max-height:90%;
  max-width:90%;
  margin-top: 0.625em;
  border-radius: 5px;
}

.project-card-status {
  text-align: center;
}

.whoami-socials {
  color: var(--accent1);
  display: inline-block;
}

/* IDs */

#whoami {
  width: 54em;
}

#whoami-img {
  max-width: 22em;
  max-height: 22em;
  border-radius: 10px;
}

#whoami-socials:hover {
  color: var(--accent2);
  text-shadow: 0 0 0.625em var(--accent2);
}

#nowplaying {
  width: 42em;
}

#song-info h3 {
  color: var(--accent2);
}

#lshw {
  width: 57em;
}

#lshw-computer {
  display: flex;
}

#skills {
  width: 21em;
}

#projects {
  width: 70.75em;
}

#projects .box-content {
  flex-wrap: wrap;
}

#bottom-text {
  display: flex;
  margin: 0 24em;
}

#bottom-text p {
  font-size: 14px;
  color: black;
  text-align: center;
  margin:auto;
  padding: 0px 0.625em;
}

#license {
  float: right;
  margin-top:-4.5em;
}

#license p {
  font-size: 14px;
  text-align: center;
  margin-right: 5px;
}

#license img {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top:-0.5em;
}

#title {
  font-family: "agero";
  font-size: 7vw;
  text-align: center;
  color: #7752ff;
  margin: 0.25em auto;
  width: 65%;
  text-shadow: 15px 15px 50px rgba(0, 0, 0, 0.7);
}

#cat {
  position: fixed;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin: 0.5em;
}

#small-text { font-size: 12px; }

#flag {
  width:1.2em;
  height:1.2em;
}

#journal {
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 12px;
  padding: 0px 5px 10px 5px;
  width: 12em;
  background:
    linear-gradient(to bottom right, var(--background) 40%, var(--background3) 100%) padding-box,
    linear-gradient(to right, var(--accent1), var(--accent3)) border-box;
  border: 3px solid transparent;
  border-radius: 15px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
}

#journal-logs {
  font-size: 14px;
}

/* responsiveness */
@media (max-width: 1800px) {
  #projects {
    width: 56.5em;
  }
}

@media (max-width: 1500px) {
  #projects {
    width: 42.5em;
  }

  #lshw {
    width: 20em;
  }

  #lshw .box-content {
    display: block;
  }
}

@media (max-width: 1250px) {
  h2 {
    text-align: center;
  }

  .box-content {
    display: block;
  }

  #cat {
    width: 25px;
    height: 25px;
  }

  #flag {
    width: 0.8em;
    height: 0.8em;
    margin-bottom: -0.05em
  }

  #whoami {
    width: 19.5em;
  }

  #whoami-img{
    width: 18.75em;
    height: 18.75em;
  }

  #whoami-socials {
    padding: 0 0.125em;
    text-align: center;
  }

  #nowplaying{
    width: 16.5em;
  }

  #projects {
    width: 28.25em;
  }

  #bottom-text {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #license {
    float: none;
    margin-top:1em;
  }

  #license img {
    width: 5em;
  }
}

@media (max-width: 550px) {
  #projects {
    width: 13em;
  }

  #journal {
    visibility: hidden;
  }
}