/* ========== GLOBAL RULES: CSS RESET ========== */

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;}
  /* *{outline: red 2px solid;} */
  a{ text-decoration: none; color:black; }

/* ========== END >>> GLOBAL RULES ========== */


/* ========== @FONT FACE RULES ========== */

@font-face{
  font-family: "gill-sans-light";
  src: url(../fonts/gill-sans-2/Gill-Sans-Light.otf);
}
@font-face{
  font-family: "stixgeneral_regular";
  src: url(../fonts/stixgeneral_regular.ttf);
}

/* ========== END >>> @FONT FACE RULES ========== */


/* ========== UNIVERSAL STYLING ========== */

html{
  scroll-behavior: smooth;
  scroll-padding-top: 55px;
} /*enable smooth scroll to each section in compatible browsers and top padding to account for the fixed navigation bar*/

body{
  background-color: #ffffff;
  font-family: "Kumbh Sans";
  font-weight: 400;
  font-size: calc(16px + 0.390625vw);
  line-height: 1.6;
  margin: 0 auto;
  max-inline-size: 1920px;
}

/* https://www.youtube.com/watch?v=HaTxxAj3cBo&list=PL4-IK0AVhVjOJs_UjdQeyEZ_cmEV3uJvx&index=26 
https://matthewjamestaylor.com/responsive-font-size#:~:text=To%20make%20font%20size%20responsive%20in%20steps%2C%20set%20the%20base,relative%20to%20the%20screen%20width.*/

h1{
  font-size: calc(50px + 0.390625vw);
  line-height: 1.1;
  font-family: "stixgeneral_regular";
  margin-block: 1em;
}

h2{
  font-size: calc(50px + 0.390625vw);
  line-height: 1.1;
  font-family: "gill-sans-light";
  font-weight:900;
  padding-bottom: 1em;
}

img{
  display: inline-block;
  max-width: 100%;
} /* global rule for img tags */

p{
  margin-block-end: 1.1em;
}
/* https://daveredfern.com/use-units-css/ */

a{
  font-family: "gill-sans-light";
}

span{
  font-style: italic;
  font-weight: 300;
}

.span2 {
  font-style: normal;
  font-weight: 700;
}

.text-d {
  font-style: normal;
  font-weight: 400;
} /* for text block that will be set to disappear at smaller viewport widths */

.service-gallery-scroll, .project-gallery-scroll{
  display: none;
} /* I have hidden the mobile project and service gallery on desktop. A scrollable gallery works better on a mobile device that the icon-controlled one I have in the desktop/tablet width versions */

.inline-padding{
  padding-inline: 30px;
} /* Padding on navigation anchor tags */

.padding30{
  padding: 30px;
} /* Padding on overlay text and footer wrapper */

/* ========== END >>> UNIVERSAL STYLING ========== */



/* ========== HEADER AND NAVIGATION STYLING ========== */

header{
  z-index: 40; /* So the fixed back to top and contact icons disappear under the header hero image when scrolled back to top */
  position: relative;
}

.hero{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #f9f4ee;
  max-inline-size: 1920px; /* I have restricted the width to 1700px (a large screen/desktop) as my images are 50% of each section with object-fit: cover and therefore the wider they get the worse they look*/
  margin: auto;
  position: relative;
  background-image: url(../images/jenny-wu-portrait-hero.jpg); /* Jenny Wu Photography. 2020. “Lara- A Summer Beauty Editorial — Jenny Wu Photography.” Photograph. Reproduced from: Pinterest.  https://au.pinterest.com/pin/609252655824852745/ */
  /* I've used a portrait background image centered within the element in the viewport that will resize appropriately to a portrait image on mobile */
  background-position: top 43% right 50%;
  background-size: cover;
  background-repeat: no-repeat; 
  overflow: hidden;
}

.overlay{
  background-color: white;
  opacity: .3;
  height: 100vh;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.logo-container{
  background-color: #FFE3E3;
  opacity: .8;
  max-inline-size: 35%;
  position: relative;
  top: 30%;
  padding: 30px;
  margin: auto;
  transition: ease 1s;
}

.logo-container:hover{
  opacity: .9;
  border-radius: 10px;
  max-inline-size: 36%;
} /* the hero page logo transitions on hover to slightly enlarged version with rounded border edges and slightly increased opacity*/

.logo{
  width: 100%;
}

.desktopmenu{
  width: 100vw;
  max-inline-size: 1920px;
  position: fixed;
  top: 0;
}

nav ul{
  display: flex;
  flex-direction: row;
  background-color: white;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 5px;
  opacity: 1;
  margin-block: 0;
}

nav ul li{
  list-style: none;
}

li a{
  color: #141B0E;
  font-weight: 500;
  font-size: 1.8rem;
  text-decoration: none;
  transition: ease-in-out .5s;  
}

li a:hover{
  font-weight: 900;
  font-size: 2rem;
  text-decoration: underline;
 } /* Menu item anchior tags transition to a larger size, heavier weight and underline style on hover*/

.mobilemenu, #burger {
  display: none;
} /* hidden mobile menu for smaller viewport widths */

/* ========== END >>> HEADER AND NAVIGATION STYLING ========== */



