:root{
	--mainColor: #ffae00;
	--mainColor2: rgba(12, 200, 250, 25%);
	--textColor: #333;
	--borderStyle: none;
	--bRadius: 5px;
}
@media (orientation: landscape){
	header{
		margin: 1em;
		display: flex;
		justify-content: space-between;
		padding: 0.5em;
		border-radius: 40px/20px;
		border-bottom-right-radius: 2px;
		border-bottom-left-radius: 2px;
	}
        h2>a:link{
                text-decoration: none;
                color: black;
        }
        a:visited{
                text-decoration: none;
                color: black;
        }
	main{
		margin: 1em;
		display: flex;
		justify-content: space-between;
	}
	#aboutMe{
		padding: 0.5em;
		width: 20vw;
		height: fit-content;
		border-radius: 0px 0px 00px 40px / 20px;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	#images{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		width: -webkit-fill-available;
		padding-left: 1em;
	}
	#img1{
		width: 25vw;
		height: 31.96vw;
		border-radius: 2px;
	}
	#images > #img2{
		margin-bottom: 1em;
		border-radius: 2px;
	}
}
 
@media (orientation: portrait){
	body{
		display: flex;
		flex-flow: column nowrap;
		
	}
	header{
		padding: 0.5em;
		margin-bottom: 1em;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
        h2>a:link{
                text-decoration: none;
                color: black;
        }
	h2{
		font-size: 4em;
	}
	#aboutMe{
		padding: 0.5em;
		margin-bottom: 1em;
	}
}
 
body {
	background: #333;
	font-family: arial;
}
p > #picLink{     
        color: lightslategrey;
}
header {
	background: var(--mainColor);
	color: var(--textColor);
}
 
main {
}
article{
	background: var(--mainColor);
}
 
.smLink{
	margin: 0 auto;
	display: inline-block;
	height: 4em;
	width: 4em;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
.smLink:hover{
	animation: wobble 0.5s ease;
}
@keyframes wobble{
	0%, 50%, 100%{
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	25%{
		margin-left: 0.4em;
		margin-right: 0.6em;
	}
	75%{
		margin-left: 0.6em;
		margin-right: 0.4em;
	}
}
#socialMedia > h2{
	color: var(--textColor);
	margin: 0 auto;
	padding-left: 1em;
	display: inline-block;
}
.image{
	background-color: transparent;
	background-size: auto 100%;
	background-repeat: no-repeat;
	border-radius: 0;
 
}
#img1 {
	aspect-ratio: 852 / 1080;
	height: auto;
	background-image: url("topzkeproto.webp");
	
	
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}
#img2 {
	aspect-ratio: 1920 / 855;
	height: auto;
	background-image: url("TopzkeRef.webp");
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}
#contlogo {
	height: 4em;
	width: 4em;
	background-image: url("Kina PB.webp");
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}
#titlestuff {
	display: flex;
	flex-flow: row nowrap;
	align-content: center;
}
#titlestuff > h2{
	margin: 0;
}