
html {
  scroll-behavior: smooth;
  scrollbar-color: #DC143C #FFF;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  float:none;
}

body {
	font-size: 14px;
	text-align: justify;
	text-overflow: string;
	background-color:transparent;
	font-family: Tahoma,Arial,serif,Georgia,Courier New;
	word-wrap: normal;
	word-break: normal;
	white-space: pre-wrap;
	line-height: normal;
	vertical-align: baseline;
	align-items: center;
	overflow-wrap: break-word;
	overflow: visible;
	scrollbar-color: #DC143C #191970;
}

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: black;
}

h3 {
	z-index:1;
	display:block;
	visibility:visible;
	padding:2px;
	width:300px;
	height:24px;
	font-size:16px;
	color:red;
	background-color:transparent;
	border:2px hidden #DC143C;
	margin:auto;
}

#NPSSmainForm, #NPSSRegSecretSantaFairiesForm {
	z-index:1;
	display:block;
	visibility:visible;
	margin:2px;
	padding:2px;
	text-align: center;
	width:auto;
	height:auto;
	border:2px hidden #DC143C;
}

#NPSSRegSecretSantaFairiesForm {
	z-index:2;
	background-color:white;
}

#NPSSmainForm input, #NPSSRegSecretSantaFairiesForm input {
	z-index:1;
	display:block;
	visibility:visible;
	margin:1px auto;
	padding:1px auto;
	height:20px;
	width:170px;
	position:relative;
	color:blue;
	border:1px solid blue;
	text-align: center;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
}

#NPSSmainForm input:hover, #NPSSRegSecretSantaFairiesForm input:hover {
	border:1px solid #f44336;
	color:blue;
	text-align: center;
	box-shadow: -2px -2px 10px 10px white;
}

label {
	z-index:2;
	display:inline;
	visibility:hidden;
	color:white;
	background-color:#f44336;
	opacity:1;
	border:0px solid red;
	border-radius: 15px / 50px;
	margin:auto;
	margin-left:2px;
} 

button {
	font-size:14px;
	border: 2px solid #f44336;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
	color:red;
	background-color:white;
}

#HelloSecretSanta {
	z-index:1;
	display:inline-block;
	visibility:visible;
	position:relative;
	margin:auto;
	color:red;
	background-color:white;
	border-bottom:2px solid #f44336;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
}

#HelloSecretSanta:hover {
	color:white;
	background-color:red;
	box-shadow: -2px -2px 10px 10px white;
	transition-duration: 0.4s;
}

#RegSecretSanta, #RegSecretSantaFairies  {
	z-index:1;
	display:block;
	visibility:visible;
	color:red;
	background-color:white;
	border: 2px solid #f44336;	
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
	margin:auto;
	margin-top:20px;
	position:relative;
}

#RegSecretSanta:hover, #RegSecretSantaFairies:hover {
	color:white;
	background-color:red;
	box-shadow: -2px -2px 10px 10px white;
	z-index:1;
	display:block;
	visibility:visible;
	margin:auto;
	margin-top:20px;
	position:relative;
}

#RegSecretSantaFairies {
	color:blue;
	background-color:white;
	border: 1px solid blue;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
	margin:auto;
	
}

#RegSecretSantaFairies:hover {
	color:white;
	background-color:blue;
	border: 1px solid blue;
	box-shadow: -2px -2px 10px 10px white;
	margin:auto;
}

#Wellcomes {
	width:auto;
	height: 500px;
	font-size: 17px;
	text-align:center;
	background-color:white;
	display:block;
	z-index:2;
	margin:150px auto auto auto;
}

.Comes {
	width:400px;
	height: 50px;
	color:red;
	background-color: white;
	font-size: 17px;
	text-align:center;
	border:2px hidden #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	padding:7px;
	display:block;
	opacity:1;
	z-index:3;
	position:absolute;
	top:120px;
	margin:auto;
	margin:30px auto 10px auto;
}

.Comes2 {
	display:block;
	visibility:visible;
	position:relative;
	top:40px;
	z-index:3;
	top:0px;
	margin:auto;
	margin:50px auto 10px auto;
	padding:7px;
	width:340px;
	height: 50px;
	text-align:center;
	font-size: 17px;
	border:1px solid #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	background-color: white;
	color:red;
	opacity:1;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	
}