/* ========== MAIN CONTAINERS AND ABOUT SECTIONS STYLING ========== */
/*my initial sections (after the main tag) are div contianers with class names as the h1 and h2 headings are nested 2-3 divs down within my section structure - so the <section> containers are the content-l and content-r classes - after <main > div (.about) > div (.container-r, or .container-l) > section */

.container-r, .container-l, .container-projects, .container-services{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
  max-inline-size: 1920px;
  margin: 100px auto;
  background-color: #ffffff;

} /*The container for each content section: contains 2 elements - the content and image containers - (r) and (l) indicates a container with an image element on the right or left hand side*/

.content-l, .content-r{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
  position: relative;
  width: 50%;
  height: auto;
  /* top: 3em; */
  padding: 2em 2em 2em 3em;
} /* The content (text) element for each page 'spread' - this is the element where I have put my h1 and h2*/

.content-l{
  padding: 3em 2em 2em 2em;
}
.image-r-container, .image-l-container{
  position: relative;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}/* image containers used to utilse the object-fit property in either cover or contain at selected breakpoints*/

.image-r{
  width: 100%;
  height:100vh;
  flex: 0 1 auto;
  object-fit: cover;
  object-position: bottom;
  padding: 30px 0 30px 30px;
} /*generic right and left situated image containers for the About and Contact sections - with differentiated padding styles*/

.image-l{
  padding: 30px 30px 30px 0;
  width: 100%;
  height:100vh;
  flex: 0 1 auto;
  object-fit: cover;
  object-position: top;
}

.ivy-mae{
  font-family: "stixgeneral_regular";
  font-style: normal;
}

.photography{
  font-family: "gill-sans-light";
  font-style: normal;
}

.scrolldown-l {
  position: relative;
  bottom: -10%;
  align-self: flex-end;
  border: solid black 1px;
  border-radius: 50%;
  font-size: 30px;
  padding-inline: 18px;
  padding-top: 8px;
  animation: dip 1s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
} /* scrolldown anchor tags using a HTML entity and padding/border radius to achieve button effect*/

.scrolldown-r {
  position: relative;
  bottom: -10%;
  font-size: 30px;
  border: solid black 1px;
  border-radius: 50%;
  padding-inline: 18px;
  padding-top: 8px;
  animation: dip 1s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes dip{
  from{
    transform: translateY(0%);
    opacity: .8;
    color: #141B0E;
  }

  to{
    color: black;
     transform: translateY(-10%);
     opacity: 1;
  }
} /* subtle continuous animation for the scroll down arrow button to add a VERY slight (but not obtrusive) movement to prompt user to click/scroll down*/

#image1 {
  object-position: bottom;
}/*when using object-fit:contain whis image needs to be position from the bottom - as opposed to the object-fit:center rule I have on the others as majority of photographic content at the bottom of this particular image*/

.ivy {
  filter: grayscale();
}

.body-text, .body-text-d{
  max-width: 600px;
}

/* ========== END >>> MAIN CONTAINERS AND ABOUT SECTIONS STYLING ========== */


/* ========== OVERLAY ON ABOUT & CONTACT SECTION IMAGES ========== */

.image-r-container:hover .overlay2-text, .image-l-container:hover .overlay2-text{
  opacity: .7;
}

.overlay2-text {
  color: rgb(255, 255, 255);
  font-size: calc(18px + 0.390625vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 1);
  opacity: 0;
  width: 80%;
  transition: .5s ease;
}

/* ========== END >>> OVERLAY ON ABOUT & CONTACT SECTION IMAGES ========== */



/* ----------PORTFOLIO SECTION STYLING---------- */


#portfolio-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  width: 100vw;
  background-color:#FFf;
  max-inline-size: 1920px;
  margin: auto;
}

.portfolio-heading2{
  text-align: right;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 1em;
  padding: 0;
}
.portfolio-heading{
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 1em;
  padding: 0;
}

.portfolio-container{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  max-inline-size: 1920px;
  margin: auto;
  background-color: #ffffff;
}

.portfolioimage-container, .portfolioimage-container-d{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  flex: 1 1 auto;
  max-inline-size: 33%;
  height: 100%;
} /* portfolioimage-container-d class for last image set to display:none when portfolio reduced to 2 columns due to uneven number of images*/

.portfolioimage-container-landscape{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  flex: 1 1 auto;
  max-inline-size: 66%;
  height: 100%;
} /* specific rule for the one landscape image in portfolio - taking up 2 portrait spaces*/

 .galleryimage{
  flex: 1 1 auto;
  max-inline-size: 100%;
  transition: 1s ease;
  padding: 10px;
 }

.galleryimage:hover{
  transform: scale(1.02);
  z-index: 25;
 } /* portfolio images set to a slight 0.02% increase in scale on hover to give a subtle dynamic movement to portfolio images - in addition to the explanatory text overlay*/

.overlay-p{
  margin-block: .5em;
} /*overlay text elements for portfolio images*/

/* ----------END >>> PORTFOLIO SECTION STYLING---------- */




/* ========== TEXT OVERLAY ON PORTFOLIO IMAGES ========== */

 .portfolioimage-container, .portfolioimage-container-d, .portfolioimage-container-landscape{
  position: relative;
}

.portfolioimage-container-landscape:hover .overlay1-text, .portfolioimage-container:hover .overlay1-text, .portfolioimage-container-d:hover .overlay1-text  {
  opacity: .8;
}

