/* screen - index */


.projects {
  background-color: var(--white);
  cursor: pointer;
  height: 2000px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1920px;
  zoom:75%;
  transform: translate(-210px, 10px);
}

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

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

.group-10 {
	transform: translate(120px, 150px)
}

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

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

.projects .project {
  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,510px);
}

.title {
	transform: translate(710px, 70px) scale(.75);
	z-index: 100;
	
}

.contact-box {
    width: 429px;            /* Set width */
    height: 110px;           /* Set height */
    background-color: black; /* Background color for visibility */
    padding: 20px;           /* Add some padding */
    margin: 20px;            /* Add some margin */
    display: block;          /* Ensure it's displayed */
	transform: translate(-18px, -20px);
	z-index: 1;
}
	   
.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 */
}


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

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

.line-7 {
  left: 16px
}

.line-6 {
  left: 16px
}

.line-5 {
  top: 11.48px
}


.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);
}
	
.group-67:hover .i-want-to-hear-from-you{
	color: white;
	z-index: 2;
}
.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;
}

.group-67:hover .rectangle-46 {
  border: 0px solid black;
  background-color: black;
  transform: scale(0.95);
  border-radius: 20px;
  position: absolute;
}
.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;
}

.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;
}

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


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

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.display-potions {
	transform: scale(.6) translate(-400px, 900px)
}

.display-motions {
	transform: scale(.6) translate(2250px, -4630px)
}

.display-dune {
	transform: scale(.6) translate(-3000px, -1860px)
}


.group-34 {
	width: 429px;
}

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

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

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

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

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

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

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

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

.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;
}

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

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

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

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

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

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

.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;
}

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

.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;
}

.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;
}

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

.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;
}

.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;
}

.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;
}

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

.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;
}

.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;
}

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

.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;
}

.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;
}

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

.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;
}

.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;
}

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

.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;
}

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

.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;
}

.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;
}

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

.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;
}

.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;
}

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

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

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

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

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

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

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

.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;
}

.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;
}

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

.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;
}

.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;
}

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

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

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

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

.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%;
}

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

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

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

.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;
}

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

.place {
  min-width: 124px;
}

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

=.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;
}

.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;
  z-index: 2;
}

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

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

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

.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;
}

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

.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;
}

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

.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;
}

.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;
}

.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;
}

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

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

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

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

.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;
}

.group-67 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--dove-gray);
  cursor: pointer;
  display: flex;
  height: 185px;
  left: 1150px;
  min-width: 653px;
  position: absolute;
  top: 1800px;
  filter: invert(1);
  z-index: 0;
}

.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: 1760px;
  width: 1136px;
  filter: invert(1);
  transform: scale(.6) translateX(-300px)
}

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


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

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

.cat-group {
	transform: translate(0px, -1392px)
}

.footer {
	transform: translateY(-1390px)
}