styles.css

/* Importing Static fonts */
/* StarWars Jedi - normal font */
@font-face {
  font-family: 'StarJedi-normal';
  src: URL('static/font/starjedi/Starjedi-normal.ttf') format('truetype');
}

/* StarWars Jedi - hollow font */
@font-face {
  font-family: 'StarJedi-hollow';
  src: URL('static/font/starjedi/Starjedi-hollow.ttf') format('truetype');
}

:root {
  /* Set neon color */
  /* Star Wars Color Theme */
  --background-color: #1c1f2a;
  --label-color: #B58150;
  --red: #e4002b;
  --blue: #0D5AA0;
  --grey: #d9e1e2;
  --browm: #7D4016;
}

body {
  font-family: 'BioRhyme', serif;
  font-size: 1.5rem;
  background-color: var(--background-color);
  text-align: center;
  justify-content: center;
  margin: 1rem;
  padding: 1rem;
  margin-right: 5rem;
  margin-left: 5rem;
  text-align: center;
  justify-content: center;
  width: 60vw;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 80px;
}

/* Star Wars Border */
.star-wars-border {
  border: 8px solid var(--red);
  border-radius: 10px;
}

/* Yoda Image */
#yoda-img {
  display: block;
  object-fit: cover;
  background-repeat: no-repeat;
  height: 50vh;
  width: auto;
  margin: 1rem auto;
  margin-top: 20px;
  margin-bottom: 20px;

}

#yoda-icon {
  height: 25px;
}

#main-app {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* Translate Button */
#btn-translate {
  background-color: var(--label-color);
  border-color: black;
  color: black;
  font-size: 1.6rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  width: 50%;
  margin: 15px auto;
  text-align: center;
}

#txt-input {
  font-family: 'Caveat', cursive;
  display: block;
  font-size: 1.6rem;
  height: 20vh;
  max-width: 100%;
  width: 97vw;
  padding: 0px;
  padding-top: 1rem;
  margin: 0 auto;
}

#output-box {
  font-size: 1.6rem;
  font-family: 'Caveat', cursive;
  background: white;
  display: block;
  height: 20vh;
  margin: 0px auto;
  padding: 1rem;
  text-align: left;
  font-style: normal;
}

/* Title */
.title-style {
  font-family: StarJedi-normal;
  display: block;
  background-color: black;
  color: var(--grey);
  margin: 0 auto;
  padding: 1rem;
}

/* Box Labels Style */
.box-labels {
  background: var(--label-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0 auto;
}

/* FOOTER STYLE */
#made-by {
  background: white;
  margin: 0 auto;
  padding: 1.5rem;
}

#socials-container {
  height: auto;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 20px;
}

#social-links {
  background: var(--red);
  display: flex;
  justify-content: space-evenly;
  gap: 15px;
  flex-wrap: wrap;
  padding: 20px 50px 10px 50px;
}

#social-links img {
  height: 50px;
}

/* Mobile View */
@media (max-width: 530px) {
  body {
    width: 90vw;
    margin: 0 0;
  }
  .title-style {
    font-size: 1.9rem;
  }
  #btn-translate {
    font-size: 1rem;
    padding: 1rem 0px 1rem 0px;
  }
}