.overlay1-text{
  color: rgb(255, 255, 255);
  font-size: calc(18px + 0.390625vw);
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: black;
  opacity: 0;
  width: 80%;
  z-index: 26;
} /* rules for text block overlay on portfolio images specifically */

/* ========== END >>> TEXT OVERLAY ON PORTFOLIO IMAGES ========== */




/* ========== PROJECTS & SERVICES SECTIONS STYLING ========== */

.service-section, .project-section{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: space-between;
  align-items: flex-start;
  width: 50%;
  height: auto;
  padding: 2em;
} /* text content for each service and project sections */

.service1, .service2, .service3, .project1, .project2, .project3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-block-start: 2em;
} /* the containers for each project/service nested details (icon, text and anchor tags) */

.service-icon1, .service-icon2, .service-icon3, .project-icon1, .project-icon2, .project-icon3 {
  background-repeat: no-repeat;
  margin-right: 2em;
  width: 120px;
  min-width: 100px;
} /* styling for icons within the above containers */

.textblock {
  display: flex;
  flex-direction: column;
} /* text section within the above containers */

.service-details, .project-details{
  margin-block: 0;
}

.service-gallery {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  width: 50%;
}

.project-gallery{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  width: 50%;
}

#image-first{
  align-self: flex-start;
} /*I have aligned the first image in the gallery (portrait) flex-start as the center rule on the gallery cut off the top of her head - but was fine for the other images */

.info { 
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: flex-start;
  align-items: flex-start;
  row-gap: 2em;
}

/* ========== END >>> PROJECTS & SERVICES SECTIONS STYLING ========== */


/* ========== RULES AND ANIMATION FOR PROJECT & SERVICE ICONS ========== */

.project-icon1{
width: 100px;
height: 100px;
background-image: url(../icons/portrait.png); /* Syoko. N.d. “線の編集ができるアバターのアイコンセット（アウトライン化していない）” Icons. Adobe Stock. File number #835665804. Accessed 15 November, 2025. https://stock.adobe.com/au/images/%E7%B7%9A%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%83%E3%83%88%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%EF%BC%89/835665804 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes bounce {
from{
		transform: scale(1);
	}

		to {transform: scale(1.05);
	}
}

.project-icon1:hover{
 background-image: url(../icons/portrait-c.png); /* Syoko. N.d. “線の編集ができるアバターのアイコンセット（アウトライン化していない）” Icons. Adobe Stock. File number #835665804. Accessed 15 November, 2025. https://stock.adobe.com/au/images/%E7%B7%9A%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%83%E3%83%88%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%EF%BC%89/835665804 */
 transform: scale(1.1);
}

.project-icon2{
width: 100px;
height: 100px;
background-image: url(../icons/pet.png); /* Jocelyn_Flores. N.d. “Pets icons set. editable line icons, outline, animal and domestic companion symbols.” Icons. Adobe Stock. File number #1776571252. Accessed 15 November, 2025. https://stock.adobe.com/au/images/pets-icons-set-editable-line-icons-outline-animal-and-domestic-companion-symbols/1776571252 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.project-icon2:hover{
 background-image: url(../icons/pet-c.png); /* Jocelyn_Flores. N.d. “Pets icons set. editable line icons, outline, animal and domestic companion symbols.” Icons. Adobe Stock. File number #1776571252. Accessed 15 November, 2025. https://stock.adobe.com/au/images/pets-icons-set-editable-line-icons-outline-animal-and-domestic-companion-symbols/1776571252 */
 transform: scale(1.1);
}

