:root {
  --bright-snow: #F8F9FA;
  --platinum: #E9ECEF;
  --alabaster-grey: #DEE2E6;
  --pale-slate-light: #CED4DA;
  --pale-slate-dark: #ADB5BD;
  --slate-grey: #6C757D;
  --iron-grey: #495057;
  --gunmetal: #343A40;
  --carbon-black: #212529;
}

body {
  background-color: var(--bright-snow);
  color: var(--carbon-black);
}

header {
  background-color: var(--gunmetal);
  color: var(--bright-snow);
}

footer {
  background-color: var(--carbon-black);
  color: var(--platinum);
}

section {
    font-family: Arial, Helvetica, sans-serif;
}

hr {
  margin-top: 20px;
}


.major-mono-display-regular {
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
}

#banner {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#img-logo {
    margin: 2%;
    margin: 2%;
    aspect-ratio: 1/1;
    width: 10%;
    max-width: 50px;
    border-radius: 50%;
}

#page-title {
    display: inline;
    font-family: "Major Mono Display", monospace;
}

.navbar {
    font-family:'Courier New', Courier, monospace;
    position: sticky;
    top: 0;
    background: var(--carbon-black);
    padding: 10px;
  }

  .navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
  }

  .navbar a {
    text-decoration: none;
    color: white;
  }

  footer {
    font-family:'Courier New', Courier, monospace;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
  }

  footer a {
    text-decoration: none;
    margin: 0 5px;
    color: white;
  }

  footer a:hover {
    text-decoration: underline;
  }

  section {
    color: var(--bright-snow);
    font-family: "Major Mono Display";
    text-transform: lowercase;

    text-align: center;
    padding: 20px;
    margin-top: 10px;
  }

  .btn {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    background-color: var(--carbon-black);
  }

  #home {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
        url("images/flipthrough.gif");
    background-size: cover;
  }

  #home h1 {
    font-size: clamp(3rem, 6vw, 5rem);
  }

  #home p {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
  }

  #home a {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
}

  #projects {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  #projects h1 {
    color: var(--carbon-black);
  }

  .movie-card {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-bottom: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--carbon-black);

    position: relative;

    height: 40vh;
    border-radius: 8px;
    overflow: hidden;
    color: var(--bright-snow);

    text-shadow: var(--carbon-black)w0px 0px px;
    box-shadow: var(--bright-snow) 0px 0px px;
    
  }

  .movie-card a:hover {
    text-decoration: underline;
    color: white;
  }

#contact {
    color: var(--carbon-black);
}

#contact p {
  text-decoration: none;
  background-color: var(--carbon-black);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--alabaster-grey);
}

#contact a {
  text-decoration: none;
  color: var(--carbon-black);
  text-shadow: var(--carbon-black) 0px 0px 1px;
}

#contact a:hover{
  text-decoration: underline;
}

#container-comingsoon .movie-card:nth-child(1) {
  background-image: url('images/moviebanners/arc_raiders.webp');
}
#container-comingsoon .movie-card:nth-child(2) {
  background-image: url('images/moviebanners/excapebanner.jpg');
}

#container-comingsoon .movie-card:nth-child(3) {
  background-image: url('images/moviebanners/thehangover.jpg');
}

#container-comingsoon .movie-card:nth-child(4) {
  background-image: url('images/moviebanners/contact.jpg');
}

#container-comingsoon .movie-card:nth-child(5) {
  background-image: url('images/moviebanners/saintoffortwashington.jpg');
}

#container-comingsoon .movie-card:nth-child(6) {
  background-image: url('images/moviebanners/se7en.jpg');
}

/* Completed Projects Container*/

#container-projects .movie-card:nth-child(1) {
  background-image: url('images/moviebanners/sleep.png');
}