/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
:root {
  --rotation: +5deg;
  --timeScale: 1;
  --timeDelay: 0s;
}

/* 1. Define the custom font */
@font-face {
  font-family: 'Patrick Hand'; /* Give it a name you will use later */
  src: url('fonts/Patrick Hand.ttf') format('truetype'); /* Recommended for performance */
  font-weight: normal;
  font-style: normal;
}
   
body {
  background-color: lightblue;
}

p {
  text-align: center;
}

.polaroid {
    width: 350px; /* Width of polaroid casing */
    height: 420px; /* Height of polaroid casing */
    position: relative;
    transform: translate(70%, 25%) rotate(var(--rotation)); /* shift to the right by 200% of its own width. Rotate for funzies. */
    }
    
.polaroid::before {
    content: "";
    width: 350px; /* Width of polaroid casing */
    height: 420px; /* Height of polaroid casing */
    position: absolute;
    background-image: url("Cropped Polaroid.png");
    background-size: cover; /* Fills the container without stretching */
    background-position: center; /* Centers the background */
    z-index: 1;
}
    
.polaroid img {
  z-index: 2;
  height: 320px; /* Square image with proper size ratio to the casing */
  width: 315px;
  position: absolute; /* its only dependendent on the casing, not the rest of the document flow */
  top: 18px; /* my attempt to center the image properly in an absolute way */
  left: 18px;
  filter: sepia(0.3) saturate(1.2) contrast(1.1) brightness(1.1) blur(0.5px);
}

.polaroid::after {
  content: "";
  height: 420px; /* Same dimensions as the casing */
  width: 350px;
  position: absolute;
  background: linear-gradient(to right, black, black);
  filter: blur(10px);
  z-index: 0;
}

.polaroid .caption {
  font-family: 'Patrick Hand', sans-serif; /* Always include a fallback. This one is sans serif. */
  font-size: 20px;
  z-index: 2;
  position: absolute;  /* its only dependendent on the casing, not the rest of the document flow */
  bottom: 35px; /* Put writing in the grabby part of the polaroid */
  left: 50%; /* Text starts halfway to the right accross the polaroid, its actual center is farther right and depends on the length of the text */
  top: 80%; /* Same but for downwards */
  transform: translate(-50%); /* Moves element left again and vertically too by half of its own size, which centers the text within the polaroid. */
}