@import url("https://fonts.googleapis.com/css2?family=Inconsolata&family=Tiro+Telugu&display=swap");
body {
  width: 100%;
  /* background-color: rgb(163, 163, 163); */
  background-image: linear-gradient(
    to left bottom,
    #7a7a7a,
    #838383,
    #8c8c8c,
    #969696,
    #9f9f9f,
    #a7a7a7,
    #b0b0b0,
    #b8b8b8,
    #c1c1c1,
    #cacaca,
    #d3d3d3,
    #dcdcdc
  );
}

.movie-backdrop {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 5px 5px 20px;
  border: solid 1px #2f2f2f;
  vertical-align: middle;
}

/* #movie-backdrop {
  width: 100%;
} */

.container {
  padding-top: 32px;
  height: 100%;
  padding-left: 10rem;
  padding-right: 10rem;
}

#actors {
  margin: 24px 16px 0 0;
}

#fakeflex-logo {
  padding: 12px;
  width: 15%;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

nav {
  display: flex;
  position: sticky;
  top: 0;
  background-color: rgb(28, 70, 123);
  border: solid rgb(55, 55, 55) 2px;
  font-size: large;
}

.text-color {
  color: aliceblue;
}

#searchBtn {
  color: aliceblue;
  border: solid 1px aliceblue;
}

#searchBtn:hover {
  background-color: rgb(163, 163, 163);
  color: rgb(28, 70, 123);
}

.footer {
  background-color: rgb(28, 70, 123);
  border: solid rgb(55, 55, 55) 2px;
  font-size: large;
  padding: 0.3%;
  text-align: center;
  color: aliceblue;
  text-decoration: none;
  bottom: 0;
  /* top: 100%; */
  width: 100%;
}

.about-footer {
  position:absolute;
  background-color: rgb(28, 70, 123);
  border: solid rgb(55, 55, 55) 2px;
  font-size: large;
  padding: 0.3%;
  text-align: center;
  color: aliceblue;
  text-decoration: none;
  bottom: 0;
  width: 100%;
}

.on-hover:hover {
  font-size: larger;
  color: aliceblue;
}

.movies {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 3%;
  row-gap: 1rem;
}

.actors {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3%;
  row-gap: 1rem;
}

.movie-div {
  text-align: center;
  position: relative;
  border-radius: 5%;
  margin-bottom: 0.8rem;
  height: auto;
  background-color: rgba(254, 254, 254, 0.5);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  font-family: "Inconsolata", monospace;
  cursor: pointer;
}

.actor-div {
  text-align: center;
  position: relative;
  border-radius: 5%;
  margin-bottom: 0.8rem;
  height: auto;
  background-color: rgba(254, 254, 254, 0.5);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  font-family: "Inconsolata", monospace;
  cursor: pointer;
}

#movie-img {
  position: relative;
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  width: 100%;
  max-width: 100%;
}

.actor-img {
  position: relative;
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
  max-width: 100%;
}

#movie-title {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  justify-content: center;
  padding: 2%;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  font-family: "Inconsolata", monospace;
}

.actors-name {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  justify-content: center;
  padding: 2%;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  font-family: "Inconsolata", monospace;
}

.centered {
  font-size: xx-large;
  color: aliceblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 3px #066cfb;
}

.movie-hover {
  text-align: center;
  position: relative;
  border-radius: 5%;
  border-color: rgb(28, 70, 123);
  margin-bottom: 0.8rem;
  height: auto;
  background-color: rgb(28, 70, 123);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  font-family: "Inconsolata", monospace;
}

/* Flashing */
.flashing:hover {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* .scrollbar { */
/* max-height: 40%;
  overflow: hidden;
  overflow-y: scroll; */
/* display: inline-block; */
/* } */

.actor-backdrop {
  /* width:100%; */
  width: 18rem;
  height: 25rem;
  box-shadow: 5px 5px 20px;
  border: solid 1px #2f2f2f;
}

/* .movie-backdrop {
  width: 430rem;
  height: 20rem;
  box-shadow: 5px 5px 20px;
} */

.actorName {
  font-size: xx-large;
  color: #423a3a;
  font-weight: bold;
  padding: 0;
  margin-bottom: 1rem;
}

.movie-title {
  font-size: xx-large;
  color: #423a3a;
  font-weight: bold;
  padding: 0;
  margin-bottom: 1rem;
  font-family: "Inconsolata", monospace;
}

.actor-info {
  color: rgb(28, 70, 123);
  font-size: larger;
  font-weight: bold;
  font-family: "Inconsolata", monospace;
}

.movie-info {
  color: rgb(28, 70, 123);
  font-size: larger;
  font-weight: bold;
  font-family: "Inconsolata", monospace;
}

.actor-info-detl {
  color: aliceblue;
  font-size: large;
  font-weight: normal;
  font-family: "Inconsolata", monospace;
}

.movie-info-detl {
  color: aliceblue;
  font-size: large;
  font-weight: normal;
  font-family: "Inconsolata", monospace;
}

#single-actor-page {
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 10rem;
  padding-right: 10rem;
}

.single-movie-page {
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 10rem;
  padding-right: 10rem;
}

.hello {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  column-gap: 3%;
  row-gap: 1rem;
}

.listActorImg {
  width: 12rem;
  height: 17rem;
  padding-top: 0.8rem;
  width: 100%;
  /* border-radius: 3%; */
}

.company-logo {
  width: 20rem;
  height: 17rem;
  padding-top: 0.5rem;
}

.RelatedName {
  width: 100%;
  font-size: xx-large;
  color: #423a3a;
  padding: 1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: "Inconsolata", monospace;
  border-top: 2px solid #423a3a;
}

.company-title {
  font-size: x-large;
  color: #423a3a;
  text-align: center;
  margin-top: 2rem;
  font-weight: bold;
  font-family: "Inconsolata", monospace;
  /* padding-top: 4rem; */
}

.listActorImgName {
  font-size: x-large;
  color: #423a3a;
  padding: 1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: "Inconsolata", monospace;
}

.listActorMovie {
  /* display: inline-block; */
  border: 1px solid aliceblue;
  box-shadow: 5px 5px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 3%;
}

iframe {
  display: block;
  margin: 0 auto;
  background-color: #777;
}

#video {
  border-top: 2px solid #423a3a;
  /* width: 100%; */
  /* margin: 0 !important; */
  /* padding: 0 !important; */
  padding-top: 2rem;
  /* padding-bottom: 1rem; */
  /* padding-bottom: 2rem; */
  /* background-color: #2f2f2f; */
}

.glow {
  /* font-size: 80px; */
  /* color: #fff; */
  /* text-align: center; */
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00a5e6,
      0 0 40px #006fe6, 0 0 50px #004de6, 0 0 60px #003de6, 0 0 70px #0008e6;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #dedede, 0 0 40px #b1b1b1,
      0 0 50px #9e9e9e, 0 0 60px #767676, 0 0 70px #525252, 0 0 80px #2f2f2f;
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flex-column {
  display: flex;
  flex-direction: column;
  margin: 2rem;
}

.about-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  padding-bottom: 2.5rem;
}

.about {
  font-size: larger;
  text-align: center;
  font-family: "Inconsolata", monospace;
}