@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body{
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
    background: url('night-photograph-2183637_640.jpg')no-repeat;
    background-position: center;
    background-size: cover;
}




.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.cent{
    display: flex;
    /*align-items: center;*/
    flex-direction: column;
    margin:auto;
	padding: 9%;
    background-color: rgba(255, 255, 255, .9); /* fallback */
    border-radius: 20px;
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .cent {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }
}

button{
    border-radius: 10px;
	border: none;
	width: 164px;
	height: 51px;
	margin: auto;
	margin-top: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	background: #000000;
	font-size: 15px;
	color: #ffffff;
    transition: background-color 0.3s ease-in-out;   
}

/*button colours*/
button#regular {
    background-color: #008000;
    color: #ffffff; /* Set default text color */
}
button#reset {
    background-color: #db2b1f;
}

button#duplicate{
    background-color: #db2b1f;
}

button#regular:hover {
    background-color: yellow; /* Change background color on hover */
    color: black; /* Change text color on hover */
    outline-width: 12px;
    outline: #003cfff3;
}
button#duplicate:hover {
    background-color: #0a36fa;
    color: #ffffff;
    outline-width: 12px;
    outline: #003cfff3;
}
button#reset:hover {
    background-color: #0a36fa;
    color: #ffffff;
    outline-width: 12px;
    outline: #003cfff3;
}

button:hover {
    background-color: #0a36fa;
    color: #ffffff;
    outline-width: 12px;
    outline: #003cfff3;
}

p{
    align-items: center;
    text-align: center;
    color: aliceblue;
    width: 100%;
}

/*responsive*/
@media(max-width: 574px){
  .cent{
    display: flex;
    /*flex-wrap: wrap;*/
    align-items: center;
    padding: 40px;
    /*height: 450px;*/
    width: 400px;
}

}