body{
	font-family: 'Kodchasan', sans-serif;
	color: #fff;
	margin: 0;
	background-color: #d92e6d;
	/* background-color: #5cd5eb; */
    /* overflow: auto; */
}
h1{
	font-size: 4.8rem;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
}
h2{
	font-size: 2.4rem;
	letter-spacing: 0.05rem;
	margin-bottom: 0.16rem;
}
h1, h2, h3{
	font-family: 'Nixie One', cursive;
	text-shadow: 1px 1px rgb(35, 2, 124), -1px -1px rgb(35, 2, 124), 1px -1px rgb(35, 2, 124), -1px 1px rgb(35, 2, 124);
}
canvas{
	background-color:#d92e6d;
  /* background-image: url("https://www.transparenttextures.com/patterns/swirl.png"); */
    width: 100vw;
    /* overflow:auto; */
    position: absolute;
    z-index: -1;
}
.banner-text{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 100vh;
    /* overflow:auto; */
    position:relative;
    z-index: 1;
}
.btn{
	background-color: rgb(35, 2, 124);
    color: white;
    font-family: 'Poppins', sans-serif;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #fff;
}
.btn:hover{
    background-color: rgba(60, 40, 116, 0.8);
    border: 1px solid rgb(35, 2, 124);
    cursor: pointer;
}
.rev{
    background-color: rgb(35, 2, 124);
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    outline: 12px dotted #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type=range]{
    -webkit-appearance: none;
    appearance: none;
    background: white;
    cursor: pointer;
    /* width: 20rem; */
    /* height: 1.6rem; */
}

/* Chrome, Safari, Opera, and Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
    background: rgb(35, 2, 124);
    height: 0.5rem;
    border-radius: 8px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    background: rgb(35, 2, 124);
    height: 0.5rem;
    border-radius: 8px;
}


/* Thumb Styles */
/* Chrome, Safari, Opera, and Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;    
    border-radius: 8px;
    
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;
    border-radius: 8px;
}

/* Focus Styles */
/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

  /* Chrome, Safari, Opera, and Edge Chromium */
input[type="range"]:focus::-webkit-slider-thumb {
    border: 1px solid rgb(35, 2, 124);
    outline: 3px solid rgb(35, 2, 124);
    outline-offset: 0.125rem;
}

  /* Firefox */
input[type="range"]:focus::-moz-range-thumb {
    border: 1px solid rgb(35, 2, 124);
    outline: 3px solid rgb(35, 2, 124);
    outline-offset: 0.125rem;     
}

form{
    background-color: #fff;
    color: rgb(35, 2, 124);
    /* outline: 9px dotted rgb(35, 2, 124); */
    border: 2px solid rgb(35, 2, 124);
    border-radius: 8px;
    padding: 2rem;
}
i{
	font-size: 2.4rem;
}
button[type="button"]{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.play-buttons{
    display: flex;
    justify-content: space-evenly;
}
fieldset{
    border: none;
}
.center{
    text-align: center;
}


form>*:not(.btn) {
    font-size: 1.6rem;
}

form{
	display: flex;
	flex-direction: column;
}

.grid-container{
    display: grid;
    grid-template-columns: 1fr 3fr 1.4fr;
    grid-template-rows: repeat(auto, 2);
    row-gap: 30px;
}
label{
    grid-column: 1 / 3;
}

.grid-container>span{
    display: flex;
    justify-content: center;
}
.grid-container:first-child{
    padding-bottom: 1.6rem;
}
#bubble-slider, #size-slider{
    /* width: 4.8rem; */
border: 2px solid #d92e6d;
border-radius: 4px;
background: #FFB8C6;
display: flex;
justify-content: center;
align-items: center;

}
footer>p{
    margin-top: 0.5rem;
	z-index: -1;
}
/* #FFB8C6 #d92e6d*/

  /* 576, 768, 992, 1200, 1400 */
@media  screen and (max-width: 768px) {

	.banner-text{
		display: flex;
		flex-direction: column;
		justify-content:space-between;
		align-items: stretch;
		width: 100%;

		/* height: 100vh; */ 
        /* overflow-y: scroll; */
	}
	h1{
		font-size: 3.6rem;
		margin-bottom: 1rem;
	}
	h2{
        display: none;
		/* font-size: 2rem;
		letter-spacing: 0.05rem;
		margin-bottom: 0.8rem; */
	}
	.rev{
		padding: 2.4rem 1.2rem;
		outline: 12 px dotted #fff;
		/* border: 12px dotted #fff; */
		border-radius: none;
	}
	form{

		border-left: none;
		border-right: none;
		border-radius: 0px;
		/* padding: 2rem; */

	}
	/* Thumb Styles */
	/* Chrome, Safari, Opera, and Edge Chromium */
	input[type="range"]::-webkit-slider-thumb {

		margin-top: -24px; /* Centers thumb on the track */
		height: 4rem;
		width: 2rem;    
		border-radius: 16px;
		
	}
	/* Firefox */
	input[type="range"]::-moz-range-thumb {
		border-radius: 0; /*Removes default border-radius that FF applies*/
		height: 4rem;
		width: 2rem;
		border-radius: 16px;
	}
    .play-buttons{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 3rem;
    }
    button{
        font-size: 3rem;
    }
    .btn:not(form>*){
        border-radius: 0px;
    }
}
@media screen and (max-width: 420px) {
    h1{
		font-size: 2.4rem;
        /* margin-bottom: 1rem; */
        /* color: red; */

	}
	/* h2{
		font-size: 1.6rem;
		margin-bottom: 0.8rem;
	} */
    .banner-text{
        border-radius: 0;
    }
    button{
        font-size: 2rem;
    }
    form > .btn{
        /* background-color: red; */
        align-self: stretch;
        font-size: 1.6rem;
        border-radius: 0;
        border: 1px solid transparent;
    }
    form{
        padding-left: 1rem;
        padding-right: 2rem;
        padding-bottom: 1rem;
        padding-top: 2rem;
        border: 1px solid transparent;
    }
    .btn:not(form>*){
        padding-right: 1rem;
        padding-left: 1rem;
    }
}
/* @media screen and (max-width: 320px) {
    h1{
		font-size: 2rem;
		margin-bottom: 1rem;
        color: red;
	}
	h2{
		font-size: 0.6rem;
		margin-bottom: 0.8rem;
	}
} */