html {
background-color : rgba(88, 88, 88, 0.88);
font-family : Courier New;
color : #DDDDDD;
}

body {
padding : 0;
margin : 0;
display : grid;
grid-template-columns : 1fr;
}

main {
grid-column : 2/3;
grid-row : 3/4;
}

p {
/* max-width : 60ch; overflow-wrap : break-word; */
}

a {
text-decoration : none;
color : #DDDDDD;
font-weight : bold;
}
a:hover {
text-decoration : underline;
}
a:active {
text-decoration : none;
}
a:visited {
text-decoration : none;
}

.Polaroid_Image, .Photo_Image {
background-color : #DDDDDD;
box-shadow : 1px 1px 1px 1px #444444;
transform : rotate(-2deg);
grid-column : 2/3;
}

@media (min-width : 1080px) {

html {
height : 100%;
font-size : 3vw;
overflow-y : scroll;
/*font-size : 12px;*/
}

body {
height : 100%;
}

#Logo_Button {
width : 360px;
}

.Polaroid_Image {
width : 135px;
height : 180px;
padding-left : 10px;
padding-right : 10px;
padding-top : 20px;
padding-bottom : 40px;
border-radius : 3px;
}


.Photo_Image {
width : 320px;
height : 180px;
padding-left : 5px;
padding-right : 5px;
padding-top : 4px;
padding-bottom : 4px;
border-radius : 2px;
}

#About {
font-size : 1.2rem;
}

}

@media (max-width : 1080px) {

html {
height : 100vh;
font-size : 10vw;
}

body {
height : 100vh;
}

#Logo_Button {
width : 540px;
}

.Polaroid_Image {
width : 270px;
height : 360px;
padding-left : 20px;
padding-right : 20px;
padding-top : 40px;
padding-bottom : 80px;
border-radius : 6px;
}

.Photo_Image {
width : 480px;
height : 270px;
padding-left : 10px;
padding-right : 10px;
padding-top : 8px;
padding-bottom : 8px;
border-radius : 4px;
}

#About {
font-size : 8vw;
}

}