@import url("../css/fonts.css");

/* ------------------- Header ------------------- */
header {
  width: 100%;
  height: 100px;
}

header h1 {
  font-family: Anton;
  color: #1b4332;
}

header section {
  padding: 5px;
  text-align: center;
  width: 100%;
  display: grid;
  grid-template-columns: 7fr 1fr 2fr 1fr 1fr;
  grid-template-rows: 40px 40px;
}
header section:hover {
  background: none;
}

#site-title {
  max-width: 100%;
  max-height: 100%;
  grid-column: 1/3;
  grid-row: 1/2;
}
#site-motto {
  grid-column: 1/3;
  grid-row: 2/3;
}

/* ----- Animation Text ----- */
.blink_me {
  font-family: Anton;
  -webkit-text-stroke: 1px rgb(0, 5, 2);
  letter-spacing: 2px;
  color: #0c271c;
  text-align: center;
  display: inline-block;
  vertical-align: bottom;
  animation: pulse 60s linear infinite;
  animation-delay: 0.5s;
}

.span1 {
  color: #d8f3dc;
}
.span2 {
  color: #95d5b2;
}
.span3 {
  color: #52b788;
}
.span4 {
  color: #23d32b;
}
.span5 {
  color: #2d6a4f;
}
.span6 {
  color: #1b4332;
}
.span7 {
  color: #081c15;
}

.blink_me span {
  float: left;
  overflow: hidden;
  animation: hideShow 60s linear infinite;
}

.blink_me span:nth-child(1) {
  animation-delay: -0s;
}
.blink_me span:nth-child(2) {
  animation-delay: -10s;
}
.blink_me span:nth-child(3) {
  animation-delay: -20s;
}
.blink_me span:nth-child(4) {
  animation-delay: -30s;
}
.blink_me span:nth-child(5) {
  animation-delay: -40s;
}
.blink_me span:nth-child(6) {
  animation-delay: -50s;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes hideShow {
  0%,
  16.6%,
  33.33%,
  100% {
    width: 0;
  }

  16.66%,
  33.3% {
    width: auto;
  }
}

/* ----- Animation Motto ----- */
#site-motto {
  padding: 1%;
  margin-top: 10px;
  grid-column: 1/3;
  grid-row: 2/3;
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* ----- Animation Logo ----- */
#site-logo {
  grid-column: 2/4;
  grid-row: 1/3;
  position: relative;
  width: 100%;
  text-align: center;
  display: inline-block;
  vertical-align: bottom;
  animation: pulse 60s linear infinite;
  animation-delay: -0.5s;
}

#site-logo img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

#site-logo img {
  float: left;
  overflow: hidden;
  animation: hideShow 60s linear infinite;
}
#site-logo img:nth-child(1) {
  animation-delay: -0s;
}
#site-logo img:nth-child(2) {
  animation-delay: -10s;
}
#site-logo img:nth-child(3) {
  animation-delay: -20s;
}
#site-logo img:nth-child(4) {
  animation-delay: -30s;
}
#site-logo img:nth-child(5) {
  animation-delay: -40s;
}
#site-logo img:nth-child(6) {
  animation-delay: -50s;
}
/*-------------------------------------------------*/

img {
  width: 100%;
}

h1 {
  font-family: Lexend;
  color: #081c15;
}

h2 {
  font-family: Abel;
  color: #1b4332;
}
h3,
h4,
h5,
h6 {
  font-family: Abel;
  color: #154732;
}

p {
  font-size: 1.5rem;
  font-family: Abel;
  color: #081c15;
}

.parg-table {
  font-size: 15px;
  color: black;
  text-align: left;
}

/* ------------------- Navigation ------------------- */
a {
  text-decoration: none;
  list-style-type: none;
}

a:link {
  text-decoration: none;
}

nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
  color: #eefcf7;
  text-decoration: none;
}

nav {
  color: #fafdfc;
  border: 0.5px solid #081c15;
  margin: 0 auto;
  max-width: 100%;
  background-color: #2d6a4f;
}

nav a:visited {
  color: #dceee8;
}

.navigation {
  list-style: none;
  padding: 0;
}

.navigation li:first-child {
  display: block;
}

.navigation li {
  display: none;
}

.navigation a {
  display: block;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  transition: 0.5s;
  font-size: clamp(1.7rem, 2vmin, 1.5rem);
}

.navigation a.ham::before {
  content: "";
}

.navigation a:hover {
  padding-left: 4%;
  padding-right: 4%;
  color: #ffffff;
  background-color: #081c15;
}

/* ------------------- Body ------------------- */
body {
  background: #d8f3dc;
}
main {
  background: #d8f3dc;
  padding: 0 2%;
}

main h1 {
  text-align: center;
  font-size: 3.5rem;
  text-shadow: 0.25rem 0.25rem 0.75rem #333;
  margin-bottom: 1rem;
  font-family: "Merriweather", "Arial Black", Sans-Serif;
}