.Comes3 {
	display:block;
	visibility:visible;
	position:relative;
	top:80px;
	z-index:3;
	top:0px;
	margin:auto;
	margin:30px auto 10px auto;
	padding:7px;
	width:340px;
	height: 50px;
	text-align:center;
	font-size: 17px;
	border:1px solid #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	background-color: white;
	color:red;
	opacity:1;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	
}



@media only screen and (min-width: 992px) { 

#div1  {
	z-index:1;
	display:block;
	visibility:visible;
	margin:2px;
	padding:2px;
	height:112px;
	text-align: center;
	border:2px solid red;
}

h3 {
	z-index:1;
	display:block;
	visibility:visible;
	padding:2px;
	width:300px;
	height:24px;
	font-size:16px;
	color:red;
	background-color:transparent;
	border:2px hidden #DC143C;
	margin:auto;
}

h3:first-of-type {
	position:relative;
	margin:10px auto 4px auto;
}

#HelloSecretSanta {
	z-index:1;
	display:inline-block;
	visibility:visible;
	position:relative;
	top:-3px;
	margin:auto;
	margin-left:10px;
	padding:1px;
	width:60px;
	height:18px;
	font-size:14px;
	color:red;
	background-color:white;
	border-bottom:2px solid #f44336;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
}

h3:nth-of-type(2) {
	position:relative;
	margin:-20px auto 0px auto;
}

#NPSSmainForm input {
	z-index:1;
	display:block;
	visibility:visible;
	margin:1px auto;
	padding:1px auto;
	width:170px;
	color:blue;
	border:1px solid blue;
	text-align: center;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
}

label {
	height:20px;
	width:120px;
	border:0px solid red;
	padding:2px 6px 2px 6px;
	margin:auto;
	position:relative;
	top:-21px;
	left:0px;
} 

#YNe {
	left:110px;
	width:70px;
}

#YY {
	left:124px;
	width:70px;
} 

#YA {
	left:120px;
	width:70px;
}

#YPN {
	left:158px;
	width:140px;
}

#YE {
	left:128px;
	width:80px;
}

#YW {
	left:128px;
	width:80px;
}


}

@media only screen and (max-width: 992px) { 

#div1  {
	z-index:1;
	display:block;
	visibility:visible;
	margin:2px;
	padding:2px;
	height:112px;
	text-align: center;
	border:2px solid red;
}

h3 {
	z-index:1;
	display:block;
	visibility:visible;
	padding:2px;
	width:300px;
	height:24px;
	font-size:16px;
	color:red;
	background-color:transparent;
	border:2px hidden #DC143C;
	margin:auto;
}

h3:first-of-type {
	position:relative;
	margin:10px auto 4px auto;
}

#HelloSecretSanta {
	z-index:1;
	display:inline-block;
	visibility:visible;
	position:relative;
	top:-3px;
	margin:auto;
	margin-left:10px;
	padding:1px;
	width:60px;
	height:18px;
	font-size:14px;
	color:red;
	background-color:white;
	border-bottom:2px solid #f44336;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
}

h3:nth-of-type(2) {
	position:relative;
	margin:-20px auto 0px auto;
}

#NPSSmainForm input {
	z-index:1;
	display:block;
	visibility:visible;
	margin:1px auto;
	padding:1px auto;
	width:170px;
	color:blue;
	border:1px solid blue;
	text-align: center;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
}

label {
	height:20px;
	width:120px;
	border:0px solid red;
	padding:2px 6px 2px 6px;
	margin:auto;
	position:relative;
	top:-21px;
	left:0px;
} 

#YNe {
	left:110px;
	width:70px;
}

#YY {
	left:124px;
	width:70px;
} 

#YA {
	left:124px;
	width:70px;
}

#YPN {
	left:158px;
	width:140px;
}

#YE {
	left:128px;
	width:80px;
}

#YW {
	left:128px;
	width:80px;
}


}

@media only screen and (max-width: 768px) { 

#div1  {
	z-index:1;
	display:block;
	visibility:visible;
	margin:2px;
	padding:2px;
	height:112px;
	text-align: center;
	border:2px solid red;
}

h3 {
	z-index:1;
	display:block;
	visibility:visible;
	padding:2px;
	width:300px;
	height:24px;
	font-size:16px;
	color:red;
	background-color:transparent;
	border:2px hidden #DC143C;
	margin:auto;
}

