/*
Theme Name: My Blank Theme
Author: You
Version: 1.0
*/

a {text-decoration:none;color:#fff;}
ul {margin:0;padding:0;}
ul li {list-style-type:none;}
img {max-width:100%;}
input, select, textarea {
	background:none;
	border:none;
	font-family: "IBM Plex Mono", monospace;
	font-weight: 500;
	font-style: normal;
    color: #d1d5db;
	padding-left:20px;
	padding-right:20px;
	width:90%;
}

::placeholder {
	color: #abb0b3;
}

input:focus {
  outline: none;
}

#message {color:red;}

.stores {width:80%;clear:both;margin:auto;padding-top:60px;}
.store {width:17.5%;float:left;background-image:url('bg_store.png');background-size:100% auto;background-repeat:no-repeat;height:100px;margin-right:20px;text-align:center;}
.store:last-of-type {margin-right:0;}
.store_inner {padding-left:20px;padding-right:20px;}
.store_icon {height:100px;background-size:100% auto;background-position:center;background-repeat:no-repeat;}
.store_amazon {background-image:url('logo_amazon.png');}
.store_walmart {background-image:url('logo_walmart.png');}
.store_target {background-image:url('logo_target.png');}
.store_homedepot {background-image:url('logo_homedepot.png');width:60%;margin:auto;}
.store_bestbuy {background-image:url('logo_bestbuy.png');}

.form_row {width:100%;float:left;clear:both;margin-top:20px;}
.form_col_50 {width:47.5%;float:left;}
.form_col_50_1 {margin-right:2.5%;}
.form_col_50_2 {margin-left:2.5%;}
.form_col_33 {width:31.6667%;float:left;margin-right:2.5%;}
.form_col_33:last-of-type {margin-right:0;}
.form_col_inner {border: 1px solid #abb0b3;border-radius:3px;padding-top:15px;padding-bottom:15px;}

.card_number_icon {width:30px;float:left;padding-left:20px;}
#card-number {padding-left:60px;}

.submit_button {width:fit-content;margin:auto;display:block;background:url('bg_btn_join.png');background-size:100% 100%;width:200px;height:72px;color:#fff;text-align:center;font-family: "Press Start 2P", system-ui;text-transform:uppercase;border:none;}
.submit_button:hover, .btn_join:hover {cursor:pointer;}

.stripe-box {padding: 0 20px;}

body {
	background-color:#000;
	color:#fff;
	font-size: 14px;
    margin: 0;
    padding: 0;
    font-family: "IBM Plex Mono", monospace;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
}

h1, h2, h3 {
	font-family: "Press Start 2P", system-ui;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 1px;
	text-transform:uppercase;
}

.main_container {max-width:1200px;margin:auto;}
.top {width:100%;float:left;clear:both;}
.top_left, .top_right {width:25%:float:left;}
.top_middle {width:50%;float:left;display:flex;flex-direction:row;justify-content:center;}
#logo {width:300px;float:left;}
.main_navigation {width:fit-content;float:left;margin-top:70px;}
.main_navigation ul li {display:block;width:fit-content;float:left;margin-right:20px;text-transform:uppercase;}
.main_navigation ul li:hover {cursor:pointer;}
.main_navigation ul li:last-of-type {margin-right:0;}


.main_navigation li a {
	font-family: "Press Start 2P", system-ui;
	font-weight: 300;
	font-style: normal;
	color:#fff;
}

.join_container {width:fit-content;float:right;}

.main_header, .mobile_header {width:100%;float:left;clear:both;min-height:650px;background:url('bg_header_5.png');background-size:100% auto;background-repeat:no-repeat;}
.main_header_text, .mobile_header_text {text-transform:uppercase;font-size:36px;}

.mobile_header {background:url('testino2.png');background-size:100% auto;background-repeat:no-repeat;display:none;min-height:530px;}

.intro {margin-top:350px;width:40%;float:left;font-size:24px;}
.intro_inner {padding-left:60px;padding-right:60px;}

.btn_join {font-size:16px;color:#fff;text-align:center;text-transform:uppercase;letter-spacing:1px;margin-top:20px;font-family: "Press Start 2P", system-ui;font-weight: 300;font-style: normal;background:url('bg_btn_join.png');background-size:100% 100%;width:200px;}
.btn_join_inner {padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;}
.join_container .btn_join {margin-top:60px;}

footer {width:100%;float:left;clear:both;text-transform:uppercase;
	font-family: "Press Start 2P", system-ui;
	font-weight: 400;
	font-style: normal;

}
.footer_inner {padding-top:20px;}
.footer_left {width:50%;float:left;}
.happyface {width:50px;float:left;margin-right:10px;}
.footer_left_text {width:fit-content;float:left;}
.footer_right {width:50%;float:right;}
.socials {width:fit-content;float:right;}
.social {width:50px;float:left;margin-right:10px;}
.footer_right {width:50%;float:right;}

#about, #contact, .misc_div {display:none;}
.misc_div {width:100%;float:left;clear:both;}
#home {display:block;}

textarea {resize:none;}

.about_container, .features_container, .reviews_container, .subscribe_container {width:100%;float:left;clear:both;margin-top:40px;}
.about_container h3, .features_container h3, .reviews_container h3, .subscribe_container h3 {font-size:24px;text-align:center;text-transform:uppercase;}
.about_container h3 {text-align:left;}
.about {width:80%;margin:auto;}
.about_left {background-image:url('icon_about.png');background-size:100% auto;background-repeat:no-repeat;height:250px;width:35%;float:left;margin-right:5%;}
.about_right {width:60%;float:left;}
.about_right_inner {padding-left:20px;padding-right:20px;padding-top:20px;}

.features_container {text-align:center;}
.feature {width:25%;float:left;height:250px;position:relative;}
.feature_inner {}
.feature_text {position:absolute;bottom:0;left:0;width:100%;text-align:center;}
.feature h4 {text-transform:uppercase;font-family: "Press Start 2P", system-ui;font-weight: 400;font-style: normal;}
.feature_icon {height:150px;background-size:contain;background-repeat:no-repeat;background-position:center;}
.icon_deals {background-image:url('icon_deals.png');}
.icon_robot {background-image:url('icon_robot.png');}
.icon_community {background-image:url('icon_community.png');}
.icon_savings {background-image:url('icon_savings.png');}

.review {width:33.333333%;float:left;}
.review_left {width:45%;float:left;}
.review_avatar {height:150px;background-size:contain;background-repeat:no-repeat;background-position:center;}
.avatar_one {background-image:url('icon_review_avatar_1.png');}
.avatar_two {background-image:url('icon_review_avatar_2.png');}
.avatar_three {background-image:url('icon_review_avatar_3.png');}
.review_right {width:55%;float:left;}
.reviw_right_inner {padding-left:20px;padding-right:20px;}
.review_rating {width:100px;}
.review_author {margin-top:10px;}

.subscribe {width:65%;margin:auto;}
.subscribe_top {text-align:center;}
.subscribe_text {width:50%;margin:auto;}
.subscribe_left {width:40%;float:left;}
.subscribe_right {width:60%;float:left;}
.payment_method {margin-bottom:6px;}
.secure {width:100%;float:left;clear:both;margin-top:10px;}

.burger {width:fit-content;font-size:30px;float:right;margin-top:35px;}
.mobile_navigation {position:absolute;left:0;top:0;width:100%;height:100%;background:black;z-index:999;}
.mobile_navigation_inner {position:relative;width:100%;float:left;clear:both;background:black;}
.mobile_navigation_padding {padding:20px;}
.mobile_navigation_menu {width:100%;float:left;clear:both;margin-top:20px;}
.mobile_navigation li {margin-bottom:10px;padding-bottom:10px;padding-top:10px;border-bottom:1px solid #282726;}
.mobile_navigation li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-family: "Press Start 2P", system-ui;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 1px;
	text-transform:uppercase;
}
.mobile_navigation li a::before {
	content: "";
	width: 48px;
	height: 48px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: pixelated;
	flex-shrink: 0;
}

.mobile_navigation li.nav_home a::before {
	background-image: url("icon_mobilemenu_home.png");
}

.mobile_navigation li.nav_join a::before {
	background-image: url("icon_mobilemenu_join.png");
}

.mobile_navigation li.nav_faq a::before {
	background-image: url("icon_mobilemenu_faq.png");
}

.mobile_navigation li.nav_articles a::before {
	background-image: url("icon_mobilemenu_articles.png");
}

.mobile_navigation li.nav_contact a::before {
	background-image: url("icon_mobilemenu_contact.png");
}

.mobile_navigation li a::after { 
	content: "›";
	font-family: "Press Start 2P", monospace;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	text-shadow: 3px 3px 0 #111;
	margin-left: auto;
}
#mobile_logo {width:75%;float:left;}
.close {position:absolute;top:20px;right:20px;font-size:24px;width:40px;}
.burger, .mobile_navigation {display:none;}
.mobile_join {width:100%;float:left;clear:both;}
.mobile_footer {margin-top:20px;margin-bottom:20px;width:100%;float:left;clear:both;}
.mobile_footer, .socials h4 {text-transform:uppercase;}
.footer_left_text {padding-top:10px;}
.mobile_navigation .mobile_join, .mobile_navigation .socials {border-bottom:1px solid #282726;padding-bottom:20px;}
.mobile_join .btn_join {margin-top:10px;}
.test_btn {
	display: inline-block;
	padding: 22px 60px;
	background:
		linear-gradient(
			to bottom,
			#ff8c8c 0%,
			#ff4d4d 8%,
			#ff1f1f 15%,
			#ff0d0d 100%
		);

	border: 4px solid #b30000;

	box-shadow:
		/* outer dark border */
		0 0 0 4px #8a0000,

		/* top highlight */
		inset 0 4px 0 rgba(255,255,255,.45),

		/* bottom shadow */
		inset 0 -4px 0 rgba(0,0,0,.25),

		/* left highlight */
		inset 4px 0 0 rgba(255,255,255,.15),

		/* right shadow */
		inset -4px 0 0 rgba(0,0,0,.15);

	font-family: "Press Start 2P", monospace;
	font-size: 32px;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 3px 3px 0 rgba(0,0,0,.25);

	position: relative;
}


@media screen and (max-width: 768px) {
	.top_middle {display:none;}
	.top_left, .top_right {width:50%;}
	.top_right {float:right;}
	.top .inner {padding-left:30px;padding-right:30px;padding-top:10px;padding-bottom:10px;}
	#logo {width:fit-content;}
	.main_navigation {display:none;}
	.main_header {min-height:unset;background-size:auto 100%;}
	.main_header_inner, .mobile_header_inner {width:100%;float:left;padding-bottom:20px;}
	.burger {display:block;}
	.intro {width:100%;position:absolute;bottom:20px;left:0;font-size:18px;}
	.intro_inner {padding-left:20px;padding-right:20px;}
	.feature, .review, .subscribe {width:100%;float:left;clear:both;margin-bottom:20px;}
	.footer_left, .footer_right, .socials {width:100%;float:left;clear:both;}
	.stores {display:none;}
	.subscribe_text {width:80%;}
	footer {display:none;}
	.about, .about_left, .about_right {width:100%;float:left;clear:both;}
	.about_container h3 {text-align:center;}
	.about_right_inner {padding-left:0;padding-right:0;}
	.subscribe {}
	.join_container .btn_join {display:none;}
	.inner {padding-left:20px;padding-right:20px;}
	.form_col_33 {width:100%;margin-right:0;margin-bottom:10px;}
	.btn_join {font-size:14px;}
	.main_header {display:none;}
	.mobile_header {display:block;position:relative;}
}