* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  color: #222222;
  font-family: Helvetica, 'Helvetica', sans-serif;
  line-height: 1.3;
  }

a:link,
a:visited,
a:active {
	color: #6A6B51;
	text-decoration: none;
    transition: color 0.2s ease;
}
a:hover,
a:focus-visible {
	color: #aeaeae;
	text-decoration: none !important;
    }

h1 {
	font-family: 'helvetica', sans-serif;
	font-size: 24px;
	margin-bottom: 6px;
}

h2 {
	font-family: 'helvetica', sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 6px;
	margin-top: 30px;
}

h3 {
	font-family: 'helvetica', sans-serif;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 0px;
}

h3 a:link,
h3 a:visited,
h3 a:active {
    color:#222;
  }

h3 a:hover {
    color:#808080;
  }

p {
	font-size: 14px;
	font-family: Courier, "Courier New", monospace;
	margin-top: 0;
	margin-bottom: 0;
}

img {
	display: block;
	margin: 0 auto;
	padding-bottom: 5px;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}

.portfolio {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.portfolio-item {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.portfolio-logo {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
}

.portfolio-section-title {
  width: 100px;
  height: 0px;
  flex: 0 0 100px;
}


.portfolio-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin-top: -10px;
  transition: opacity 0.3s ease;
}

.portfolio-logo img:hover {
  opacity: 0.8;
}

.portfolio-content {
  width: 540px;
}

.portfolio-title {
  margin: 0 0 8px;
  line-height: 1.2;
}

.portfolio-description {
  margin: 0 0 8px;
  color: #3a3a3a;
  font-size: 14px;
}

.portfolio-link {
  color: #6A6B51;
  text-decoration: none;
  font-size: 14px;
}

.portfolio-link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .portfolio-item {
	flex-direction: column;
	gap: 16px;
  }

  .portfolio-content {
	width: 100%;
  }
}

hr.divider {
  border: 0;
  border-top: 1px solid #c8c8c8;
  margin-top: 45px;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: 0;
}

/** SEE MORE ITEMS **/

.more-portfolio-items {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.5s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.more-portfolio-items.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.see-more-link {
  display: block;
  width: fit-content;
  margin: 0px auto 0;
  text-decoration: none;
  font-weight: 500;
  font-family: 'Courier', monospace;
}


/* SCROLL SHIMMER */
.scroll-shimmer {
  /* Gradient painted inside the text */
  background-image: linear-gradient(
    90deg,
    #64748b 0%,
    #64748b 38%,
    #808080 50%,
    #64748b 62%,
    #64748b 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* Scroll-controlled animation */
  animation: shimmer-scroll linear both;
  animation-timeline: view(block);
  animation-range: entry 10% exit 90%;
}

@keyframes shimmer-scroll {
  0% {
    opacity: 0;
    background-position: 100% 0;
    transform: translateY(0.4em);
  }

  35%,
  65% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
    background-position: -100% 0;
    transform: translateY(-0.2em);
  }
}

/* CUSTOM CURSOR */
/* desktop and mouse devices only */
 
@media (pointer: fine) {

  .custom-cursor-enabled,
  .custom-cursor-enabled body,
  .custom-cursor-enabled a,
  .custom-cursor-enabled button,
  .custom-cursor-enabled input,
  .custom-cursor-enabled textarea,
  .custom-cursor-enabled select,
  .custom-cursor-enabled label {
    cursor: none !important;
  }

  #custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
  
    width: 12px;
    height: 12px;
  
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
  
    pointer-events: none;
    z-index: 999999;
  
    transform: translate(-50%, -50%);
  
    opacity: 0;
  
    transition:
      background-color 0.1s ease,
      opacity 0.1s ease;
  
    will-change: left, top;
  }
  
  #custom-cursor.visible {
    opacity: 1;
  }
  
  /* Entire cursor becomes red over links */
  #custom-cursor.active {
    background-color: rgba(0, 0, 0, 0.3);
  }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .scroll-shimmer {
    animation: none;
    color: #64748b;
    background: none;
  }
}