@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

:root{
	--button-color : #4ea5df;
	--content-notice : #ffffff;
	--notice-color : #ff0000;
}
* {
	font-family: 'Montserrat', sans-serif;
	padding: 0.25em;
}

body {
	background-size: cover;
	background-image: url("https://cdn.pixabay.com/photo/2017/12/14/02/05/background-3018089_1280.jpg");
}

.title {
	text-align: center;
	font-weight: 800;
	font-size: 2.3rem;
}

.content {
    border-radius: 1rem;
    max-width : 500px;
    padding : 1rem;
    margin :2rem  auto;
	background-image :linear-gradient(rgb(14, 196, 252), pink);
	text-align: center;
	box-shadow : -1rem 1rem 5rem rgb(39, 224, 248) ;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-align: center;
}

#close-notice {
	cursor: pointer;
}

.label {
	font-size: 1.25rem;
}

input {
	padding: 0.5em;
	font-size: 1em;
	width: 85%;
}

button {
	padding: 0.5em 1em;
	margin: 1em auto;
	text-align: center;
	font-size: 1.2em;
	color:var(--button-color) ;
	border: solid;
	border-radius: 7px;
}

img {
	max-width: 10em;
	margin: auto;
}
.footer{
	margin : auto;
	max-width : 500px;
	background-image :linear-gradient(rgb(14, 196, 252), pink);
	text-align: center;
	box-shadow : -1rem 1rem 5rem rgb(39, 224, 248) ;
	border-radius: 1rem;
}
.footer-links{
    text-align: center;
}
li{
	display:inline;
}
img{
	width : 3rem;
	height : 3rem;
	
}
#result,
#error {
	display: none;
}

#result-text,
#error-text {
	font-size: 1.25em;
	text-align: center;
}
.social-icon {
	height: 2rem;
	width: 2rem;
}
.content-notice{
    border-radius: 1rem;
    max-width : 500px;
    padding : 1rem;
    margin :2rem  auto;
	background-color: var(--content-notice);
	text-align: center;
	box-shadow : -1rem 1rem 5rem rgb(255, 0, 0) ;
	color: var(--notice-color);
}