:root {
  --main-text-color: rgb(46, 40, 40);
  --main-background-color: rgb(252, 252, 252);
  --main-background-shapes-color: rgb(240, 240, 240);
  --main-font: Raleway, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevents sideways scroll */
  background-color: var(--main-background-color);
}

p {
  color: var(--main-text-color);
  font-family: var(--main-font);
  font-size: 1.75vw;
  padding: 0.25vw;

  opacity: 0;
  animation: fadeIn 4s forwards;
}

a {
  color: var(--main-text-color);
  font-family: var(--main-font);
  text-decoration: none;
  font-size: 2.8vw;
}

select {
  margin-bottom: 10;
  border: 0;
  padding-left: 0.25vw;
}

.main-title {
  display: block;
  margin-bottom: 1.5vw;
  text-align: center;
  font-weight: 800;
  font-size: 8vw;
  text-transform: uppercase;

  opacity: 0;
  animation: fadeIn 3s forwards;
}

.button-row {
  box-sizing: border-box;
  justify-content: center;
  display: flex;
  padding: 0 5vw;

  opacity: 0;
  animation: fadeIn 3s forwards;
}

.button-row a {
  border: none;
  margin-bottom: 0.5vw;
  padding: 0 1.5vw;
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
  cursor: pointer;
}

.button-row a + a {
  border-left: 1.5px solid var(--main-text-color);
}

.art-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5vw;
}

.art {
  flex-basis: 47%;
}

.art img {
  width: 100vw;
}

.art p {
  margin: 0;
  padding-left: 0.4vw;
  text-align: left;
  font-weight: 450;
}

@media (min-width: 1366px) {
  .art-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5vw;
  }

  .art img {
    width: 100%;
  }

}

.about-me p {
  font-weight: 375;
  font-size: 3.5vw;
}

.about-me-row {
  width: 95vw;
  display: flex;
  gap: 10vw;
}

.about-me-body {
  width: 100%;
}

.about-me-body p {
  width: 90vw;
  margin-left: 2vw;
}

.about-me-picture-container {
  position: relative;
  display: inline-block;
  margin-bottom: 1vw;
  width: 53vw;
}

.about-me-circular_image {
  position: relative;
  width: 55vw;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.about-me-background-square {
  position: absolute;
  display: inline-block;
  top: -1vw;  
  left: -25vw;
  width: 48.25vw;
  height: 57.5vw;
  background-color: var(--main-background-shapes-color);
  border-radius: 6px;
}

.copyright {
  padding-left: 0.5vw;
}



@keyframes fadeIn {
  to { opacity: 1; }
}