:root {
  --dark: #263238;
  --mid: rgb(83, 83, 83);
  --light: rgb(119, 118, 118);
  --lightlight: rgb(235, 235, 235);
  --fadedcoral: #ff715eb9;
  --coral: #ff725e;
  --fadedgrey: rgba(138, 138, 138, 0.664);
}

body {
  font-family: "Quicksand", sans-serif;
  /* background-color: var(--lightlight); */
}

html {
  height: 100vh;
  width: 100vw;
}

.landingImg {
  background-image: linear-gradient(var(--lightlight), var(--fadedcoral));
}

.greeting {
  padding: 25px;
  font-size: 32px;
  width: 600px;
  border-radius: 10px;
  color: var(--dark);
  text-shadow: var(--coral) 1px 0 1px;
}

.description {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  text-align: center;

  color: #888888;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}
.makeBtn {
  background: var(--coral);
  border-radius: 50px;
  color: var(--lightlight);
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  border: 0px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  transition: 0.2s all;
}

.makeBtn:hover {
  background-color: #fc7d6c;
  color: var(--lightlight);
}

.makeBtn:active {
  transform: scale(0.98);
  /* Scaling button to 0.98 to its original size */
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
  /* Lowering the shadow */
}

nav {
  background-color: var(--dark);
}

navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}

.navbar-brand {
  font-size: 30px;
  color: var(--lightlight);
}

.navbar-brand:hover {
  color: var(--lightlight);
}

.navBtn:hover {
  color: var(--lightlight);
  /* background-color: var(--coral); */
  background-color: #ff8373;
}

.navBtn:active {
  transform: scale(0.98);
  /* Scaling button to 0.98 to its original size */
  /* box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); */
  /* Lowering the shadow */
}

.navBtn {
  width: 145.52px;
  border: 2px solid var(--coral);
  border-radius: 50px;
  color: var(--lightlight);
  background-color: var(--dark);
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 115%;
  line-height: 18px;
  transition: 0.2s all;
}

.saveBtn:hover {
  color: var(--lightlight);
  /* background-color: var(--coral); */
  background-color: #ff8373;
}

.saveBtn:active {
  transform: scale(0.98);
  /* Scaling button to 0.98 to its original size */
  /* box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); */
  /* Lowering the shadow */
  background-color: #ff8373;
}

.saveBtn {
  border: 1px solid var(--fadedgrey);
  border-radius: 50px;
  color: var(--dark);
  background-color: var(--lightlight);
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 115%;
  line-height: 18px;
  transition: 0.2s all;
}

.themeBtn {
  background-color: var(--coral);
  color: var(--lightlight);
}

input#themeNameInput {
  font-size: 200%;
}

.btn-outline-secondary:hover {
  background-color: var(--dark);
}

.btn-outline-secondary {
  background-color: var(--coral);
  color: var(--dark);
}

.btn-secondary:hover {
  background-color: var(--coral);
  color: var(--dark);
}

.graphics img {
  /* height: 650px;
  width: 650px; */
}

h1 {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5rem;
  text-align: center;

  color: #455a64;
}

h2,
h3 {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;

  color: #455a64;
}

#movie-name {
  font-size: 2.5rem;
}

p {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;

  color: #455a64;
}

a {
  font-size: 2rem;
  font-family: "Plus Jakarta Sans";
  color: var(--coral);
}
.logo-text {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  line-height: 2rem;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.05rem;
  text-align: center;
  text-decoration: none;
  color: hsl(210, 100%, 100%);
}
@media screen and (max-width: 1310px) {
  /* .graphics img {
    height: 450px;
    width: 450px;
  } */
}

@media screen and (max-width: 768px) {
  .graphics {
    width: 90%;
    margin: 0 auto;
    margin-top: 4rem;
    margin-bottom: 3rem;
  }

  .logo-text {
    display: none;
  }

  .description {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  /* .navBtn {
    width: 200px;
  }  */
}

@media screen and (max-width: 420px) {
  .graphics {
    width: 90%;
    margin: 0 auto;
    margin-top: 4rem;
  }
  /* .nav {
    float: left;
  } */
  /* .navBtn {
    width: 170px;
  } */
  /* .greeting {
    width: 350px;
  } */
}