* {
  box-sizing: border-box;
  font: Cantarell;
}

body {
  font-family: Cantarell;
  margin: 0;
  background: #282c34;
}

a {
  color: #5cb3fa;
  text-decoration: none;
}
a:visited { color: #FFFFFF; }
a:hover { color: #eb6772; }
a:active { color: #9acc76; }
blockquote {
  font-style: italic;
  margin: 1em 0;
  padding-left: 20px;
  border-left: 2px solid #ccc;
}


.navbar {
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  overflow: hidden;
  display: flex;
  text-align: center;
  justify-content: center;
  background-color: #21252B;
  z-index: 10;
}
.navbar a {
  display: inline-block;
  color: #FFFFFF;
  padding: 14px 20px;
}
.navbar a:hover {
  background-color: #282c34;
  color: #FFFFFF;
}
.navbar a.active {
  background-color: #282c34;
  color: #FFFFFF;
}


.content {
  display: flex;
  align-items: center;
  justify-content: center;
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
  padding: 20px;
}


.blog_post p {
  line-height: 1.6;
  font-size: 22q;
}
.toc {
  min-width: 300px;
  max-width: 700px;
}
.toc p {
  font-size: 1.5em;
  color: #5cb3fa;
}
.toc a {
  line-height: 1.6;
}


.icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg); /* Invert the color from black (default) to white */
}


.container a {
  display: block;
  margin-bottom: 10px;
}
.container ul {
  padding-bottom: 10px;
}


.container_cv {
  width: 600px;
}
.container_skills {
  display: flex;
  flex-wrap: wrap;
}
.container_skill {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: default;
}
.container_skill a,p {
  color: #FFFFFF;
  font-size: 20q;
}


.container_projects {
  display: flex;
  flex-wrap: wrap;
}
.container_projects div {
  width: 500px;
  height: 300px;
  margin-bottom: 140px;
  margin-right: 20px;
}
.container_project {
  width: 500px;
  height: 300px;
  border-radius: 15px;
}


.container_recommended_root {
  display: flex;
  align-items: flex-start;
}
.container_recommended {
  max-width: 500px;
  width: 400px;
  word-wrap: break-word;
}
.container_recommended_title {
  height: 40px;
  border-bottom: 1px solid #FFFFFF;
}


.container_tags {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
}
.container_tag {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  padding: 5px;
  background: #2C3036;
}
.container_tags p {
  font-size: 16q;
}


.container_dev {
  display: flex; 
  align-items: start; 
  justify-content: center;
}


.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aligned_at_start {
  display: flex;
  align-items: flex-start;
}


.pad-20 {
  padding: 20px;
}


.margin-20 {
  margin: 20px;
}


.text-white {
  color: #FFFFFF;
  font-size: 20q;
}


.course {
  background: #21252B;
  padding: 20px;
  width: 500px;
  margin-top: 50px;
  border-radius: 5px;
  cursor: default;
}
.course_title {
  margin-bottom: 30px;
  width: 500px;
  height: 50px;
  background: #21252B;
  border-radius: 5px;
}
.topic {
  background: #21252B;
  height: 30px;
  border-radius: 5px;
  cursor: default;
}


.dashboard_section {
  background: #21252B; 
  color: white;
  
  padding-top: 5px; 
  padding-left: 20px; 
  padding-right: 20px; 
  padding-bottom: 20px; 
  
  margin-top: 20px; 
  margin-bottom: 20px; 
  margin-left: 10px; 
  margin-right: 10px; 
  
  width: 360px; 
  height: 910px;
  
  border-radius: 5px;
}


summary::before {
  margin-right: 10px;
  transition: transform 0.2s ease-in-out;
}
summary,li {
  user-select: none; /* Disable text selection */
}


.tree {
  --spacing: 1.5rem;
  --radius: 10px;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: default;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: #ddd;
}
.tree summary::before {
  z-index: 1;
  background: #696 url('expand-collapse.svg') 0 0;
}
.tree details[open] > summary::before {
  background-position: calc(-2 * var(--radius)) 0;
}


.footer {
  padding: 20px;
  text-align: center;
  background: #21252B;
}