/*-----General-----*/
:root {
	--pink: #ff0066;
	--orange: #ff6a00;
}

* {
	margin: 0;
	padding: 0;
	font-family: nunito sans, sans-serif;
	transition: ease-in-out;
	transition-duration: 150ms;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;


}

body,html {
	height: calc(100% - 40px);
}

*:focus {
	outline: none;
	border: none;
}

.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}


h2 {
	color: #ffffff;
	text-align: center;
	padding: 30px 0;
	font-size: 2em;
}

h3 {
	color: #ffffff;
	text-align: center;
	padding: 10px 0;
}

p {
	color: #555555;
}

a {
	color: #ffffff;
	font-weight: 600;
}

a:hover {
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

a:active {
	transform: scale(0.95);
}

button,
input[type=button],
input[type=submit] {
	border: none;
	padding: 10px 30px;
	font-weight: 600;
	border-radius: 999999px;
	background-color: #ffffff;
	color: var(--pink);
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
	cursor: pointer;
}

.button-color {
	background: linear-gradient(30deg, var(--pink), var(--orange));
}

.btn-outline {
	background: none;
	border: 2px solid #ffffff;
	color: #ffffff;
	box-sizing: border-box;
	padding: 8px 28px;
}

button:active,
input[type=button]:active,
input[type=submit]:active {
	transform: scale(0.98);
}

input::placeholder {
	color: #ffffff;
}

button:hover,
input[type=submit]:hover,
button:focus,
input[type=submit]:focus {
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

input[type=text],
input[type=email],
input[type=password] {
	padding: 10px 30px;
	border-radius: 999999999px;
	width: 100%;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.2);
	color: #ffffff;
	border: none;
	margin-bottom: 10px;
}

input[type=text]:hover,
inuput[type=text]:active,
input[type=text]:focus,
input[type=email]:hover,
inuput[type=email]:active,
input[type=email]:focus,
input[type=password]:hover,
inuput[type=password]:active,
input[type=password]:focus {
	background: rgba(0, 0, 0, 0.5);
}

/*-----header-----*/

.header {
	padding: 5vw 5vw 30px 5vw;
	width: 100%;
	text-align: left;
	display: table;
}

.logo {
	color: #ffffff;
	font-weight: 900;
	font-style: italic;
	font-size: 2em;
	letter-spacing: 2px;
	display: table-cell;
	vertical-align: middle;
}

.nav {
	float: right;
}

.nav button {
	margin-right: 10px;
}

.nav button:last-child {
	margin-right: 0;
}

/*-----footer-----*/

.footer {
	background-color: #000000;
	padding: 20px;
	display: flex;
	text-align: center;
	align-items: center;
}

.footer-logo {
	display: inline-block;
}

.footer-items {
	flex: 1;
}

.footer a {
	color: #ffffff;
}

.footer ul li a {
	font-size: 0.8em;
}

.footer a:hover {
	color: var(--pink);
	background: -webkit-linear-gradient(30deg, var(--pink), var(--orange));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}

.footer-logo {
	float: none;
}

.footer ul li:first-child {
	margin-bottom: 5px;
}

/*-----steps-----*/

.step {
	width: 90%;
	max-width: 500px;
	margin: 20px auto;
	border-radius: 20px;
	display: flex;
	text-align: left;
}

.step-no {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px 0 0 10px;
	padding: 0 15px;
	margin-right: 5px;
}

.step-no p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #ffffff;
	font-weight: 600;

}

.step-description {
	background: rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-radius: 0 10px 10px 0;
	flex: auto;
}

.step-description p {
	color: #ffffff;
}

.tip {
	width: 90%;
	max-width: 500px;
	margin: auto;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	padding: 10px;
	text-align: left;
}

.seperator {
	color: #ffffff;
	font-weight: 600;
	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	margin: 30px 0;
}

/*-----home page-----*/

.top-container {
	background: linear-gradient(30deg, var(--pink), var(--orange));
	text-align: center;
	padding-bottom: 30px;
	min-height: 100%;
}

.top-container p {
	color: #ffffff;
}

.hero {
	width: 90%;
	margin: auto;
}

.tagline {
	font-size: 1.5em;
	margin: 30px auto;
	font-style: italic;
	font-weight: 600;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.hero button {
	margin: 5px auto 10px auto;
}

.popup-action-logout {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 5px;
	margin: 0px;
	border-radius: 0.5em;
	text-align: center;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #030200e3;

	display: none;

}

.popup-action-logout button {
	padding-right: 50px;
	padding-left: 50px;
	margin: 5px;
}

/*-----about-----*/

.about {
	background-color: #ffffff;
	padding-bottom: 30px;
	width: 90%;
	max-width: 480px;
	margin: auto;
}

.about h2 {
	color: #f50669;
	background: -webkit-linear-gradient(30deg, var(--pink), var(--orange));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*-----how it works-----*/

.how-it-works {
	background: linear-gradient(30deg, var(--pink), var(--orange));
	padding-bottom: 30px;
}

.how-it-works h2 {
	padding-bottom: 0;
}

/*-----create Survey / answer survey-----*/

.survey-form,
.signup-form {
	margin: auto;
	width: 90%;
	max-width: 500px;
	margin-bottom: 30px
}

.survey-form input,
.survey-form button {
	margin-bottom: 10px;
	width: 100%;
}

.survey-question {
	color: #ffffff;
	width: 100%;
	display: inline-block;
	margin: 10px 0;
	padding: 8px 28px;
	font-weight: 600;
	font-style: italic;
	border: solid 2px #ffffff;
	border-radius: 28px;
}

.question-input,
.answer-input {
	width: 100%;
}

#pop-up-container {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	position: absolute;
	top: 0;
	display: none;
}

#submit-box,
#answer-box {
	display: none;
	text-align: center;
	border-radius: 10px;
	width: 90vw;
	max-width: 500px;
	background: linear-gradient(35deg, #f50669, #e0390f);
	padding: 20px;
	position: relative;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
}

#submit-box input[type=button],
#answer-box input[type=button] {
	margin-top: 20px;
	width: 100%;
}

