@font-face {
  font-family: 'MesloLGS-Regular';
  src: url(./site-files/fonts/MesloLGS-Regular.ttf);
}

body {
  background-color: #303841;
  font-family: "MesloLGS-Regular";
  color: #cc99cc;
}

.max-width-centered {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.icons {
  display: flex;
  gap: 12px;
}

.icons a {
  color: #FFFFFF;
  font-size: 30px;
  transition: transform 0.3s ease-in-out;
}

.icons a:hover {
  transform: scale(1.2);
}

.comment {
  text-align: center;
  font-size: 1.2em;
}

.comment a {
  color: #A6ACB9;
  text-decoration: underline;
  font-weight: bold;
}

.bubble {
  background-color: #2E3238;
  padding: 20px;
  border-radius: 12px;
  transition: transform 0.3s ease-in-out;
}

.bubble:hover {
  transform: scale(1.02);
}

.nested-bubble {
  background-color: #454B54;
  padding: 15px;
  border-radius: 12px;
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.nested-bubble:hover {
  transform: scale(1.02);
}

.about-me-list {
  list-style-type: disc;
  padding-left: 20px;
  color: white;
  font-size: 1.1em;
  line-height: 1.6;
}

.work-exp-item {
  margin-top: 4px;
  margin-bottom: 6px;
}

.orange-text {
  color: #F9AE57;
}

.cyan-text {
  color: #60B4B4;
}

.white-text {
  color: #FFFFFF;
}

.gray-text {
  color: #A6ACB9;
}

h1 {
  color: #cc99cc;
}

h3::after {
  content: ":";
  color: white;
}

p {
  font-size: 1.2em;
  margin-left: 0;
  padding-left: 0;
}

div {
  margin-bottom: 10px;
}

pre {
  font-family: "MesloLGS-Regular";
  font-size: 1.2em;
  margin-left: 0;
  padding-left: 0;
}
  /* Colors:
    orange: #F9AE57
    purple text: #C695C6
    background: #303841
    bubble color dark: #2E3238
    lighter bubble color: #454B54

  */