html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background-image: url('images/sea.png');
  background-size: auto 100%;
  background-position: center center;
  background-attachment: fixed;
  height:100vh;
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 5vw;
grid-row-gap: 5vh;
margin-top:3vh;
margin-right:2vw;
margin-left:2vw;
height:80vh;
}

.photo1 { grid-area: 1 / 1 / 3 / 3; }
.about-me { grid-area: 2 / 2 / 6 / 5; }
.photo2 { grid-area: 5 / 4 / 7 / 6; }
.menu { grid-area: 2 / 5 / 5 / 6; }
.coding { grid-area: 5 / 1 / 6 / 3; }

.polaroid-outline {
	background-color:white;
	aspect-ratio: 5 /6;
	width:20vw;
	box-shadow: 10px 10px 8px 7px #888888;
}
.polaroid-outline img {
	aspect-ratio: 1/1;
	width:17vw;
	margin:1.5vw;
	
}

.coding {
 width:19vw;
 aspect-ratio: 2 /1;
 background-color:  rgba(255, 255, 255, 0.8);
 font-family: 'Courier New', monospace;
 font-weight: 500;
 font-size:2vw;
 border-radius: 8px;
 padding:1vw;
}

.coding p {
	font-size:1vw;
	font-weight:500;
	padding-bottom: 5px;
}


.about-me h {
	font-size:2.5vw;
	font-weight:600;
	border-bottom: 3px solid black;
	padding-bottom: 5px;
}
.about-me {
	background-color:  rgba(255, 255, 255, 0.8);
	height:60vh;
	width: 40vw;
	padding:3vw;
	font-family: 'Courier New', monospace;
	font-weight: 500;
	font-size:2vw;
	border-radius: 8px;
	
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAjUlEQVQ4T92UWQ7AIAhE9f6HbquJhFKZoS5pUj9xeLJJThtODjCPjgb6MWgB9jSevb6PoNDx8nXvP4XqurZAwpHaprBMdA9Fq51YDdmgiD9NhZHMfQV70GjUVvcT6MtSivyWfrFG6+g9+Oh+Ey6fUxuBjnzqR2kwK0f4m26HouYN71OveWwPwyU9OqvpBK+TLBZQBIfHAAAAAElFTkSuQmCC') 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid; 
}

.menu {
	background-color:  rgba(255, 255, 255, 0.8);
	font-family: 'Courier New', monospace;
	font-weight: 500;
	font-size:2vw;
	border-radius: 8px;
	padding:1.5vw;
}

.menu h {
	font-size:2vw;
	border-bottom: 3px solid black;
	padding-bottom: 5px;
}

.menu ul{	
	list-style: none;
	padding:0.5vh;
}

li {
	padding:1vh;
	color:black;
	transition: all .3s;
}

li:hover{
	transform: scale(1.09);
}

a {
	text-decoration: none;
}
.one {
	transform: rotate(5deg);
}

.two {
	transform: rotate(-3deg);
}