/* screen - index */


.index {
  background-color: var(--white);
  cursor: pointer;
  height: 2290px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1920px;
  zoom:75%;
}

.Dune {
	border-radius: 28px;
	scale: 98%;
}

.Skills {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-regular);
  font-size: var(--font-size-m);
  font-weight: 900;
  transform: translate(560px, 300px);
}

.priddey-design-focus {
	transform: translate(0px, 0px)
}

.index:hover {
  transform: translate(15, -15px);
}

.projects {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-light);
  font-size: var(--font-size-xl);
  font-weight: 300;
	transform: translate(30px, 20px);
}

.featured-photo {
	transform: translate(0px,0px);
}

.gallery-container {
	transform: translate(1270px,460px);
}
	   
.scrolling-gallery {
    width: 25%;
    height: 1000px; /* Adjust height as needed */
    overflow-y: scroll; /* Enable vertical scrolling */
    position: relative;
    scroll-behavior: smooth; /* Smooth scroll behavior */
    scrollbar-width: auto; /* Make scrollbar width visible on Firefox */
    scrollbar-color: darkgray lightgray; /* Customize scrollbar color for Firefox */
}

.scrolling-gallery::-webkit-scrollbar {
    width: 10px; /* Adjust width of the scrollbar */
}

.scrolling-gallery::-webkit-scrollbar-track {
    background: lightgray; /* Track color */
}

.scrolling-gallery::-webkit-scrollbar-thumb {
    background-color: darkgray; /* Thumb color */
    border-radius: 10px; /* Optional: rounded corners */
}


.index .line-container {
  height: 26px;
  left: 6px;
  position: absolute;
  top: 104px;
  width: 29px;
  transition: all 0.2s ease
}

.index .group-67:hover .line-container {
  color: black;
  transform: translate(60px,0px);
  filter: invert(1)
}

.index .line-7 {
  left: 16px
}

.index .line-6 {
  left: 16px
}

.index .line-5 {
  top: 11.48px
}


.index .group-67:hover .send-me-a-message{
	transform: translate(50px,0px)
}

.i-want-to-hear-from-you {
	transform: translate(0px, 0px);
}

.i-want-to-hear-from-you-1 {
	transform: translate(0px, 0px);
}
	
.index .group-67:hover .i-want-to-hear-from-you{
	color: white;
	z-index: 2;
}
.index .rectangle-46 {
  height: 165px;
  left: 1.6%;
  top: 4.25%;
  width: 629px;
  transition: all 0.2s ease-in-out;
  transform-origin: center;
  position: absolute;
  border: 0px solid black;
}

.index .group-67:hover .rectangle-46 {
  border: 0px solid black;
  background-color: black;
  transform: scale(0.95);
  border-radius: 20px;
  position: absolute;
}
.index .rectangle-30 {
  background-color: var(--white);
  border: 5px solid;
  border-color: var(--black);
  border-radius: 43px;
  height: 85px;
  left: 39px;
  position: absolute;
  top: 75px;
  width: 576px;
}

.index .group-63 {
  background-image: url(../img/group-13-2@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 47px;
  left: 525px;
  position: absolute;
  top: 94px;
  width: 65px;
}

.index .rectangle-36 {
  border: 5px solid;
  border-color: var(--black);
  border-radius: 43px;
  height: 85px;
  left: 39px;
  position: absolute;
  top: 75px;
  width: 576px;
}


.index .overlap-group1 {
  height: 185px;
  position: relative;
  width: 653px;
}

.index .i-want-to-hear-from-you {
  color: var(--white);
  font-family: var(--font-family-brandongrotesque-black);
  font-size: var(--font-size-m);
  font-weight: 900;
  left: 39px;
  letter-spacing: 0;
  line-height: 66px;
  position: absolute;
  text-align: center;
  top: 14px;
  white-space: nowrap;
}

.index .i-want-to-hear-from-you-1 {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-black);
  font-size: var(--font-size-m);
  font-weight: 900;
  left: 39px;
  letter-spacing: 0;
  line-height: 66px;
  position: absolute;
  text-align: center;
  top: 14px;
  white-space: nowrap;
}

.index .rectangle-30 {
  background-color: var(--white);
  border: 5px solid;
  border-color: var(--black);
  border-radius: 43px;
  height: 85px;
  left: 39px;
  position: absolute;
  top: 75px;
  width: 576px;
}

.index .send-me-a-message {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-medium);
  font-size: var(--font-size-s);
  font-weight: 500;
  left: 70px;
  letter-spacing: 0;
  line-height: 66px;
  position: absolute;
  text-align: center;
  top: 84px;
  white-space: nowrap;
}

