$font-stack: Helvetica, sans-serif;
$primary_color: #006d18;
$secondary_color: #239c78;
$bg_grad_color_1: #58f5c6;
$bg_grad_color_2: #01278d;
$bg_grad_color_3: #fac95f;
$bg_grad_color_4: #a30ddf;
$short-fade: 0.4s;
$long-fade: 1.2s;

* {
    font: $font-stack;
}

body {
    padding: 10%;
    background-color: $primary_color;
    background: linear-gradient(-45deg, $bg_grad_color_1, $bg_grad_color_2, $bg_grad_color_3, $bg_grad_color_4);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
	height: 100vh;
}

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

h1 {
    text-align: center;
}
input {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 1em;
    padding-left: 4em;
    box-sizing: border-box;
    border: 0.2em solid $secondary_color;
    border-radius: 1em;
    background-size: 2em;
    background-position: 1em; 
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    background-image: url('../images/youtube_bw.png');
}
input:focus {
    transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
    width: 70%;
    color: $primary_color;
    border-radius: 0.1em;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    background-image: url('../images/youtube_wb.png');
}
input:not(:placeholder-shown){
    width: auto;
}
button {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 1em;
    padding-left: 4em;
    box-sizing: border-box;
    border: 0.2em solid $secondary_color;
    border-radius: 1em;
    background-size: 2em;
    background-position: 1em; 
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    background-image: url('../images/download_bw.png');
}
button:focus {
    transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
    width: 30%;
    color: $primary_color;
    border-radius: 0.1em;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    background-image: url('../images/download_wb.png');
}