.project-icon3{
  width: 100px;
  height: 100px;
  background-image: url(../icons/family.png); /* Dear Lala. N.d. “Community icon set. Containing friendship, relationship, social, diversity, people, family, love, networking, trust, neighborhood, belonging and more. Editable line icons. Vector illustration.” Icons. Adobe Stock. File number #1538276682. Accessed 15 November, 2025. https://stock.adobe.com/au/images/community-icon-set-containing-friendship-relationship-social-diversity-people-family-love-networking-trust-neighborhood-belonging-and-more-editable-line-icons-vector-illustration/1538276682 */
  background-position: center;
  background-size: contain;
  transition: ease-in-out 1s;
  animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.project-icon3:hover{
 background-image: url(../icons/family-c.png); /* Dear Lala. N.d. “Community icon set. Containing friendship, relationship, social, diversity, people, family, love, networking, trust, neighborhood, belonging and more. Editable line icons. Vector illustration.” Icons. Adobe Stock. File number #1538276682. Accessed 15 November, 2025. https://stock.adobe.com/au/images/community-icon-set-containing-friendship-relationship-social-diversity-people-family-love-networking-trust-neighborhood-belonging-and-more-editable-line-icons-vector-illustration/1538276682 */
 transform: scale(1.1);
}

.service-icon1{
width: 100px;
height: 100px;
background-image: url(../icons/branding.png); /* Gopal. N.d. “Perfume bottle icons. Outline or line icon design bundle.” Icons. Adobe Stock. File number #1611696181. Accessed 15 November, 2025. https://stock.adobe.com/au/images/perfume-bottle-icons-outline-or-line-icon-design-bundle/1611696181 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon1:hover{
 background-image: url(../icons/branding-c.png); /* Gopal. N.d. “Perfume bottle icons. Outline or line icon design bundle.” Icons. Adobe Stock. File number #1611696181. Accessed 15 November, 2025. https://stock.adobe.com/au/images/perfume-bottle-icons-outline-or-line-icon-design-bundle/1611696181 */
 transform: scale(1.1);
}

.service-icon2{
width: 100px;
height: 100px;
background-image: url(../icons/camera.png); /* Creatives. N.d. Camera icon Graphic vector set for ui design.” Icons. Adobe Stock. File number #1522987625. Accessed 15 November, 2025. https://stock.adobe.com/au/images/camera-icon-graphic-vector-set-for-ui-design/1522987625 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon2:hover{
 background-image: url(../icons/camera-c.png); /* Creatives. N.d. Camera icon Graphic vector set for ui design.” Icons. Adobe Stock. File number #1522987625. Accessed 15 November, 2025. https://stock.adobe.com/au/images/camera-icon-graphic-vector-set-for-ui-design/1522987625 */
 transform: scale(1.1);
}

.service-icon3{
  width: 100px;
  height: 100px;
  background-image: url(../icons/fashion.png); /* Sugarstock. N.d. “Shoe line icon set. High heels sandal, affordable classy fabulous shoes, office footwear, slipper shoes vector illustrations. Simple outline signs for fashion icon.” Icons. Adobe Stock. File number #727842701. Accessed 15 November, 2025. https://stock.adobe.com/au/images/shoe-line-icon-set-high-heels-sandal-affordable-classy-fabulous-shoes-office-footwear-slipper-shoes-vector-illustrations-simple-outline-signs-for-fashion-icon/727842701 */
  background-position: center;
  background-size: contain;
  transition: ease-in-out 1s;
  animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon3:hover{
 background-image: url(../icons/fashion-c.png); /* Sugarstock. N.d. “Shoe line icon set. High heels sandal, affordable classy fabulous shoes, office footwear, slipper shoes vector illustrations. Simple outline signs for fashion icon.” Icons. Adobe Stock. File number #727842701. Accessed 15 November, 2025. https://stock.adobe.com/au/images/shoe-line-icon-set-high-heels-sandal-affordable-classy-fabulous-shoes-office-footwear-slipper-shoes-vector-illustrations-simple-outline-signs-for-fashion-icon/727842701 */
 transform: scale(1.1);
}



/* ----------BACK TO TOP BUTTON & CONTACT BUTTON---------- */

.backtop{
  position: fixed;
  bottom: 1%;
  left: 3%;
  z-index: 33;
  transition: 1s ease;
}

.backtop:hover{
  transform: scale(1.2);
}

.call{
  position: fixed;
  bottom: 1%;
  right: 3%;
  z-index: 33;
  transition: 1s ease;
}

.call:hover{
  transform: scale(1.2);
}

/* ----------END >>> BACK TO TOP BUTTON & CONTACT BUTTON---------- */


/* -------------------FOOTER-------------------*/

#footer{
  display: flex;
  flex-direction: row;
  background-color: #FFE3E3;
  padding-block: 40px;
  height: 50vh;
  padding-bottom: 100px;
  max-inline-size: 1920px;
  margin: auto;
}

.foot-wrapper-left {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 50%;
}

.foot-wrapper-left a{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.foot-wrapper-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 50%;
}

.footer-logo {
  width: 80%;
}
.icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.icons a {
  padding-right: 20px;
}

/* -------------------END >>> FOOTER-------------------*/


/* ----------CONTACT FORM---------- */

.fcontainer {
  width: 100%;
}

.fnamelabel, .lnamelabel, .subjectlabel {
  display: none;
} 

#form {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
} /* justified flex-end so the 'submit' button sits at the right margin - towards center of screen*/

input[type=text], textarea {
  margin-block: 0;
  border-radius: 0;
  border: 1px solid black;
  height: 3rem;
}

input[type=text] {
  border-bottom: 0;
}

input[type=submit] {
  align-self: flex-end;
  margin-top: 2vh;
  padding:10px 30px;
  background-color: #FFE3E3;
  font-size: calc(20px + 0.390625vw);
  border-radius: 3px;
  border: grey;
  box-shadow:  0.05em 0.05em 0.05em hsl(0, 0%, 47%);
}

/* ========== END >>> CONTACT FORM ========== */






/* ========== MEDIA QUERIES ========== */


/* ========== RESPONSIVE DESIGN ============= */
  

/* ===== DESKTOP HD: Media queries for most HD desktops ===== */
@media only screen and (max-width: 1920px) {

  .content-l, .content-r{
    padding: 3em 3em 3em 5em;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }

  .service-section{
    flex-wrap: wrap;
    align-content: center;
  }

  .service-section h2, .project-section h2{
    padding-block: 1em;
  }

  .service1, .service2, .service3{
    max-width: 700px;
  }
}


@media only screen and (max-width: 1545px){
.container-l, .container-r, .content-l, .content-r{
  height: auto;
  justify-content: flex-start;
  flex-wrap: wrap;
} /* changed the height to auto instead of 100vh as the viewport narrows as the content begins to distort trying to fill the full viewport height leaving large white gaps*/

.scrolldown-l, .scrolldown-r{
  bottom: 0;
} /* I have moved these higher as they disappear of the bottom of the viewport as it narrows*/

}

