@charset "utf-8";
/* CSS Document */

/* Hide scrollbar for Chrome, Safari and Opera */

::-webkit-scrollbar {
  /*  display: none;*/
  width: 0px;
}

html {
  background-color: var(--cBack);
}

#projectsBody {
  background-color: transparent;
  /*  background:none transparent;*/
  /*  height: calc(100% -100px);*/
}

#myProjectsRow {
  /*  	border: 1px solid red;*/
  z-index: 20 !important;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  /*	margin-top: 45px;*/
  padding-top: 70px;
  background-color: var(--cBack);
}

.centered-div {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  text-align: center; /* center multi-line text */
  flex-direction: column; /* stack inner content vertically */
  min-height: 300px; /* adjust as needed */
  width: 100%; /* full width container */
  gap: 20px; /* space between sections */
}

.centeredText {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.column {
  flex: 33%;
  /*	flex-direction: row;	*/
  max-width: 33%;
  padding: 0 20px 0 20px;
  flex-direction: column;
  /*  margin: 0;*/
}

.column img {
  /*  	border: 3px solid var(--cBorder);*/
  /*	margin-top: 8px;*/
  vertical-align: top;
  width: 100%;
  aspect-ratio: var(--aspect);
}

button {
  border: 3px solid var(--cBorder);
  border-style: inset;
  padding: 0 0 0 0;
  /*	border: none;*/
  width: 100%;
  display: inline-block;
  overflow: hidden !important;
}

button:focus {
  outline: 0 !important;
}

pName:link {
  text-decoration: none;
}
pName:visited {
  text-decoration: none;
}
pName:hover {
  text-decoration: none;
}
pName:active {
  text-decoration: none;
}

button img {
  width: 100%;
  height: auto;
  transition: transform;
}

.pBox {
  /*	border: 1px solid purple;*/
  height: 65px;
  /*	padding: 10px 0 0 0;*/
  text-align: left;
  /*  display: none;*/
  visibility: hidden;
}

@media screen and (max-width: 2000px) {
  .column {
    flex: 50%;
    max-width: 50%;
    padding: 0 15px 0 15px;
  }
}

@media screen and (max-width: 900px) {
  .column {
    flex: 100%;
    max-width: 100%;
    padding: 0 15px 0 15px;
  }

  .pBox {
    visibility: visible !important;
  }
}