@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');


/* ---------- SITE-WIDE ---------- */


body {
	margin: 0px;
	background-image: url("cork.png");
	background-repeat: repeat;
	background-size: 900px;
}

footer {
	background-image: url("footer.png");
	width: 100%;
	height: 250px;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 80px;
	margin-top: 70px;
}

.footer-image {
	width: 200px;
}

footer p, a {
	font-family: "Inter", sans-serif;
	color: white;
}


/* ---------- HOME ---------- */

/* HERO */

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 74px;
	/* border: 2px solid blue; */
	flex-wrap: wrap;
}

.logo {
	width: clamp(110px, 14vw, 200px);
	transition: 0.2s;
}

.logo:hover {
	transform: scale(1.1)
}

.nav-stickers {
	display: flex;
	gap: 15px;
}

.sticker img {
	width: clamp(100px, 14vw, 200px);
	transition: 0.2s;
}

.sticker:hover img {
	transform: rotate(-5deg) scale(1.1) translateY(-1px);
}

.hero {
	position: relative;
	width: 90%;
	max-width: 1450px;
	margin: 0 auto;
	/* border: 2px solid red; */
}

.postcard {
	width: 100%;
}

.selfie {
	position: absolute;
	width: 25%;
	left: -4%;
	top: 12%;
	transition: 0.2s;
	transform-origin: top center;
}

.selfie:hover {
	transform: rotate(-2deg);
}

.keychain {
	position: absolute;
	width: 28%;
	right: -5%;
	top: 1%;
	transform-origin: top center;
}

.keychain:hover {
	animation: swing 1s ease-in-out;
}

@keyframes swing {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(2deg); }
    50%  { transform: rotate(-1deg); }
    75%  { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

.pin {
	position: absolute;
	width: 7%;
}

.pin-left {
	top: 15%;
	left: 5%;
}

.pin-right {
	top: 8%;
	right: 6%;
}

/* ABOUT ME */

.aboutme {
	position: relative;
	width: 80%;
	max-width: 1450px;
	margin: 120px auto 0 auto; 
	/* border: 2px solid red; */
	transform: translateX(-14px);
}

.aboutme-bg {
	width: 100%;
}

.aboutme-text {
	font-family: "Inter", sans-serif;
	position: absolute;
	top: 15%;
	right: 7%;
	width: 34%;
	text-align: center;
}

.aboutme-text h1 {
	font-size: 3.5vw;
	margin-bottom: 0px;
}

.aboutme-text p {
	font-size: 1.6vw;
}

.flower1 {
	position: absolute;
	top: 29%;
	left: 14%;
	width: 4%;
	transition: 0.2s;
}

.flower2 {
	position: absolute;
	top: 38%;
	left: 12%;
	width: 5%;
	transition: 0.2s;
}

.flower3 {
	position: absolute;
	top: 34%;
	left: 19%;
	width: 5%;
	transition: 0.2s;
}

.flower4 {
	position: absolute ;
	top: 32%;
	left: 44%;
	width: 5%;
	transition: 0.2s;
}

.flower5 {
	position: absolute ;
	top: 45%;
	left: 47%;
	width: 5%;
	transition: 0.2s;
}

.flower1:hover {
	transform: rotate(-10deg);
}

.flower2:hover {
	transform: rotate(10deg);
}

.flower3:hover {
	transform: rotate(-10deg);
}

.flower4:hover {
	transform: rotate(10deg);
}

.flower5:hover {
	transform: rotate(-10deg);
}

/* NAV */

.nav-stickers2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin: 50px auto;
	/* border: 2px solid blue; */
}

.sticker2 img {
	width: clamp(100px, 20vw, 300px);
	transition: 0.2s;
}

.sticker2:hover img {
	transform: rotate(-5deg) scale(1.08) translateY(-1px);
}


/* ---------- CULTURE SHOCKS ---------- */

.cs-img {
	width: 48%;
	display: block;
	margin: 20px auto;
}