/* ===== SMALL DESKTOP: Media queries for laptop/small desktop ===== */
@media only screen and (max-width: 1366px) { 

  .image-l, .image-r {
    object-fit: contain;
    object-position: bottom;
    height: auto;
  }

  .service-section h2, .project-section h2{
    padding-bottom: 1em;
    padding-top: 0;
  } /*removed the bottom padding for the h2 added at 1920px as causes the content to display too low and be obscured by the bact to top and call buttons*/

  h1{
  font-size: calc(45px + 0.390625vw);
  margin-block: 0;
  padding-bottom: 1em;
  } /* I've changed the rules for the headings at this point because they break over 2 lines and the calc setting doesn't reduce the size enough - there's probably better ways to do this :( */
}

@media only screen and (max-width: 1280px) {

 .service-section h2, .project-section h2{
    padding-bottom: 0;
 }

 .footer-copyright{
  font-size: 1rem;
 }
}

/* ===== TABLET: Media queries for verticle and horizontal ===== */

@media only screen and (max-width: 1024px) {
/* at this viewport width the portfolio drop to a 2 column layout and the one landscape image takes up the full width of the screen */

body{
  font-size: 1rem;
}

.logo-container{
  opacity: .8;
  max-inline-size: 42%;
  top: 20%;
  transition: ease 1s;
}

.logo-container:hover {
  opacity: .9;
  border-radius: 5px;
  max-inline-size: 44%;
}

h1, h2{
font-size: calc(35px + 0.390625vw)
} 

.project-section h2, .service-section h2{
  font-size: 3em;
  padding-bottom: .5em;
}

.scrolldown-l, .scrolldown-r{
  bottom: -10%;
}

p{
  margin-block: 1em;
}

.portfolioimage-container{
  max-inline-size: 50%;
}

.portfolioimage-container-landscape{
  max-inline-size: 100%;
}

.portfolioimage-container-d{
  display: none;
} 

.fcontainer {
  width: 100%;
  margin-block: 0;
}

.container-l, .container-r, .container-projects, .container-services, .image-r-container, .image-l-container, .service-section, .project-section, .service-gallery, .project-gallery, .image-l-container, .image-r-container{
  height: auto;
}

.image-l, .image-r{
  padding: 10px;
}
}
    

