/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a, a:visited, a:focus {
  text-decoration: none;
}

/*
    Remove list styles (bullets/numbers)
    in case you use it with normalize.css
  */
ol:not([class]),
ul:not([class]) {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* Removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

.card, .cards, .card-group {
  background-color: transparent;
  border: none;
}

:root {
  /* COLORS */
  --clr-indianred-200: hsl(0, 53%, 58%);
  --clr-indianred-100: hsl(0, 64%, 52%);
  --clr-primary-red-100: hsl(0, 40%, 52%);
  --clr-primary-red-200: hsl(0, 40%, 55%);
  --clr-primary-red-300: hsl(10, 50%, 55%);
  --clr-primary-dark-100: hsl(218, 28%, 35%);
  --clr-primary-dark-200: hsl(203, 30%, 26%);
  --clr-primary-blue-100: hsl(207, 100%, 35%);
  --clr-primary-blue-200: hsl(207, 100%, 43%);
  --clr-primary-blue-300: hsl(197, 100%, 39%);
  --clr-primary-gray-100: hsl(210, 13%, 53%);
  --clr-primary-gray-200: hsl(70, 10%, 64%);
  --clr-primary-gray-400: hsl(0, 0%, 75%);
  --clr-primary-black-100: hsl(0, 0%, 0%);
  --clr-primary-black-150: hsl(0, 0%, 5%);
  --clr-primary-black-200: hsl(5, 0%, 10%);
  --clr-primary-black-300: hsl(5, 0%, 20%);
  --clr-primary-black-400: hsl(223, 19%, 14%);
  --clr-primary-white-100: hsl(0, 0%, 98%);
  --clr-primary-white-200: hsl(0, 0%, 90%);
  --clr-primary-white-300: hsl(0, 0%, 96%);
  --clr-primary-green-100: hsl(100, 50%, 40%);
  --clr-primary-green-200: hsl(80, 50%, 40%);
  --clr-primary-green-300: hsl(70, 50%, 40%);
  --clr-primary-green-400: hsl(75, 40%, 30%);
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 10ch;
  padding: 0.5px 0.75px;
}

.container-topbar {
  background-color: var(--clr-primary-black-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

body {
  background-color: var(--clr-primary-black-200);
}

.frontpage {
  font-family: "Roboto", sans-serif;
  color: var(--clr-primary-white-100);
}
.frontpage .page-header h1 {
  font-size: 0;
}
.frontpage .com-content-article__body section {
  min-height: 100vh;
  display: grid;
  justify-content: center;
}
.frontpage .com-content-article__body .top-section {
  --img-bg: url("https://bobbla.com/images/content/a/about-background-min-min.jpg");
  --img-bg-opacity: 0.25;
  position: relative;
  isolation: isolate;
}
.frontpage .com-content-article__body .top-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--img-bg);
  opacity: var(--img-bg-opacity);
  background-size: cover;
  background-position: center;
}
.frontpage .com-content-article__body .top-section h2 {
  min-height: 175px;
  max-width: 25ch;
  padding: 2rem 0 4rem 0;
  animation: text 1000ms ease-in forwards;
}
.frontpage .com-content-article__body .top-section p.hero {
  font-size: 1.75em;
  max-width: 40ch;
}
.frontpage .com-content-article__body .top-section a.btn-link {
  background-color: var(--clr-indianred-100);
  opacity: 0.75;
  max-width: fit-content;
  margin: 2rem 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  color: var(--clr-primary-white-100);
  font-weight: 700;
}
.frontpage .com-content-article__body .top-section p.info {
  margin-top: 2rem;
  font-size: 1.75em;
}
.frontpage .com-content-article__body .top-section p.info .text {
  max-width: 25ch;
}
.frontpage .com-content-article__body .top-section p.info span.projects {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.frontpage .com-content-article__body .top-section p.info span.projects .project-link {
  text-align: center;
  background-color: var(--clr-indianred-100);
  animation: links 500ms ease-in forwards;
  color: var(--clr-primary-white-100);
  padding: 0.5rem 0.7rem;
  min-width: fit-content;
}

@keyframes text {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 3em;
  }
}
@keyframes links {
  0% {
    font-size: 0;
    padding: 0 0;
    border-radius: 0;
  }
  100% {
    font-size: 0.5em;
    padding: 0 0.5;
    border-radius: 7px;
  }
}