@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap');

input {
		width: 400px;
        margin: 20px;
        height: 50px;
        font-size: 30px;
        font-family: fira code;
        border:  none;
        border-radius: 10px;
        text-align: center;

}

body {
  text-align: center;
	background: #C6FFDD;
	background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
	background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
  opacity: 0;
  transition: opacity 3s;
  font-family: fira code;
	font-family: fira code;
	font-size: 30px;

}

select {
        width: 300px;
        margin: 20px;
        height: 50px;
        font-size: 30px;
        font-family: fira code;
        border:  none;
        border-radius: 10px;
        text-align: center;
    }
    select:focus {
        min-width: 300px;
        width: auto;
    }

input {
  margin-left: auto;
  margin-right: auto;
}

button {
  border:  none;
  width:  100px;
  height: 50px;
  border-radius: 10px;
  font-family: fira code;
  font-size: 20px;
  background: lightblue;
  cursor: pointer;
}

.glow {
  font-size: 80px;
  color: #fff

  .dark-mode {
  background-color: black;
  color: white;
}ff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #4ba4e0, 0 0 40px #4dcdff, 0 0 50px #4dc7ff, 0 0 60px #4dbeff, 0 0 70px #4dafff, 0 0 80px #4dcdff;
  }
}

.dark-mode {
  background-color: #000000;
  
  background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
  color: white;
}

.button2 {
  text-align: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
}

.btn-hover {
    color: #fff;
    cursor: pointer;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}