/*
Name: Geovani Castro
Date: 04.02.2018
Section: AD

This is index.css file for my film review website. I used  advanced techniques from the 
W3Schools website that allowed me to display text boxes over my images as well as to use 
gradients. Two different fonts were used as well. Added flexbox as well as individual ids.
*/

@import url('https://fonts.googleapis.com/css?family=Oswald|Rasa');

body {
	background-color: black;
	font-family: 'Rasa', serif;
}

h1 {
  color: white;
  text-align: center;
  font-family: 'Oswald', sans-serif;
}

section {
  display: flex;
  justify-content: center;
  font-style: italic;
  font-size: 20px;
}

footer {
  color: grey;
  text-align: center;
}

a:link {
  color: white; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #cc0000;
  background-color: transparent;
  text-decoration: underline;
}

#blade {
  color: #b1d0f7;
}

#stellar {
  color: #f7b2d8;
}

#coco {
  color: #cdb1f7;
}

#yourname {
  color: #a7e8c6;
}

#mononoke {
  color: #fcffaf;
}

.container {
  position: relative;
}

.poster {
  opacity: 3;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 1;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: black;
  color: white;
  font-size: 16px;
  padding: 1px 10px; 
  border-radius: 12px;
}

.fancy {
  display: flex;
  justify-content: center;
  color: white;
  width: 100%;
  background-color: #E4E4D9;
  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
}