.account-signin-signup {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 13px;
	margin: 10px;
	border-radius: 0.5em;
	text-align: center;
	width: 75%;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #000003f3;

	display: none;
}


.copy-notify {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 10px;
	margin: 10px;
	border-radius: 0.5em;
	text-align: center;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #030200e3;
	display: none;
	font-size: 0.5em;

}

.popup-action-already-attempted {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 5px;
	margin: 0px;
	border-radius: 0.5em;
	text-align: center;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #000000fa;
	font-size: 0.8em;
	display: none;

}


/*-----link------*/

#heading a {
	color: #ffffff;
	width: 90%;
	max-width: 500px;
	margin: auto;
	display: flex;
	background: rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-radius: 10px;
	hyphens: auto;
	font-size: .5em;
	justify-content: center;
}

#heading a:active {
	transform: none;
}

/*-----dashboard page-----*/

.surveys-listing-container {
	text-align: center;

}

.surveys-listing {
	border-radius: 10px;
	overflow: hidden;
	perspective: 1px;
	background: #ffffff;
	box-shadow: -12px 12px 2px 1px rgba(15, 8, 8, 0.2);
	display: inline-block;
	margin: 6px;
	padding: 0px;
	color: rgb(34, 32, 32);
	width: 200px;
}

.survey-topic {
	background: linear-gradient(-85deg, rgb(44, 187, 223), rgb(74, 94, 160));

}

.survey-topic-text {
	margin-top: 0px;
	padding: 0px;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #ffffff;
	font-size: 2em;
	font-weight: 500;
}

/* time and date */

.time-and-date-wrapper {

	margin-top: 0px;
	display: flex;
	font-weight: 500;

}

.time {
	background: #fcfcfc;
	float: left;
	width: 50%;
	overflow: hidden;
	padding: 10px;
}

.date {
	background: #ffffff;
	float: left;
	width: 50%;
	overflow: hidden;
	padding: 10px;
}

/* copy and delete */
.survey-icons {
	width: 40px;
	height: 40px;
}

.copy-and-delete-wrapper {
	margin-top: 0px;
	display: flex;
	height: 60px;
}

.copy {
	background: linear-gradient(-85deg, rgb(236, 214, 89), rgb(210, 233, 6));
	float: left;
	width: 50%;
	overflow: hidden;
	padding: 20px;
}

.delete {
	background: linear-gradient(-85deg, rgb(235, 69, 69), rgb(231, 72, 24));
	float: left;
	width: 50%;
	overflow: hidden;
	padding: 20px;
}

.popup-action-delete {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 5px;
	margin: 0px;
	border-radius: 0.5em;
	text-align: center;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #000000d3;
	font-size: 0.6em;
	display: none;
}

.popup-action-copy {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 15px;
	margin: 0px;
	border-radius: 0.5em;
	text-align: center;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 70%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #000000d3;
	font-size: 0.8em;
	display: none;

}

.popup-action-copy-link {
	color: #ffffff;
	width: 100%;
	max-width: 500px;
	margin: auto;
	margin-bottom: 10px;
	display: flex;
	background: rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-radius: 10px;
	hyphens: auto;
	font-size: 1.3em;
	justify-content: center;

}

/*-----result page-----*/

.result {
	padding: 20px 5%;
}

.question,
.answer {
	color: #ffffff;
	text-align: left;
	margin: 0px;
	vertical-align: middle;
}

.answer {
	color: #ffffff;
	font-weight: 700;
	border-radius: 0.2em;
	margin-bottom: 10px;
}

#CopyBtn {
	display: none;
	margin-bottom: 15px;
	width: 100%;
}

.rainbow {
	background-image: -webkit-gradient(linear, left center, right center, color-stop(0, rgb(183, 215, 15)), color-stop(0.15, rgb(255, 223, 0)));
	background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f));
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	float: left;
	margin-left: 4px;
	margin: 3px;
}

.Ublock {
	display: table;
	float: left;
	margin: 0px;
	padding: 0px;
}

.OneAnswerWrapper {
	margin-left: 1em;
	display: flex;
	vertical-align: middle;
}

#Last_Results_Popup_Box {
	color: white;
	background: linear-gradient(45deg, rgb(233, 39, 39), rgb(255, 0, 85));
	padding: 13px;
	margin: 10px;
	border-radius: 0.5em;
	text-align: center;
	width: 75%;
	position: fixed;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 30px 30px 0px 200vh #000003f3;

	display: none;
}

/*-----signup-----*/

.signup-form input {
	width: 100%;
	margin-bottom: 10px;
}

.alternative-signup button {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.alternative-signup button img {
	height: 15px;
	vertical-align: middle;
	margin-right: 20px;
}


/*-----Password Reset------*/









/*-----responsive------*/

@media only screen and (min-width: 540px) {

	.header {
		padding: 30px;
	}

	.tagline {
		margin-top: 10px;
	}

}

@media only screen and (max-width:425px) {

	.logo {
		display: block;
		text-align: center;
	}

	.nav {
		text-align: center;
		float: none;
		margin-top: 10px;
		display: flex;
	}

	.nav a {
		flex: auto;
	}

	.nav a button {
		width: 95%;
	}

	.footer {
		display: block;
	
	}

	.footer-logo {
		margin-bottom: 10px;
		display: block;
		text-align: center;
	}
}