@media only screen and (max-width: 768px) { 

.scrolldown-l, .scrolldown-r, .project-h2, .text-d{
  display: none;
} /* removed a paragraph of text from each option to fit content into 768px viewport width*/

.logo-container{
  opacity: .8;
  max-inline-size: 50%;
  top: 20%;
  transition: ease 1s;
}

.logo-container:hover {
  opacity: .9;
  border-radius: 5px;
  max-inline-size: 52%;
}

.h1{
  font-size: 2.5em;
  margin-block: 0;
}

h2{
  font-size: 2em;
  padding-bottom: 0;
}

.body-text-d{
  display: none;
}

 .portfolio-heading, .portfolio-heading2{
  margin-top: 1.25em;
  font-size: 2em;
}

 .container-projects, .container-services{
  flex-wrap: nowrap;
}

.service-gallery, .project-gallery{
  width: 90%;
  height: auto;
}

.service-section, .project-section{
  width: 100%;
  height: auto;
  align-items: flex-start;
  padding: 1em;
} 

.service-details, .project-details {
  margin-block: .5em;
}

.service1, .service2, .service3, .project1, .project2, .project3{
  margin-block-start: 0;
}

.service-icon1, .service-icon2, .service-icon3, .project-icon1, .project-icon2, .project-icon3{
  margin-right: 1em;
}


/* ICON SIZE ADJUSTMENT ANIMATION @ 768px */

.project-icon1{
width: 80px;
height: 80px;
background-image: url(../icons/portrait.png); /* Syoko. N.d. “線の編集ができるアバターのアイコンセット（アウトライン化していない）” Icons. Adobe Stock. File number #835665804. Accessed 15 November, 2025. https://stock.adobe.com/au/images/%E7%B7%9A%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%83%E3%83%88%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%EF%BC%89/835665804 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes bounce {
from{
		transform: scale(1);
	}

		to {transform: scale(1.05);
	}
}

.project-icon1:hover{
 background-image: url(../icons/portrait-c.png); /* Syoko. N.d. “線の編集ができるアバターのアイコンセット（アウトライン化していない）” Icons. Adobe Stock. File number #835665804. Accessed 15 November, 2025. https://stock.adobe.com/au/images/%E7%B7%9A%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%83%E3%83%88%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%EF%BC%89/835665804 */
 transform: scale(1.1);
}

.project-icon2{
width: 80px;
height: 80px;
background-image: url(../icons/pet.png); /* Jocelyn_Flores. N.d. “Pets icons set. editable line icons, outline, animal and domestic companion symbols.” Icons. Adobe Stock. File number #1776571252. Accessed 15 November, 2025. https://stock.adobe.com/au/images/pets-icons-set-editable-line-icons-outline-animal-and-domestic-companion-symbols/1776571252 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.project-icon2:hover{
 background-image: url(../icons/pet-c.png); /* Jocelyn_Flores. N.d. “Pets icons set. editable line icons, outline, animal and domestic companion symbols.” Icons. Adobe Stock. File number #1776571252. Accessed 15 November, 2025. https://stock.adobe.com/au/images/pets-icons-set-editable-line-icons-outline-animal-and-domestic-companion-symbols/1776571252 */
 transform: scale(1.1);
}

.project-icon3{
  width: 80px;
  height: 80px;
  background-image: url(../icons/family.png); /* Dear Lala. N.d. “Community icon set. Containing friendship, relationship, social, diversity, people, family, love, networking, trust, neighborhood, belonging and more. Editable line icons. Vector illustration.” Icons. Adobe Stock. File number #1538276682. Accessed 15 November, 2025. https://stock.adobe.com/au/images/community-icon-set-containing-friendship-relationship-social-diversity-people-family-love-networking-trust-neighborhood-belonging-and-more-editable-line-icons-vector-illustration/1538276682 */
  background-position: center;
  background-size: contain;
  transition: ease-in-out 1s;
  animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.project-icon3:hover{
 background-image: url(../icons/family-c.png); /* Dear Lala. N.d. “Community icon set. Containing friendship, relationship, social, diversity, people, family, love, networking, trust, neighborhood, belonging and more. Editable line icons. Vector illustration.” Icons. Adobe Stock. File number #1538276682. Accessed 15 November, 2025. https://stock.adobe.com/au/images/community-icon-set-containing-friendship-relationship-social-diversity-people-family-love-networking-trust-neighborhood-belonging-and-more-editable-line-icons-vector-illustration/1538276682 */
 transform: scale(1.1);
}

.service-icon1{
width: 80px;
height: 80px;
background-image: url(../icons/branding.png); /* Gopal. N.d. “Perfume bottle icons. Outline or line icon design bundle.” Icons. Adobe Stock. File number #1611696181. Accessed 15 November, 2025. https://stock.adobe.com/au/images/perfume-bottle-icons-outline-or-line-icon-design-bundle/1611696181 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon1:hover{
 background-image: url(../icons/branding-c.png); /* Gopal. N.d. “Perfume bottle icons. Outline or line icon design bundle.” Icons. Adobe Stock. File number #1611696181. Accessed 15 November, 2025. https://stock.adobe.com/au/images/perfume-bottle-icons-outline-or-line-icon-design-bundle/1611696181 */
 transform: scale(1.1);
}

.service-icon2{
width: 80px;
height: 80px;
background-image: url(../icons/camera.png); /* Creatives. N.d. Camera icon Graphic vector set for ui design.” Icons. Adobe Stock. File number #1522987625. Accessed 15 November, 2025. https://stock.adobe.com/au/images/camera-icon-graphic-vector-set-for-ui-design/1522987625 */
background-position: center;
background-size: contain;
transition: ease-in-out 1s;
animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon2:hover{
 background-image: url(../icons/camera-c.png); /* Creatives. N.d. Camera icon Graphic vector set for ui design.” Icons. Adobe Stock. File number #1522987625. Accessed 15 November, 2025. https://stock.adobe.com/au/images/camera-icon-graphic-vector-set-for-ui-design/1522987625 */
 transform: scale(1.1);
}

.service-icon3{
  width: 80px;
  height: 80px;
  background-image: url(../icons/fashion.png); /* Sugarstock. N.d. “Shoe line icon set. High heels sandal, affordable classy fabulous shoes, office footwear, slipper shoes vector illustrations. Simple outline signs for fashion icon.” Icons. Adobe Stock. File number #727842701. Accessed 15 November, 2025. https://stock.adobe.com/au/images/shoe-line-icon-set-high-heels-sandal-affordable-classy-fabulous-shoes-office-footwear-slipper-shoes-vector-illustrations-simple-outline-signs-for-fashion-icon/727842701 */
  background-position: center;
  background-size: contain;
  transition: ease-in-out 1s;
  animation: bounce 1.6s  alternate infinite cubic-bezier(0.19, 1, 0.22, 1);
}

.service-icon3:hover{
 background-image: url(../icons/fashion-c.png); /* Sugarstock. N.d. “Shoe line icon set. High heels sandal, affordable classy fabulous shoes, office footwear, slipper shoes vector illustrations. Simple outline signs for fashion icon.” Icons. Adobe Stock. File number #727842701. Accessed 15 November, 2025. https://stock.adobe.com/au/images/shoe-line-icon-set-high-heels-sandal-affordable-classy-fabulous-shoes-office-footwear-slipper-shoes-vector-illustrations-simple-outline-signs-for-fashion-icon/727842701 */
 transform: scale(1.1);
}

/* END >>> ICON SIZE ADJUSTMENT ANIMATION */


.service-section h2, .project-section h2{
  padding-bottom: .5em;
  font-size: 2em;
}

.find-out-tag{
  margin-bottom: .5em;
}

#footer{
  flex-direction: column;
  height: 100%;
}

.foot-wrapper-left{
  width: 100%;
}

.foot-wrapper-right{
  width: 100%;
}   
}


/* ===== MOBILE: Media queries for small mobile resolution. ===== */


@media only screen and (max-width: 600px) {

  .hero{
    background-position: top 70% right 50%;
  } /* i had to reposition my hero image slightly as viewport reduced as there was a growing gap between her head ans top of image */

  .menu{
    position: fixed;
    z-index: 31;
    top: 0;
    width: 100vw;
    text-align: center;
    background-color: #ffffff;
    opacity: .9;
    font-size: 30px;
  }

  .mobilemenu{
    background-color: #ffffff;
    text-align: center;
    width: 100vw;
    display: block;
    z-index: 30;
    position: relative;
  }

  .desktopmenu, #burger{
    display: none;
  }

  .desktopmenu{
    position: relative;
    width: 100%;
  }

  ul li{
    padding-block: 15px;
    width: 100vw;
  }

  nav input:checked ~ ul{
    display: block;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
  }
    /* FIND THE NAV TAG AND LOOK FOR THE INPUT
    IS THE INPUT TAG INSIDE THE NAV CURRENTLY CHECKED?*/

  .container-l, .container-r{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 20px;
    margin: 0;
  } /* these elements reduce to a column at this viewport width as they have a text-heavy element - as opposed to the services and projects sections which are more bullet-point info */

  .container-projects, .container-services{
    padding: 20px;
    flex-direction: column;
  }

  .portfolio-container{
    padding: 10px;
  } /* there's already a 10px padding on my portfolio images - so I've just added an extra 10px */

  .overlay1-text{
    top: 50%;
    left: 50%;
  } /* repositioned overlay text so they aren't spilling out of image containers*/

  .image-r-container, .image-l-container, .image3-container, .contact-section{
    width: 100%;
    height: 100%;
  }
  
  #services, #about2{
    flex-direction: column-reverse;
  }
  .service-section{
    align-content: flex-start;
  }

  .content-l, .content-r{
    width: 100%;
    padding: 2em
  }

  h1{
    font-size: calc(30px + 0.78125vw);
    padding-bottom: 1em;
  }

  .project-section h2, .service-section h2{
  font-size: calc(25px + 0.78125vw);
  padding: 0;
 }

  h2{
  font-size: calc(24px + 0.78125vw);
  padding-bottom: 1em;
 }

  .project-details, .service-details{
    max-width: 100%;
    margin-block: .2em;
  }
  
  .service-icon1, .service-icon2, .service-icon3, .project-icon1, .project-icon2, .project-icon3, .project-gallery, .service-gallery{
    display: none;
  }

  .project-gallery-scroll, .service-gallery-scroll {
    display: flex !important;
  }


  /* NEW PROJECTS/SERVICES SCROLL GALLERY  */


  .service-gallery-scroll, .project-gallery-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  /* white-space: nowrap; */
  width: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  background-color: #fff;
  border: #000000 gray 3px;
}