video {
  object-fit: cover;
  width: 600px;
  height: 450px;
  box-shadow: 4px 4px 4px;
  margin: 5px 0 15px 0;
  justify-content: center;
  align-items: center;
}

.image-blur {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

fieldset {
  margin: 2rem 0;
  border: 2px solid #081c15;
  border-radius: 10px;
  padding: 0.5rem 2%;
}

legend {
  color: #081c15;
  margin: 0 1rem;
  padding: 0 0.5rem;
  font-size: 3rem;
}

label.top {
  display: block;
  padding-top: 1rem;
  color: #9c2c13;
  font-size: 2rem;
}

label.top input:required {
  border-left: red solid 6px;
}

label.top input:required:valid {
  background-color: white;
  border-left: green solid 6px;
}

label.top input,
label.top select {
  -webkit-appearance: none;
  display: block;
  font-size: 1rem;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 0.75rem;
  color: #555;
  width: 100%;
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
label.top input {
  max-width: 94%;
}
#translate-search-btn {
  border: none;
  background-color: #1b4332;
  color: white;
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  margin: 0 0 2rem 2%;
  width: 96%;
  max-width: 20rem;
}
/*Containers forms*/
.container-form {
  padding: 3%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.sub-container-form2 {
  grid-column: 1/6;
  grid-row: 1/2;
}
.sub-container-form1 {
  grid-column: 7/13;
  grid-row: 1/2;
}

/* ------------------- MovieS Container ------------------- */
.cards {
  max-width: 100%;
  background-color: #d8f3dc;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 10px;
  padding: 3%;
}

.cards section {
  margin: 3%;
  border: 0.5px solid #081c15;
  flex: 1 0 20%;
  background-color: #c9ebb5;
  text-align: center;
  padding: 4%;
}

.cards img {
  width: 100%;
  box-shadow: 0 0 10px #333;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1200px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

section:hover {
  background-color: #92e6a7;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/* ------------------- Movie Container ------------------- */
.card {
  max-width: 100%;
  background-color: #d8f3dc;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 10px;
  padding: 3%;
}

.card section {
  margin: 3%;
  border: 0.5px solid #081c15;
  flex: 1 0 20%;
  background-color: #c9ebb5;
  text-align: center;
  padding: 4%;
  font-size: 2em;
}

.card img {
  width: 50%;
  box-shadow: 0 0 10px #333;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1200px) {
  .card {
    grid-template-columns: 1fr;
  }
}

/* ------------------- Site Typography ------------------- */
.default {
  margin: 0;
  padding: 0;
  max-width: 80%;
}

th {
  border: 0.5px solid #081c15;
  max-width: 100%;
  text-align: center;
}

td {
  border: 0.5px solid #081c15;
  max-width: 100%;
  text-align: center;
}

.typo1 {
  font-family: Anton;
  font-size: 50px;
  text-align: center;
  color: #1b4332;
}

.typo2 {
  font-family: Abel;
  margin-top: -30px;
  font-size: 30px;
  text-align: center;
  color: #1b4332;
}

.typo3 {
  font-family: Lexend;
  color: #081c15;
}

.typo4 {
  font-family: Abel;
  color: #081c15;
}

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

/* ------------------- Footer ------------------- */
footer a:link,
footer a:visited {
  font-weight: bold;
  color: white;
}

footer a:hover {
  color: #fdfffe;
  font-weight: bold;
}

footer {
  text-align: center;
  color: #ffffff;
  border: 0.5px solid #081c15;
  width: 100%;
  height: 100%;
  background-color: #1b4332;
  display: grid;
  grid-template-columns: 8fr 1fr 1fr 1fr 1fr 1fr 2fr;
}

footer p {
  color: #bcf8e3;
  font-size: 2rem;
  grid-column: 1/3;
  padding-left: 3%;
}

footer p a {
  color: #fafafa;
  font-weight: bold;
}
footer a:hover {
  color: #95d5b2;
}

.footer-image1 {
  width: 60%;
  height: 60%;
  padding: 10%;
  grid-column: 4/5;
}

.footer-image2 {
  width: 60%;
  height: 60%;
  padding: 10%;
  grid-column: 5/6;
}

.footer-image3 {
  width: 60%;
  height: 60%;
  padding: 10%;
  grid-column: 6/7;
}

.separate {
  border-radius: 20%;
}

/* ------------------- Typed or Uttered and Translation ------------------- */
.container {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  justify-content: center;
}

#entered-uttered-text p {
  color: black;
  text-align: left;
  width: 100%;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

#translation p {
  color: black;
  text-align: left;
  width: 100%;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

#entered-uttered-text p.reply {
  text-align: right;
}

/* Main styles */
.text {
  font-family: Anton;
  font-size: 5rem;
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: hsl(130, 82%, 15%);
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #13cf1c;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #73c5a3;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #17a599;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #177f9e;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* Other styles */
.banner-css {
  padding: 0;
  margin: 0;
}

svg {
  padding: 0;
  width: 100%;
  height: 100%;
}