/* ---------- Global Tailwind Reset ---------- */

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme("borderColor.DEFAULT", currentColor);
  box-sizing: border-box;
}

body {
  background-color: white;
  font-family: "Fira Code", "Nanum Gothic Coding", monospace;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  padding-bottom: 6px;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

a {
  text-decoration: none;
  font-size: 16px;
}

/* ---------- Custom Rules ----------- */

header {
  margin: 24px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

div {
  margin-left: 42px;
  margin-top: 42px;
}

h1 {
  font-weight: bolder;
}

ul {
  margin-bottom: 12px;
  list-style: none;
}

a {
  color: black;
  padding-bottom: 2px;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

li {
  padding-bottom: 6px;
}

.fa-brands:hover {
  color: #ff4742;
}

.fa:hover {
  color: #ff4742;
}

.dash {
  color: grey;
}

.email {
  color: #ff4742;
  font-size: 12px;
}

/* ----------- Category Tags ----------- */

.project {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  color: white;
  background: linear-gradient(90deg, #5073b8 0%, #a166ab 100%);
}

.cert {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  color: white;
  background: linear-gradient(90deg, #1098ad 0%, #37b17a 90%);
}

.blog {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  color: white;
  background: linear-gradient(90deg, #ef4e7b 0%, #f79533 100%);
}

.website {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  color: white;
  background: linear-gradient(90deg, #2472da 0%, #fbfbff 280%);
}

/* ----------- Year Tags ----------- */

.twentyfour {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  /* color: white;
  background: linear-gradient(90deg,rgb(255, 145, 125) 0%,rgb(238, 238, 249) 300%); */
}

.twentythree {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  /* color: white;
  background: linear-gradient(90deg, #ef4e7b 0%, #fbfbff 300%); */
}

.twentytwo {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  /* color: white;
  background: linear-gradient(90deg, #6dba82 0%, #fbfbff 320%); */
}

.twentytwenty {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  /* color: white;
  background: linear-gradient(90deg, #a166ab 0%, #fbfbff 300%); */
}

.nineteen {
  font-size: 12px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
  margin-right: 2px;
  border-color: black;
  /* color: white;
  background: linear-gradient(90deg, #f79533 0%, #fbfbff 280%); */
}

@media only screen and (max-width: 720px) {
  header {
    margin-left: 16px;
    margin-top: 32px;
  }

  div {
    margin-left: 16px;
  }

  li {
    line-height: 20px;
  }
}