.project-mobile-scroll-1, .project-mobile-scroll-2, .project-mobile-scroll-3, .service-mobile-scroll-1, .service-mobile-scroll-2, .service-mobile-scroll-3{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 900px;
  margin: 5px;
}

.textblock{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.gallery-img{
height: 500px;
}

img{
  max-width: fit-content;
}

.project3, .project2, .project1, .service1, .service2, .service3{
  display: none;
}

  /* END >>> NEW PROJECTS SCROLL GALLERY  */


  #footer{
    flex-direction: column;
    height: 100%;
  }

  .foot-wrapper-left{
    width: 100%;
  }

  .foot-wrapper-right{
    width: 100%;
    justify-content: center;
  }
}


@media only screen and (max-width: 480px) {

  html{
    scroll-padding-top: 20px;
  }

 .hero{
  background-position: top 70% right 50%;
  }

  nav input:checked ~ ul {
    display: block;
    background-color: #ffffff;
    opacity: .9;
    color: #000000;
    width: 50%;
  }
    /* FIND THE NAV TAG AND LOOK FOR THE INPUT
    IS THE INPUT TAG INSIDE THE NAV CURRENTLY CHECKED?*/
  /* .project-h2-mob{
    padding-top: 0;
  } */


  .logo-container{
    opacity: .8;
    max-inline-size: 74%;
    top: 20%;
    transition: ease 1s;
  }

  .logo-container:hover {
    opacity: .9;
    border-radius: 5px;
    max-inline-size: 76%;
  }

  .container-l, .container-r, .container-projects, .container-services{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 20px;
    margin: 0;
  }

  #about{
    margin-top: 80px;
  }
  
  .content-l, .content-r{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
  }

  .image-r-container, .image-l-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-self: center;
  }

  #portfolio{
    margin-block: 50px;
  }

  .galleryimage{
    padding: 20px;
  }

  .portfolioimage-container{
  max-inline-size: 100%;
  }

  .portfolioimage-container-d{
    display: block;
    max-inline-size: 100%;
  } 

  .service-section, .project-section{
    align-content: flex-start;
    padding-bottom: 1.5em;
  }

  .service-gallery-scroll, .project-gallery-scroll{
    max-width: 100%;
    margin: 10px;
  }

  .gallery-img{
  height: 400px;
  }

  #footer{
  flex-direction: column;
  height: 100%;
  }

.foot-wrapper-left{
  width: 100%;
}
.foot-wrapper-right{
  width: 100%;
}
}


/* ----------END >>> MEDIA QUERIES---------- */




