style.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap");

html,
body {
  font-family: "Roboto", sans-serif;
  color: white;
  background-color: #635013;
  padding: 0;
  margin: 0;
  /* justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
  user-select: none; */
}

.container {
  /* margin-left: 1.8rem; */
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  height: 100vh;
}

.container-calculator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

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

.screen {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #7f45e2;
  border-radius: 10px;
}

.input[type="text"] {
  width: 90%;
  height: 5px;
  padding: 20px;
  font-size: 2rem;
  text-align: right;
  color: #ebebeb;
  font-family: Rubik;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0px 0px 4px grey;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.results[type="text"] {
  width: 90%;
  height: 5px;
  padding: 20px;
  font-size: 2rem;
  text-align: right;
  color: #ebebeb;
  font-family: Rubik;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0px 0px 4px rgb(5, 210, 132);
  margin-top: 1vh;
  margin-bottom: 3vh;
}

button {
  width: 60px;
  height: 60px;
  margin: 10px;
  padding: 0px;
  border: none;
  cursor: pointer;
  color: #ebebeb;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.48px;
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 100%),
    #2d2a37;
  box-shadow: 0px 2px 3px 0px rgba(255, 255, 255, 0.06) inset,
    0px 0px 2px 0px rgba(0, 0, 0, 0.29), 0px 2px 4px 0px rgba(0, 0, 0, 0.26),
    0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 7px 7px 0px rgba(0, 0, 0, 0.04),
    0px 11px 7px 0px rgba(0, 0, 0, 0.01);
  transition: all 0.2s ease;
}

button:hover {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 100%),
    #7f45e2;
  box-shadow: 0px 2px 3px 0px rgba(255, 255, 255, 0.1) inset,
    0px 0px 2px 0px rgba(0, 0, 0, 0.29), 0px 2px 4px 0px rgba(0, 0, 0, 0.26),
    0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 7px 7px 0px rgba(0, 0, 0, 0.04),
    0px 11px 7px 0px rgba(0, 0, 0, 0.01);
  transform: scale(1.1);
}

button:active {
  background: #000;
  transform: translate(0px, 2px);
}

.btn:hover {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 100%),
    #81eee5;
  transform: scale(1.1);
}

.btn:active {
  background: #000;
  transform: translate(0px, 2px);
}

.opr {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.05) 0.01%,
      rgba(255, 255, 255, 0.05) 100%),
    #462878;
  box-shadow: 0px 2px 3px 0px rgba(255, 255, 255, 0.1) inset,
    0px 0px 2px 0px rgba(0, 0, 0, 0.29), 0px 2px 4px 0px rgba(0, 0, 0, 0.26),
    0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 7px 7px 0px rgba(0, 0, 0, 0.04),
    0px 11px 7px 0px rgba(0, 0, 0, 0.01);
  font-weight: 500;
}

.eql {
  background: orangered;
  font-weight: 900;
}

.eql:hover {
  color: orangered;
  /*On Hover Change background color to white and foreground color to orangered (Only for Equals sign) looks better rather than primary color*/
  background: white;
  font-weight: 900;
}

.button:active {
  background: #000;
  transform: translate(2px, 2px);
}

.title {
  background: linear-gradient(75deg, #30707988, #6f00ff73 48%, #ff686871);
  border-radius: 10px;
  padding: 5px 28px;
  font-size: 40px;
  margin-top: 5vh;
  margin-bottom: 2vh;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.444);
  border-top: 2px solid #2d2a37;
  border-bottom: 2px solid #2d2a37;

  box-shadow: 3px 3px 10px black;
}

h1 {
  background-color: #085d68;
  background-image: linear-gradient(75deg, #7f45e2, #7000ff 48%, #2d2a37);
  border: 0.5 thin black;
  background-repeat: no-repeat;
  border-radius: 10px;
  font-size: 2rem;
  text-align: center;
  padding: 0.5rem;
}

.title {
  text-transform: uppercase;
  background-image: linear-gradient(75deg, #2d2a37, #21807c 48%, #46036d);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

body {
  margin: 0px;
  background: linear-gradient(180deg, #2b295a 0%, #9c89e9 100%);
  font-family: "Roboto", sans-serif;
}

.parent {
  /* background-color: #2c0d49; */
  /* box-shadow: 0 10px 20px rgba(41, 41, 0.2); */
  border-width: 2px;
  padding: 2rem;
  width: 500px;
  justify-content: center;
  margin-top: 30px;
  gap: 2.6rem;
  border-radius: 4.8rem;
  background: #2d2a37;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.22) inset,
    0px 6px 8px 0px rgba(255, 255, 255, 0.1) inset,
    0px 8px 17px 0px rgba(0, 0, 0, 0.29), 0px 30px 30px 0px rgba(0, 0, 0, 0.26),
    0px 68px 41px 0px rgba(0, 0, 0, 0.15),
    0px 120px 48px 0px rgba(0, 0, 0, 0.04),
    0px 188px 52px 0px rgba(0, 0, 0, 0.01), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.parent.box-highlight {
  transform: translateY(2px);
  /* Simulate a press-down effect */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
  .row input {
    font-size: 20px;
    border-radius: 5px;
  }

  button {
    font-size: 1.1rem;
    margin: 5px;
    width: 45px;
    height: 45px;
  }

  .title {
    font-size: 25px;
  }

  .head-container {
    width: 100%;
    margin-top: 0px;
  }

  .parent {
    width: 75%;
    margin-top: 100px;
  }

  .container {
    height: 100vh;
  }
  .container-calculator{
    width: 500px;
  }
}

@media (max-width: 700px) {
  .container-calculator{
    width: 600px;
  }
}

@media (max-width: 600px) {
  .container-calculator{
    width:500px;
  }
}
@media (max-width: 500px) {
  .container-calculator{
    width: 400px;
  }
}
@media (max-width: 400px){
  .container-calculator{
    width: 375px;
  }
}

@media (max-width: 1000px) {

  .container {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  #timer {
    margin-top: 15%;
  }

  .parent {
    width: 70%;
    border-radius: 3rem;
  }

  .footer {
    margin-top: 15%;
  }
}

/***footer***/
.footer {
  height: 160px;
  background-color: #2d2a37;
  text-align: center;
  /* margin-top: 12%; */
  bottom: 0;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container_footer {
  justify-content: center;
  padding-bottom: 0;
  bottom: 0;
}

.foot_heading {
  /* padding-top: 15px; */
  margin-bottom: 2rem;
  color: #fff;
  font-family: "Roboto", sans-serif;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 282px;
  margin: auto;
}

.icons {
  font-size: 1.5rem;
  color: #fff;
  margin: auto;
}

.icons i {
  margin-top: 0.65rem;
}

.footer-icons {
  height: 45px;
  width: 45px;
  background-color: #000;
  border-radius: 50%;
  margin: auto;
  cursor: pointer;
  transition: all 0.4s ease;
}

.footer-icons:hover {
  transform: scale(1.1);
  /* Increase the size on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  /* Add a slight shadow on hover */
  cursor: pointer;
  background-color: rgb(66, 66, 66);
  border-radius: 18px;
}

#timer {
  height: 120px;
  width: 372px;
  /* padding-top: 75px; */
  text-align: center;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(./images/hacktoberfest.png);
  font-size: 1.7rem;
  font-family: "Algerian", "Roboto", sans-serif;
  border: 1px solid #000;
  border-radius: 15px;
  box-shadow: 3px 3px 10px black;
}

#timer-text {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 80px;
}