.cs-row {
	display: flex;
	margin: 80px 60px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* ROW 1 */

.cs-pic1 {
	width: 55%;
	transition: 0.2s;
	transform-origin: top center;
}

.cs-pic1:hover {
	transform: rotate(-2deg);
}

.box-group1 {
	position: relative;
	width: 42%;
}

.cs-box1 {
	width: 100%;
}

.cs-text1 {
	position: absolute;
	top: 31%;
	left: 15%;
	width: 70%;
}

.cs-text1 p {
	font-family: "Inter", sans-serif;
	font-size: 2.1vw;
	text-align: left;
}

.pin1 {
	left: 24%;
	top: -5%;
}

/* ROW 2 */

.cs-group2 {
	position: relative;
	width: 55%;
}

.cs-pic2 {
	width: 100%;
	transition: 0.2s;
	transform-origin: top center;
}

.cs-pic2:hover {
	transform: rotate(2deg);
}

.pin2 {
	position: absolute;
	width: 13%;
	top: -4%;
	left: 43%;
}

.box-group2 {
	position: relative;
	width: 42%;
}

.cs-box2 {
	width: 100%;
}

.cs-text2 {
	position: absolute;
	top: 36%;
	left: 15%;
	width: 70%;
}

.cs-text2 p {
	font-family: "Inter", sans-serif;
	font-size: 2vw;
	text-align: left;
}

/* ROW 3 */

.cs-group3 {
	position: relative;
	width: 55%;
}

.cs-pic3 {
	width: 100%;
	transition: 0.2s;
	transform-origin: top center;
}

.cs-pic3:hover {
	transform: rotate(-2deg);
}

.pin3 {
	position: absolute;
	width: 13%;
	top: 3%;
	left: 40%;
}

.box-group3 {
	position: relative;
	width: 42%;
}

.cs-box3 {
	width: 100%;
}

.cs-text3 {
	position: absolute;
	top: 28%;
	left: 15%;
	width: 70%;
}

.cs-text3 p {
	font-family: "Inter", sans-serif;
	font-size: 2.2vw;
	text-align: left;
}

/* ROW 4 */

.cs-group4 {
	position: relative;
	width: 55%;
}

.cs-pic4 {
	width: 100%;
	transition: 0.2s;
	transform-origin: top center;
}

.cs-pic4:hover {
	transform: rotate(-2deg);
}

.pin4 {
	position: absolute;
	width: 13%;
	top: -4%;
	left: 44%;
}

.box-group4 {
	position: relative;
	width: 42%;
}

.cs-box4 {
	width: 100%;
}

.cs-text4 {
	position: absolute;
	top: 31%;
	left: 20%;
	width: 65%;
}

.cs-text4 p {
	font-family: "Inter", sans-serif;
	font-size: 2.3vw;
	text-align: left;
}


/* ---------- MY FAVS ---------- */

.favs-img {
	width: 40%;
	display: block;
	margin: 20px auto
}

.fav-row {
	display: flex;
	margin: 5px 90px;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.fav-row img {
	width: 30%;
	transition: 0.2s;
}

/* THINGS TO DO */

.things-img {
	width: 70%;
	display: block;
	margin: 80px auto 20px 80px;
}

.garden-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

.market-img:hover {
	transform: translateY(-2px) rotate(1deg) scale(1.02);
}

.mirror-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

/* FOODS */

.foods-img {
	width: 40%;
	display: block;
	margin: 80px 80px 20px auto;
}

.tea-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

.quesadilla-img:hover {
	transform: translateY(-2px) rotate(1deg) scale(1.02);
}

.froyo-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

/* METRO STOPS */

.metro-img {
	width: 70%;
	display: block;
	margin: 80px auto 20px 80px;
}

.chatswood-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

.martin-img:hover {
	transform: translateY(-2px) rotate(1deg) scale(1.02);
}

.barangaroo-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

/* SLANG */

.slang-img {
	width: 40%;
	display: block;
	margin: 80px 80px 20px auto;
}

.brekkie-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}

.schnitty-img:hover {
	transform: translateY(-2px) rotate(1deg) scale(1.02);
}

.arvo-img:hover {
	transform: translateY(-2px) rotate(-1deg) scale(1.02);
}


/* ---------- THE GALLERY ---------- */

.gallery-img {
	width: 70%;
	display: block;
	margin: 30px auto
}

.gallery-row {
	display: flex;
	margin: 70px 160px 0px 160px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	position: relative;
}

.gallery-row img {
	transition: 0.2s;
}

.gallery-row img:hover {
	transform: translateY(-2px) scale(1.02);
}

.cockatoo-img {
	width: 69%;
}

.ibis-img {
	width: 39%;
}

.mary-img {
	width: 45%;
}

.fam-img {
	width: 64%;
}

.balmoral-img {
	width: 113%;
}

.acai-img {
	width: 37%;
}

.hotdog-img {
	width: 37%;
}

.celina-img {
	width: 37%;
}

.qvb-img {
	width: 56%;xs
}

.taste-img {
	width: 56%;
}

.easter-img {
	width: 70%;
}

.concert-img {
	width: 39%;
}

.gallery-grid {
	display: grid;
	width: 87%;
	gap: 30px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	margin: 40px auto;
	grid-template-areas:
		"area1 area2 area2"
		"area1 area3 area4";
}

.capy-img {grid-area: area1}

.dinner-img {grid-area: area2}

.messina-img {grid-area: area3}

.train {grid-area: area4}

.gallery-grid img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.gallery-grid img {
	transition: 0.2s;
}

.gallery-grid img:hover {
	transform: translateY(-2px) scale(1.02);
}

.vivid-img {
	width: 39%;
}

.filo-img {
	width: 70%;
}

.postcardback-img {
	width: 113%;
}