:root {
  --background-color: rgb(138, 43, 226);
  --pure-white: rgb(255, 255, 255);
  --pure-black: rgb(0, 0, 0);
  --background-transparent-color: rgba(153, 0, 255, 0.253);
  --background-gray: rgba(105, 105, 105, 0.753);
  --triggered-btn: rgb(255, 0, 0);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  display: grid;
  background-color: var(--pure-black);
  color: var(--pure-white);
  font-family: "Courier New", Courier, monospace;
}
/* header */
header {
  padding: 0px 20px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  color: var(--pure-white);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
h1 {
  font-size: 3rem;
  background-color: var(--pure-white);
  padding: 10px 0px;
  padding-left: 10px;
  color: var(--pure-black);
  animation: headershadow 5s infinite;
}
@keyframes headershadow {
  0% {
    border: solid 2px var(--background-color);
  }
  50% {
    border: solid 2px var(--pure-white);
  }
  100% {
    border: solid 2px var(--background-color);
  }
}

h1 span {
  background-color: var(--background-color);
  color: var(--pure-white);
  padding: 10px;
}
h2 {
  font-size: 2.5rem;
  animation: subheadshadow 3s infinite;
}

@keyframes subheadshadow {
  0% {
    text-shadow: 2px 5px 10px var(--background-color);
  }
  50% {
    text-shadow: 2px 5px 10px var(--triggered-btn);
  }
  100% {
    text-shadow: 2px 5px 10px var(--background-color);
  }
}
header p {
  margin-left: 10px;
}
header p::before {
  content: " 🟪";
}
header p::after {
  content: " 🟪";
}

/* navigagtion */
#main-nav {
  position: sticky;
  top: 0;
  left: 0;
  animation: headershadow 5s infinite;
  z-index: 2;
}
#main-nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: var(--background-transparent-color);
  backdrop-filter: blur(10px);
  margin: 0px;
  padding: 30px;
  font-size: 1.3rem;
  list-style-type: none;
}

#main-nav ul a {
  text-decoration: none;
  color: var(--pure-white);
  padding: 20px;
  transition: 0.3s ease-in-out;
}

#main-nav ul li:hover {
  animation: hover-animation 3s infinite;
}
@keyframes hover-animation {
  0% {
    border-bottom: var(--background-color) solid 0.5px;
  }
  50% {
    border-bottom: var(--triggered-btn) solid 0.5px;
  }
  100% {
    border-bottom: var(--background-color) solid 0.5px;
  }
}

/*   scroll margin */
#featured,
#submit-review,
#movie-news {
  scroll-margin-top: 100px;
}
/* featured */
#featured h2 {
  margin-bottom: 0px;
}
#featured {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#featured article {
  display: flex;
  flex-direction: row;
  margin: 50px;
  padding: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: headershadow 5s infinite;
  position: relative;
  z-index: 1;
}

#featured .featured-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
}
.featured-article:nth-child(2) {
  background-image: url(Assets/Interstellar.gif);
}
.featured-article:nth-child(3) {
  background-image: url(Assets/inception.gif);
}
.featured-article:nth-child(4) {
  background-image: url(Assets/bladerunner.gif);
}

#featured img {
  max-width: 500px;
  transition: 0.3s ease-in-out;
}
#featured img:hover {
  transform: scale(1.01);
  animation: img-hover 5s infinite;
}
@keyframes img-hover {
  0% {
    box-shadow: 20px 10px 10px var(--background-transparent-color);
  }
  50% {
    box-shadow: 20px 10px 10px var(--pure-black);
  }
  100% {
    box-shadow: 20px 10px 10px var(--background-transparent-color);
  }
}
.info {
  text-align: center;
  align-content: center/top;
  background-color: var(--background-transparent-color);
  padding: 20px;
}

#featured h3 {
  font-size: 2rem;
}

.info a {
  text-decoration: none;
  background-color: var(--background-color);
  color: var(--pure-white);
  padding: 10px;
  transition: 0.3s ease-in-out;
}

.info a:hover {
  background-color: var(--triggered-btn);
}

/* submit */
#submit-review h2 {
  text-align: center;
  margin: 0px;
  margin-bottom: 30px;
}
#submit-review {
  display: flex;
  flex-direction: column;
}
#submit-div {
  border: solid 0.5px;
  padding: 30px;
  align-items: center;
  gap: 20px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#submit-div input,
#submit-div textarea {
  background-color: var(--background-transparent-color);
  border: none;
  color: var(--pure-white);
}
#submit-review button {
  background-color: var(--background-color);
  color: var(--pure-white);
  height: 30px;
  transition: 0.3s ease-in-out;
}

#submit-review button:hover {
  background-color: var(--triggered-btn);
}

/* news */

#movie-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
}
#movie-div {
  display: flex;
}
#movie-div img {
  max-width: 500px;
}
#movie-div article {
  border: var(--pure-white) 0.5px solid;
  padding: 50px;
}
.post-meta {
  color: var(--background-gray);
}
#movie-div a {
  text-decoration: none;
  background-color: var(--background-color);
  color: var(--pure-white);
  padding: 10px;
  transition: 0.3s ease-in-out;
}
#movie-div a:hover {
  background-color: var(--triggered-btn);
}

/* footer */

footer {
  display: flex;
  flex-direction: column;
  text-align: center;
}

footer ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
footer a {
  text-decoration: none;
  color: var(--pure-white);
  margin: 20px;
  width: 50px;
}

footer a:hover {
  border-bottom: solid var(--background-color) 0.5px;
}

@media screen and (max-width: 1000px) {
  header p {
    display: none;
  }
  #main-nav a {
    font-size: 1.5rem;
  }
  #featured article {
    flex-direction: column;
    font-size: 2rem;
  }
  #movie-div {
    flex-direction: column;
  }
  .info a {
    display: flex;
    justify-self: center;
    margin: 10px;
  }
}