body {
  margin: auto;
  max-width: 800px;
  padding: 96px 24px;
}


.container-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

#logo {
  width: 40px;
  margin-bottom: 0%;
}

.smallLogo {
  width: 24px;
  margin-bottom: 0%;
}


h1 {
  font-family: "Rubik", open sans;
  font-size: 64px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0%;
  margin-top: 24px;
}

h2 {
  font-family: "Playwrite DE SAS", open sans;
  font-size: 24px;
  font-weight: 300;
  color: #1B1C20;
  margin-top: 0%;
}

h3 {
  font-family: "Rubik", open sans;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-top: 0%;
}


h4 {
  font-family: "Playwrite DE SAS", open sans;
  font-size: 12px;
  font-weight: 300;
  color: #b3b3b4;
  line-height: 120%;
  margin-top: 0%;
}

h5 {
  font-family: "Rubik", open sans;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 0%;
}


.container-about{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 72px;
}


p{
  font-family: "Rubik", open sans;
  font-size: 14px;
  font-weight: 300;
  color: #b3b3b4;
  max-width: 420px;
  text-align: center;
}

.container-portfolio{
  max-width: 800px;
  min-height: 250px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  justify-content: center;
  gap: 8px;
}

.project-part{
  flex: 1;
  min-width: 394px;
  min-height: 250px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 8px;
}

.portfolio-cta{
  flex: 1;
  min-width: 126px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.project-cta{
  min-width: 126px;
  min-height: 121px;
  border-radius: 12pt;
  border-style: solid;
  border-color: #000000;
  border-width: 1pt;
  background-color: rgb(255, 255, 255);
}

.project{
  flex: 1;
  min-height: 250px;
  border-radius: 12pt;
  border-style: solid;
  border-color: #000000;
  border-width: 0pt;
  background-repeat: no-repeat;
}


.project1{
  background: url(img/T1.svg) rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

.project2{
  background: url(img/T2.svg) rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

.project3 {
  background: url(img/T3.svg) rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

.project4 {
  background: url(img/T4.png) rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

.project5 {
  background: url(img/T5.svg) rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

.project-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  padding: 0px 16px;
  gap: 8px;
}


.download {
  text-decoration: none;
} 

.modalContent{
  margin: auto;
  display: block;
  width: 100%;
  max-width: 800px;
}



/* Overlay background */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay.active {
  display: flex;
}

/* Scroll container */
.overlay-content {
  max-width: 80vw;        /* % of screen width */
  max-height: 85vh;       /* % of screen height */
  overflow-y: auto;       /* enable scrolling */
  overflow-x: hidden;
}

/* Image behavior */
.overlay-content img {
  width: 100%;            /* responsive width */
  height: auto;
  display: block;
  border-radius: 6px;
}



/* Responsive */
@media only screen and (max-width: 442px) {
h1 {
  font-size: 48px;
}

h2 {
  font-size: 16px;
}

.container-portfolio{
  max-width: 800px;
  min-height: 250px;
  display: flex;
  flex-flow: row;
}

.project-part{
  min-width: 132px;
  min-height: 766px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

}