.body-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #292960b6; 
  box-sizing: border-box;
  border: 1px solid #80808046;
  /* color: rgb(63, 62, 62); */
  margin: 0.2rem 1rem 2rem 1rem;
  padding: 0.2rem 1rem 2rem 1rem;
}

.body-container > article { 
  display: flex;
  flex-direction: column;
  max-width: 600px;
  padding: 1rem 1rem;
}

.body-container h1 {
  font-size: 22px;
}

.body-container h1, h2, p {
  text-align: center;
}

.body-container .smples h3{
  font-size: 14px;
  margin:2px 0 12px 0;
  text-align: start;
}

.body-container .samples .websites-collection h3,
.content-samples h3{
  font-size: 14px;
  margin:2px 0 12px 0;
  text-align: start;
}

.website-samples .websites-collection p span,
.pdfs-collection .content-samples p span{
  display: flex;
  font-size: 12px;
  margin:12px 0;
  text-align: start;
  color:  rgb(63, 62, 62);
}

.pdfs-collection .content-samples {
  border: 1px solid red;
}


.body-container .content-samples > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* .page-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  padding: 1rem 1rem;
  background: red;
} */

.body-container  .about-section {
  max-width: 1000px;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.body-container  .about-section p{
  max-width: 800px;
}

.about-section .about-summary img {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 1rem 0.5rem;
 -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.about-section .about-summary p,
.process-section .process-list p{
  text-align: start; 
  margin: 1rem 1rem;
}

.about-section .about-summary{
  border: 1px solid gray;
  display: flex;
}

.process-section .process-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: start;
}

.process-list > div {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid gray;
  flex: 1;
  gap: 20px;
  margin: 0.5rem;
}

.process-list ul li {
  margin: 0rem 2rem;
  padding-right: 5px;
}

.process-list h3 {
  position: relative;
  display: inline-block;
  perspective: 400px; 
  padding: -10px 1rem 0rem 2rem;
}

.process-list .icon {
  font-size: 1.8rem;
  line-height: 1.4;
}

.magnify {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1px; 
  animation: local-orbit 4s linear infinite;
}

@keyframes local-orbit {
    0% {
        transform: rotate(0deg) translateX(3px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(3px) rotate(-360deg);
    }
}

.process-list .notes,
.process-list .working-lad,
.process-list .checkmark {
  display: inline-block; 
  font-size: 1.5rem;     
  vertical-align: middle; 
  margin-left: 8px;      
  animation: pulse 3s ease-in-out infinite; 
}

@keyframes pulse {
  0%, 100% {transform: scale(1); }
  20% {transform: scale(1.1); }
  40% {transform: scale(1.1);}
  60% { transform: scale(1.3); }
}

.process-list .completion-trophy {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1px; 
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: coin-spin 6s linear infinite; 
}

@keyframes coin-spin {
  0% {transform: rotateY(0deg); }
  100% {transform: rotateY(360deg); }
}