.index .group-27 {
  background-image: url(../img/group-13-1x-png@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 47px;
  left: 525px;
  position: absolute;
  top: 94px;
  width: 65px;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 1500px; /* adjust this to fit your layout */
    margin: auto;
	transform: translateY(700px)
}

.display-image {
    width: 100%; /* images will stretch to fit container */
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 1; /* Make sure images are above any other elements */
}

a {
    display: block;
}

.arrow {
    position: absolute;
    top: 450px;
    transform: translateY(-50%);
    width: 40px;            /* Width of the circular arrow */
    height: 40px;           /* Height of the circular arrow */
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    text-align: center;
    line-height: 40px;       /* This centers the arrow icon vertically */
    border-radius: 50%;      /* Makes the button a perfect circle */
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.left-arrow {
    left: -100px;
}

.right-arrow {
    right: -100px;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

a img {
    pointer-events: none; /* Ensures clicking the arrows doesn't trigger image link */
}


.group-34 {
	width: 429px;
}

.index .rectangle-36 {
  border: 5px solid;
  border-color: var(--black);
  border-radius: 43px;
  height: 85px;
  left: 39px;
  position: absolute;
  top: 75px;
  width: 576px;
}

.index .line-container {
  height: 26px;
  left: 6px;
  position: absolute;
  top: 106px;
  width: 29px;
}

.index .line-5 {
  height: 3px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 12px;
  width: 28px;
}

.index .line-6 {
  height: 15px;
  left: 15px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 13px;
}

.index .line-7 {
  height: 15px;
  left: 15px;
  object-fit: cover;
  position: absolute;
  top: 11px;
  width: 13px;
}

.index .overlap-group3 {
  height: 1531px;
  left: 116px;
  position: absolute;
  top: 752px;
  width: 2065px;
}


.index .alt-logo video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}	

.index .alt-logo img {
  object-fit: cover;
}

.index .group-86 {
  align-items: flex-start;
  border: 1px solid;
  border-color: var(--dove-gray);
  display: flex;
  height: 1112px;
  justify-content: flex-end;
  left: 0;
  min-width: 1688px;
  padding: 0 563px;
  position: absolute;
  top: 366px;
}

.index .line-19 {
  height: 1112px;
  margin-top: -0.99px;
  object-fit: cover;
  width: 1px;
}

.index .uncle-slam {
  border-radius: 28px;
  height: 316px;
  left: 1187px;
  object-fit: cover;
  position: absolute;
  top: 1206px;
  width: 438px;
}

.index .maisie-cakes-mock-up {
  border-radius: 28px;
  height: 307px;
  left: 1187px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 438px;
}

.index .potions-green {
  border-radius: 28px;
  height: 316px;
  left: 1187px;
  object-fit: cover;
  position: absolute;
  top: 312px;
  width: 438px;
}

.index .screenshot-2023-04-11-at-105532-am {
  border-radius: 28px;
  height: 247px;
  left: 1187px;
  object-fit: cover;
  position: absolute;
  top: 633px;
  width: 438px;
}

.index .tfl-logo {
  border-radius: 28px;
  height: 316px;
  left: 1187px;
  object-fit: cover;
  position: absolute;
  top: 885px;
  width: 438px;
}

.index .group {
  align-items: center;
  background-color: var(--black);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  left: 45px;
  min-height: 1001px;
  position: absolute;
  top: 418px;
  width: 1036px;
}

.index .maisie-cakes-mock-up-1 {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .maisie-cakes {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 2.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 336px;
  text-align: center;
  white-space: nowrap;
}

.index .a-playful-logo-desig {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 2.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 630px;
  text-align: center;
  white-space: nowrap;
}

.index .potions-green-1 {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .potions {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 218px;
  text-align: center;
  white-space: nowrap;
}

.index .a-passion-project-fo {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 568px;
  text-align: center;
  white-space: nowrap;
}

.index .group-89 {
  align-items: center;
  background-color: var(--black);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  left: 45px;
  min-height: 872px;
  position: absolute;
  top: 418px;
  width: 1036px;
}

.index .screenshot-2023-04-11-at-105532-am-1 {
  border-radius: 28px;
  height: 584px;
  object-fit: cover;
  width: 1036px;
}

.index .dune {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 2.0px;
  margin-top: 73px;
  min-height: 74px;
  min-width: 142px;
  text-align: center;
  white-space: nowrap;
}

.index .an-animated-title-se {
  letter-spacing: 0;
  line-height: 50px;
  margin-bottom: -5px;
  margin-left: 2.0px;
  margin-top: 28px;
  min-height: 45px;
  min-width: 530px;
  text-align: center;
  white-space: nowrap;
}

.index .tfl-logo-1 {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .tackle-for-loss {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 424px;
  text-align: center;
  white-space: nowrap;
}

.index .a-logo-redesign-to-r {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 145px;
  min-width: 638px;
  text-align: center;
  white-space: nowrap;
}

.index .uncle-slam-1 {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .uncle-slam-2 {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 308px;
  text-align: center;
  white-space: nowrap;
}

.index .a-new-summer-beer-la {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 520px;
  text-align: center;
  white-space: nowrap;
}

.index .potions-brown {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .a-passion-project-fo-1 {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 574px;
  text-align: center;
  white-space: nowrap;
}

.index .the-vet-house {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .the-vet-house-1 {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 376px;
  text-align: center;
  white-space: nowrap;
}

.index .a-cliche-vet-clinic {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 572px;
  text-align: center;
  white-space: nowrap;
}

.index .a-song-of-ice-and-fire {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .a-song-of-ice-and-fire-1 {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 594px;
  text-align: center;
  white-space: nowrap;
}

.index .a-redesign-for-the-b {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 648px;
  text-align: center;
  white-space: nowrap;
}

.index .potions-purple {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .overlap-group2 {
  height: 1008px;
  left: 45px;
  position: absolute;
  top: 418px;
  width: 1036px;
}

.index .rectangle-49 {
  background-color: var(--black);
  border-radius: 28px;
  height: 1001px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1036px;
}

.index .pai-wine {
  left: 416px;
  letter-spacing: 0;
  line-height: 66px;
  position: absolute;
  text-align: center;
  top: 785px;
  white-space: nowrap;
}

.index .a-wine-label-that-in {
  left: 226px;
  letter-spacing: 0;
  line-height: 50px;
  position: absolute;
  text-align: center;
  top: 864px;
  white-space: nowrap;
}

.index .pai-wine-final {
  border-radius: 28px;
  height: 761px;
  left: 10px;
  object-fit: cover;
  position: absolute;
  top: 8px;
  width: 1015px;
}

.index .screenshot-2023-04-25-at-104356-am {
  border-radius: 28px;
  height: 725px;
  object-fit: cover;
  width: 1036px;
}

.index .the-king-of-cocaine {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 544px;
  text-align: center;
  white-space: nowrap;
}

.index .an-infographic-depic {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 16.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 600px;
  text-align: center;
  white-space: nowrap;
}

.index .njd {
  height: 725px;
  width: 1036px;
}

.index .new-jersey-devils {
  letter-spacing: 0;
  line-height: 66px;
  margin-left: 14.0px;
  margin-top: 39px;
  min-height: 74px;
  min-width: 476px;
  text-align: center;
  white-space: nowrap;
}

.index .a-much-needed-redes {
  letter-spacing: 0;
  line-height: 50px;
  margin-left: 14.0px;
  margin-top: 12px;
  min-height: 95px;
  min-width: 608px;
  text-align: center;
  white-space: nowrap;
}

.index .a-song-of-ice-and-fire-2 {
  border-radius: 28px;
  height: 316px;
  left: 1627px;
  object-fit: cover;
  position: absolute;
  top: 308px;
  width: 438px;
}

.index .pai-wine-final-1 {
  border-radius: 28px;
  height: 329px;
  left: 1627px;
  object-fit: cover;
  position: absolute;
  top: 1202px;
  width: 438px;
}

.index .screenshot-2023-04-25-at-104356-am-1 {
  border-radius: 28px;
  height: 247px;
  left: 1627px;
  object-fit: cover;
  position: absolute;
  top: 950px;
  width: 438px;
}

.index .potions-purple-1 {
  border-radius: 28px;
  height: 316px;
  left: 1627px;
  object-fit: cover;
  position: absolute;
  top: 629px;
  width: 438px;
}

.index .priddey-design-logo {
  background-image: url(https://cdn.animaapp.com/projects/66b5494277f318744a4bd561/files/priddey-design-logo.gif);
  background-position: 50% 50%;
  background-size: cover;
  height: 316px;
  left: 679px;
  position: absolute;
  top: 0;
  width: 562px;
}

.index .priddey-design-logo video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.index .priddey-design-logo img {
  object-fit: cover;
}

.index .overlap-group5 {
  height: 110px;
  left: 112px;
  position: absolute;
  top: 79px;
  width: 429px;
  z-index: 2;
}

.index .component-7-15 {
  background-color: var(--black);
  height: 108px;
  left: 4px;
  position: absolute;
  top: 1px;
  width: 420px;
}

.index .group-34 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1pt solid gray;
  cursor: pointer;
  display: flex;
  height: 110px;
  justify-content: flex-end;
  left: 0;
  min-width: 429px;
  padding: 15.5px 152px;
  position: absolute;
  top: 0;
  transition: all 0.2s ease;
}

.index .group-34:hover {
  transform: translate(-20px, -15px);
}

.index .place {
  min-width: 124px;
}

.index .overlap-group6 {
  height: 110px;
  left: 1380px;
  position: absolute;
  top: 79px;
  width: 429px;
}

.index .component-6-16 {
  background-image: url(../img/path-16@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 108px;
  left: 4px;
  position: absolute;
  top: 1px;
  width: 420px;
}

.index .group-75 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1pt solid gray;
  cursor: pointer;
  display: flex;
  height: 110px;
  justify-content: flex-end;
  left: 0;
  min-width: 429px;
  padding: 15.5px 121px;
  position: absolute;
  top: 0;
  transition: all 0.2s ease;
}

.index .group-75:hover {
  transform: translate(20px, -15px);
}

.index .place-1 {
  min-width: 186px;
}

.index .overlap-group4 {
  height: 251px;
  left: -36px;
  position: absolute;
  top: 398px;
  width: 1617px;
}

.index .blending-creativity {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-black);
  font-size: var(--font-size-xxxxl);
  font-weight: 900;
  left: 377px;
  letter-spacing: 0;
  line-height: 66px;
  position: absolute;
  text-align: center;
  top: 23px;
  white-space: nowrap;
  z-index: 0;
}

.index .group-82 {
  display: flex;
  height: 248px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1023px;
  z-index:1;
}

.index .group-80 {
  background-color: var(--black);
  border-radius: 39px;
  display: flex;
  flex: 1;
  width: 1023px;
  transform: translate(-1030px,390px);
  z-index:10;
  transition: all 0.2s ease-in-out;
}

.index .priddey-design-logo:hover ~ .group-80 {
  transform: translate(-50px, 390px); /* Move 400px to the left */
}

.index .group-77 {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 34.0px;
  margin-left: 103.0px;
  margin-right: 103.0px;
  margin-top: 22.0px;
  width: 819px;
}

.index .about {
  color: var(--white);
  font-family: var(--font-family-brandongrotesque-black);
  font-size: var(--font-size-xxl);
  font-weight: 900;
  height: 70px;
  letter-spacing: 0;
  line-height: 60px;
  margin-top: 4px;
  white-space: nowrap;
  width: 160px;
}

.index .priddey-design-focus {
  color: var(--white);
  flex: 1;
  font-family: var(--font-family-brandongrotesque-regular);
  font-size: var(--font-size-l);
  font-weight: 400;
  height: 126px;
  letter-spacing: 0;
  line-height: 36px;
  margin-bottom: -10px;
  margin-right: -2px;
  max-height: 126px;
  white-space: nowrap;
}

.index .potions-brown-1 {
  border-radius: 28px;
  height: 316px;
  left: 1303px;
  object-fit: cover;
  position: absolute;
  top: 2279px;
  width: 438px;
}

.index .the-vet-house-2 {
  border-radius: 28px;
  height: 304px;
  left: 1743px;
  object-fit: cover;
  position: absolute;
  top: 751px;
  width: 438px;
}

.index .njd-1 {
  height: 265px;
  left: 1743px;
  position: absolute;
  top: 2288px;
  width: 437px;
}

.index .njd-2 {
  border-radius: 28px;
  object-fit: cover;
}

.index .place-2 {
  color: var(--black);
  font-family: var(--font-family-brandongrotesque-light);
  font-size: var(--font-size-xl);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 80px;
  min-height: 59px;
  text-align: center;
  white-space: nowrap;
}

.black-footer {
    width: 1920px; /* Set the width */
    height: 250px; /* Set the height */
    background-color: var(--black);
	transform: translateY(2080px)
}

.index .group-67 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid var(--dove-gray);
  cursor: pointer;
  display: flex;
  height: 185px;
  left: 1150px;
  min-width: 653px;
  position: absolute;
  top: 2100px; /* Adjust this to control its position above the footer */
  filter: invert(1);
  z-index: 0; /* Ensures it's above the footer */
}

.index .alt-logo {
  background-image: url(https://cdn.animaapp.com/projects/66b5494277f318744a4bd561/files/alt-logo.gif);
  background-position: 50% 50%;
  background-size: cover;
  height: 272px;
  left: 0px;
  position: absolute;
  top: 2060px;
  width: 1136px;
  filter: invert(1);
  transform: scale(.6) translateX(-300px)
}

.cat {
	transform: scale(.2) translate(8300px, 7500px);
	z-index: 3;
}

.tail {
	z-index: 0;
	transform: translate(1225px, 1565px) scale(.35);
}