@import url('https://fonts.googleapis.com/css2?family=Galada&display=swap');

@import url('https://fonts.googleapis.com/css?family=Audiowide');


* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}


body {

	background-color: #000;

}

i {
	font-size: 40px;
}


.main {

	width: 100%;

	height: 100vh;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	align-items: center;

}

.right {

	50%;

	height: 100vh;

	display: flex;

	justify-content: flex-end;

	align-items: center;

}


.left {

	50%;

	height: 100vh;

	display: flex;

	flex-direction: column;

}

.logo {

	100%;

	display: flex;

	justify-content: flex-start;

	padding: 30px 0 0 40px;


}


#myphotos {

	display: none;

}


.text {

	height: 100vh;

	justify-content: center;

	color: white;

	font-size: 70px;

	display: flex;

	flex-direction: column;

	align-items: center;

	margin-left: 200px;

}


i {

	color: white;

	font-size: 30px;

	margin: 0 7px;

}

i:hover {

	color: powderblue;

	text-shadow: 0px 0 10px #00b3ff;

}


a {

	text-decoration: none;

}


.social {
	margin: 10px
}


.name {

	font-size: 48px;

	font-weight: 400;

	font-family: 'Audiowide', cursive;

	text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

	color: white;

}

.logo:hover .name {

	color: powderblue;

	text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

}

.logo:hover .dot {

	color: white;

}

.dot {

	font-size: 48px;

	font-weight: 400;

	font-family: 'Audiowide', cursive;

	text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

	color: mediumvioletred;

}


.text span {

	font-size: 68px;

	font-weight: 600;

	letter-spacing: 0.1em;

	font-family: 'Audiowide', cursive;

}


#myphoto {

	height: 100%;

	box-shadow: inset 0 0 100px #000;

}


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

	.text {

		width: 100%;

		height: 100vh;

		justify-content: center;

		color: white;

		font-size: 20px;

		display: flex;

		flex-direction: column;

		align-items: center;

		margin-left: 150px;

	}

}


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

	.text {

		width: 100%;

		height: 100vh;

		justify-content: center;

		color: white;

		font-size: 0px;

		display: flex;

		flex-direction: column;

		align-items: center;

		margin-left: 100px;

	}


}


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

	.text span {

		font-size: 70px;

	}

	.text {

		margin-left: 0px;

	}


	.main {

		width: 100%;

		height: 100vh;

		display: flex;

		flex-direction: column;

		align-items: center;

		justify-content: center;


	}

	.response-img {

		width: 100%;

		display: flex;

		justify-content: center;

	}

	#myphotos {

		display: block;

		width: 50%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;


	}

	#myphoto {

		display: none;

	}


	.logo {

		width: 100%;

		display: flex;

		justify-content: center;

		padding: 20px 0;


	}


}

@media only screen and (width:1024px) and (height:1366px) {


	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -250px;

	}


	.name {

		font-size: 68px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 68px;

	}

	.social i {

		font-size: 37px;

		margin: 0 10px;

	}


}


@media (max-width: 768px) {
  /* stop horizontal overflow that causes scrolling */
  html, body {
    overflow-x: hidden;
  }

  /* keep photo inside viewport even if other breakpoints set 120% */
  #myphotos{
    width: min(420px, 92vw) !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* make socials always visible + no need to scroll sideways */
  .social{
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;         /* key: wraps icons instead of overflowing */
    gap: 10px;
    padding: 10px 0 16px;
    margin: 0 !important;
  }

  .social i {
    font-size: clamp(28px, 9vw, 44px) !important;
    margin: 0 10px !important;
  }

  /* optional: reduce vertical space so socials fit above fold */
  .main{
    min-height: 100svh;
    padding-bottom: 16px;
  }
}


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

	#myphotos {

		display: block;

		width: 100%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;


	}

	.text span {

		font-size: 40px;

	}

}


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

	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -150px;

	}


	.name {

		font-size: 38px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 30px;

	}


}

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


	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -100px;

	}


	.name {

		font-size: 38px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 28px;

	}


}

@media only screen and (width:375px) and (height:812px) {


	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -250px;

	}


	.name {

		font-size: 38px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 28px;

	}


}


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


	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -70px;

	}


	.name {

		font-size: 38px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 25px;

	}

}


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


	#myphotos {

		display: block;

		width: 120%;

		border-radius: 50px;

		box-shadow: inset 0 0 100px #000;

		margin-bottom: -200px;

	}

	.logo .name {

		font-size: 30px;

	}

	.name {

		font-size: 38px;

		font-weight: 400;

		font-family: 'Audiowide', cursive;

		text-shadow: 0px 1px 1px rgba(12, 11, 11, 0.56);

		color: white;

	}

	.text span {

		font-size: 20px;

	}



}