@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

.loader {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > img {
    width: 100px;
}

.loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 50vh;
    -webkit-font-smoothing: antialiased;

    
  }

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

.launch {
  color: rgb(0, 255, 115);
  font-size: 35px;
  font-family: "Quicksand";
}

.launchbtn{
  font-family: "Quicksand";
	width: 300px;
	height: 80px;
	border: none;
	color: #ffffff;
	background-color: rgb(0, 162, 255);
	border-radius: 5px;
	box-shadow: inset 0 0 0 0 #f9e506;
	transition: ease-out 0.3s;
	font-size: 20px;
	outline: none;
	cursor: pointer;
}

.launchbtn:hover {
	box-shadow: inset 300px 0 0 0 #09BA0E;
}

.homebtn{
  font-family: "Quicksand";
	width: 300px;
	height: 80px;
	border: none;
	color: #ffffff;
	background-color: rgb(255, 0, 0);
	border-radius: 5px;
	box-shadow: inset 0 0 0 0 #09BA0E;
	transition: ease-out 0.3s;
	font-size: 20px;
	outline: none;
	cursor: pointer;
}

.homebtn:hover {
	box-shadow: inset 300px 0 0 0 rgb(190, 171, 0);
}