@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800');

:root {
  --pink: #e69476;
  --coral: #e67876;
  --color-coral-alpha: rgba(230, 120, 118, 0.7);
  --dark-mode: #130f30;
  --dark-coral: #cc6540;
  --moon: #ffffff;
  --moon-hover: #d9cfc9;
}

body {
  font-family: 'Montserrat', sans serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #ffffff;
  background-color: var(--pink);
  transition: all 500ms;
}

.dark-mode {
  background-color: var(--dark-mode);
  transition: all 500ms;
}

.moonButton {
  border: none;
  position:absolute;
  top:0;  /* Place button at top   */
  right:0; /* Place button at right */
  margin: 10px 10px; /* Change spacing */
  width: 20px; /* Size of circle for moon shape */
  height: 20px;
  border-radius: 50%; /* Creates a circle - pad on all sides  */
  box-shadow: inset -6px -3px 0 0 var(--moon);
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  background-color: transparent; 
  transition: all 200ms;
}

.moonButton:hover {
  box-shadow: inset -6px -3px 0 0 var(--moon-hover);
  transition: all 200ms; 
}

#polaroidContainer {
  background: url(/Images/BG-Images/polaroidBG.png) no-repeat;
/*   margin-left: auto;
  margin-right: auto; */
  width: 408px;
  height: 504px;
/*   box-shadow: 3px 3px 8px grey;  add shadow may be too much*/ 
  margin: -252px 0 0 -204px;
  position: absolute;
  top: 50%;
  left: 50%;
/*   padding: 30px 0px 0px 29px;  removed padding and placed in polaridPhoto */
}


#polaroidPhoto {
  background-size: cover;
  width: 350px;
  height: 371px;
  display: flex;
  justify-content: center;
  border-radius: 0.5px;
  padding: 30px 0px 0px 29px; /*  padding makes more sense here  */
}

img{
  width: 350px;
  height: 371px;
  object-fit: cover;
  filter: sepia(.5)saturate(1.2);
}


.polaroidButton {
  font-family: 'Montserrat', sans serif;
  position: relative;
  background-color: rgba(0,0,0,0);
  border-radius: 0.5px;
  margin: 10% 0 0 25%;
  width: 50%;
}




/* #polaroidContainer:hover {
  -webkit-transform: scale(.8);
  -moz-transform:scale(.8) rotate(2deg);
  position: absolute;
  z-index: 10;
  transition: all 150ms; 
} */