@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poiret+One&family=Rubik:ital@0;1&display=swap&family=Sixtyfour&display=swap";

/* src/css/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
ul[class],
ol[class] {
  padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
ul[class],
ol[class] {
  list-style: none;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img {
  max-width: 100%;
  display: block;
}
article > * + * {
  margin-top: 1em;
}
input,
button,
textarea,
select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* src/css/style.css */
:root {
  --main-dark: #1f1f1e;
  --secondery-dark: #f8f8f8;
  --main-wight: #f8f8f8;
  --secondery-wight: #1f1f1f;
  --red: #e00049;
  --yellow: #b9e200;
  --blue: #0026e0;
}
a {
  text-decoration: none;
  color: var(--main-wight);
}
body {
  background: var(--main-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.main-section {
  display: grid;
  grid-template: repeat(7, 1fr)/repeat(6, 1fr);
  max-width: 1124px;
  grid-template-areas: "header main main main main main" "header main main main main main" "header main main main main main" "header main main main main main" "header main main main main main" "header main main main main main" "footer main main main main main";
}
.main-section__header {
  grid-area: header;
}
.main-section__title-wrapper {
  padding-right: 20px;
  padding-bottom: 20px;
  position: relative;
}
.main-section__title-wrapper h1 {
  position: relative;
  z-index: 100;
}
.main-section__title-wrapper::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 50px;
  background-color: var(--yellow);
  z-index: 98;
}
.main-section__title-wrapper::after {
  content: "";
  position: absolute;
  background: var(--main-dark);
  inset: 1px;
  z-index: 99;
}
.main-section__title-wrapper--plus {
}
.main-section__nav {
  position: relative;
  padding-top: 25px;
}
.main-section__nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 50px;
  background-color: var(--yellow);
  z-index: 98;
}
.main-section__nav::after {
  content: "";
  position: absolute;
  background: var(--main-dark);
  inset: 1px;
  z-index: 99;
}
.nav__list {
  position: relative;
  z-index: 100;
}
.nav__list li {
  list-style: none;
  color: var(--secondery-dark);
  font-family: "Poiret One", sans-serif;
  font-size: 25px;
  font-weight: 400;
  font-style: normal;
  line-height: 50px;
  transition: transform 0.3s ease;
}
.nav__list li:hover {
  transform: translateX(5px);
}
.nav__list li a {
  transition: color 0.3s ease;
}
.nav__list li a:hover {
  color: #007bff;
}
h1 {
  color: var(--secondery-dark);
  font-family: "Sixtyfour", sans-serif;
  line-height: 50px;
  z-index: 2;
}
.main-section__content {
  grid-area: main;
  position: relative;
  min-width: 700px;
  min-height: 500px;
}
.content__img {
  position: absolute;
  max-width: 500px;
}
.content__img--blue {
  top: -200px;
  left: 170px;
  z-index: 101;
}
.content__img--red {
  top: -200px;
  left: 30px;
  z-index: 102;
}
.content__img--yellow {
  top: -250px;
  left: 100px;
  z-index: 103;
}
.main-section__footer {
  grid-area: footer;
}
.footer__social-links {
  display: flex;
}
.social-link {
  display: flex;
  max-width: 30px;
  height: 30px;
  margin-right: 20px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.social-link:hover {
  opacity: 1;
}
.footer-icons {
}
.social-link--github {
}
.social-link--linkedin {
}