/* ----------REFERENCES
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
https://www.w3schools.com/howto/howto_css_contact_form.asp 


Breakpoints:
<480
481 - 768
769 - 1279
> \1280
https://www.browserstack.com/guide/responsive-design-breakpoints


Figures – Website (Images)

Culture Cure | Tips for Toxic Workplace and Career Success. N.d. “WordPress › Error.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824853037/

Curtin University. 2025. “Ivy Mae Photography logo.” Blackboard LMS. Accessed November 15, 2025. Accessed with MacBook Air Version 26.1. https://lms.curtin.edu.au/ultra/courses/_154283_1/cl/outline

Cuteheads. 2020. “8 secrets to perfect family photos.” Photograph. Reproduced from: Pinterest.  https://au.pinterest.com/pin/609252655824853002/

Dieline. N.d. “These Natural Beauty Products Make Minimalism Look Good – DIELINE.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824853034/

Gemologue by Liza Urla. 2020. “The making of Silvia Furmanovich jewellery campaign botanica – gemologue.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852729/

Kaufmann’s Puppy Training. 2020. “21 Times Rhodesian Ridgebacks Proved They're The Most Photogenic Breed Ever.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852946/

Kettie. N.d. “latestlifestylejewelry.com.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852768/

LINE 28: Jenny Wu Photography. 2020. “Lara- A Summer Beauty Editorial — Jenny Wu Photography.” Photograph. Reproduced from: Pinterest.  https://au.pinterest.com/pin/609252655824852745/

Looks Like Film. 2020. “Portrait Images - The 63 Most Stunning Portraits From 2019!” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852894/

Luismolinero. N.d. “Young woman over isolated background with a professional camera.” Photograph. Adobe Stock. File number #307164620. Accessed 15 November, 2025. https://stock.adobe.com/au/images/young-woman-over-isolated-background-with-a-professional-camera/307164620

Mix RX. n.d. “Flush | Mix Rx facial cleanser.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824853045/

Old Navy. 2020. “Softer side of sanity.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852994/

Pinterest. 2020. “Account suspended.” Photograph. Reproduced from: Pinterest.  https://au.pinterest.com/pin/609252655824852772/

Princess Polly. 2020. “Ribbed Ruffle Socks White.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852908/

The Refined Woman. 2020. “The Refined Woman.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824853052/

Unique Rebels Union. 2020. “Organic, minimal wedding inspiration for the modern bride.” Photograph. Reproduced from: Pinterest. https://au.pinterest.com/pin/609252655824852743/


Figures – Website (Icons)

Anika, Habiba. N.d. “Customer service web icon set in line style. editable stroke , Support, help, online, feedback, assistance, collection. stock Vector.” Icons. Adobe Stock. File number #1519417068. Accessed 19 November, 2025. https://stock.adobe.com/au/images/customer-service-web-icon-set-in-line-style-editable-stroke-support-help-online-feedback-assistance-collection-stock-vector/1519417068

Creatives. N.d. Camera icon Graphic vector set for ui design.” Icons. Adobe Stock. File number #1522987625. Accessed 15 November, 2025. https://stock.adobe.com/au/images/camera-icon-graphic-vector-set-for-ui-design/1522987625

Dear Lala. N.d. “Community icon set. Containing friendship, relationship, social, diversity, people, family, love, networking, trust, neighborhood, belonging and more. Editable line icons. Vector illustration.” Icons. Adobe Stock. File number #1538276682. Accessed 15 November, 2025. https://stock.adobe.com/au/images/community-icon-set-containing-friendship-relationship-social-diversity-people-family-love-networking-trust-neighborhood-belonging-and-more-editable-line-icons-vector-illustration/1538276682

Gopal. N.d. “Perfume bottle icons. Outline or line icon design bundle.” Icons. Adobe Stock. File number #1611696181. Accessed 15 November, 2025. https://stock.adobe.com/au/images/perfume-bottle-icons-outline-or-line-icon-design-bundle/1611696181

Jocelyn_Flores. N.d. “Pets icons set. editable line icons, outline, animal and domestic companion symbols.” Icons. Adobe Stock. File number #1776571252. Accessed 15 November, 2025. https://stock.adobe.com/au/images/pets-icons-set-editable-line-icons-outline-animal-and-domestic-companion-symbols/1776571252

Kaium007. N.d. “Popular social media icons 2025 black & white . Facebook, Instagram, X, Threads, YouTube, LinkedIn, Pinterest, WhatsApp, Telegram & TikTok.” Icon Set. Adobe Stock. File number #1319395397. Accessed 15 November, 2025. https://stock.adobe.com/au/images/popular-social-media-icons-2025-black-white-facebook-instagram-x-threads-youtube-linkedin-pinterest-whatsapp-telegram-tiktok/1319395397

Sugarstock. N.d. “Shoe line icon set. High heels sandal, affordable classy fabulous shoes, office footwear, slipper shoes vector illustrations. Simple outline signs for fashion icon.” Icons. Adobe Stock. File number #727842701. Accessed 15 November, 2025. https://stock.adobe.com/au/images/shoe-line-icon-set-high-heels-sandal-affordable-classy-fabulous-shoes-office-footwear-slipper-shoes-vector-illustrations-simple-outline-signs-for-fashion-icon/727842701

Syoko. N.d. “線の編集ができるアバターのアイコンセット（アウトライン化していない）” Icons. Adobe Stock. File number #835665804. Accessed 15 November, 2025. https://stock.adobe.com/au/images/%E7%B7%9A%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%83%E3%83%88%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%EF%BC%89/835665804




*/