@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap');

/* Define style variables at root psuedo element */
:root {
  --background-color: #0A1828;
  --code-background-color: #181A24; 
  --text-color: #BFA181;
  --skill-box-color: #355352; 
}

html {
  max-width: 900px;
  margin: 0 auto;
}

body {
  font-family: 'JetBrains Mono', sans-serif;
  font-size: 18px;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color); 
  display: flex;
  flex-direction: column;
}

code,
pre {
  background-color: var(--code-background-color);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: white;
  border-radius: 10px;
  overflow: scroll;
}

pre {
  padding: 20px;
}

a {
  color: var(--text-color);
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

hr {
  margin: 0px 0px 15px 0px;
  color: var(--text-color);
}

h1,
h2,
h3,
h4 {
  margin-bottom: 0;
}

li {
  margin: 5px 0px 5px 0px;
}

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  text-align: center;
}

img {
  width: 100%;
}

.link {
  margin: 0px 10px 0px 10px;
}

.skill {
  border-radius: 10px;
  background-color: var(--skill-box-color);
  margin: 5px;
  padding: 7px;
}

.link-icon {
  width: 50px;
  margin-right: 10px;
}

.resume-container {
  margin-bottom: 25px;
}

.resume-container > :is(h4, h5, p) {
  margin: 0px;
}

.resume-description > img {
  float: left;
  width: 75px;
  border-radius: 50%;
  shape-outside: circle(35px at center center);
  margin-right: 30px;
}

#skill-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#avatar {
  width: 142px;
  height: 126px;
  border-radius: 50%;
  float: left;
  shape-outside: circle(70px at center center);
  margin-right: 40px;
}

#about-me {
  display: block;
}

#article-list {
  list-style-type: none;
  padding: 0px;
  text-wrap: nowrap;
}