h3:first-of-type {
	position:relative;
	margin:10px auto 4px auto;
}

#HelloSecretSanta {
	z-index:1;
	display:inline-block;
	visibility:visible;
	position:relative;
	top:-3px;
	margin:auto;
	margin-left:10px;
	padding:1px;
	width:60px;
	height:18px;
	font-size:14px;
	color:red;
	background-color:white;
	border-bottom:2px solid #f44336;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
}

h3:nth-of-type(2) {
	position:relative;
	margin:-20px auto 0px auto;
}

#NPSSmainForm input {
	z-index:1;
	display:block;
	visibility:visible;
	margin:1px auto;
	padding:1px auto;
	width:170px;
	color:blue;
	border:1px solid blue;
	text-align: center;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
}

label {
	height:20px;
	width:120px;
	border:0px solid red;
	padding:2px 6px 2px 6px;
	margin:auto;
	position:relative;
	top:-21px;
	left:0px;
} 

#YNe {
	left:110px;
	width:70px;
}

#YY {
	left:124px;
	width:70px;
} 

#YA {
	left:120px;
	width:70px;
}

#YPN {
	left:158px;
	width:140px;
}

#YE {
	left:128px;
	width:80px;
}

#YW {
	left:128px;
	width:80px;
}


}

@media only screen and (max-width: 600px) { 

h3 {
	z-index:1;
	display:block;
	visibility:visible;
	padding:2px;
	width:300px;
	height:24px;
	font-size:16px;
	color:red;
	background-color:transparent;
	border:2px hidden #DC143C;
	margin:auto;
}

h3:first-of-type {
	position:relative;
	margin:10px auto 4px auto;
}

#HelloSecretSanta {
	z-index:1;
	display:inline-block;
	visibility:visible;
	position:relative;
	top:-3px;
	margin:auto;
	margin-left:10px;
	padding:1px;
	width:60px;
	height:18px;
	font-size:14px;
	color:red;
	background-color:white;
	border-bottom:2px solid #f44336;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
	transition-duration: 0.4s;
}

h3:nth-of-type(2) {
	position:relative;
	margin:-20px auto 0px auto;
}

#NPSSmainForm input {
	z-index:1;
	display:block;
	visibility:visible;
	margin:1px auto;
	padding:1px auto;
	width:170px;
	color:blue;
	border:1px solid blue;
	text-align: center;
	box-shadow: -2px -2px 10px white, -12px -10px 10px white;
}

label {
	height:20px;
	width:120px;
	border:0px solid red;
	padding:2px 6px 2px 6px;
	margin:auto;
	position:relative;
	top:-21px;
	left:0px;
} 

#YNe {
	left:110px;
	width:70px;
}

#YY {
	left:124px;
	width:70px;
} 

#YA {
	left:120px;
	width:70px;
}

#YPN {
	left:158px;
	width:140px;
}

#YE {
	left:128px;
	width:80px;
}

#YW {
	left:128px;
	width:80px;
}

.Comes {
	display:block;
	position:relative;
	top:20px;
	z-index:3;
	margin:auto;
	margin:30px auto 10px auto;
	padding:7px;
	width:400px;
	height: 50px;
	text-align:center;
	font-size: 17px;
	border:2px hidden #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	background-color: white;
	color:red;
	opacity:1;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	
}

.Comes2 {
	display:block;
	visibility:visible;
	position:relative;
	top:40px;
	z-index:3;
	top:0px;
	margin:auto;
	margin:50px auto 10px auto;
	padding:7px;
	width:340px;
	height: 50px;
	text-align:center;
	font-size: 17px;
	border:1px solid #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	background-color: white;
	color:red;
	opacity:1;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	
}

.Comes3 {
	display:block;
	visibility:visible;
	position:relative;
	top:80px;
	z-index:3;
	top:0px;
	margin:auto;
	margin:30px auto 10px auto;
	padding:7px;
	width:340px;
	height: 50px;
	text-align:center;
	font-size: 17px;
	border:1px solid #f8f8ff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	background-color: white;
	color:red;
	opacity:1;
	box-shadow: 20px 20px 18px 2px white, -20px -20px 18px 2px white, -20px 20px 18px white, 20px -20px 18px white;
	
}


}