/* Custom styles for portfolio */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Section backgrounds */
#start {
  background-image: url('assets/img/start-bg.jpg');
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  #start {
    background-attachment: fixed;
  }
}

#about {
  background-image: url('assets/img/concrete-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#portfolio {
  background-image: url('assets/img/concrete-teal-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.kontakt-bg {
  background-image: url('assets/img/schwerpunkte-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Portfolio hover effects */
.portfolio-item {
  width: 233px;
  height: 525px;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(0.29) sepia(0.29);
  transition: 250ms ease-in-out all;
}

.portfolio-item:hover {
  filter: none;
  margin-top: -8rem;
}

/* Modal */
.modal-overlay {
  background-color: rgba(81, 179, 187, 0.95);
}

/* Side menu */
#sidemenu > div {
  opacity: 0.95;
}