@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root {
	--font-head: clamp(2.81rem, calc(2.43rem + 1.92vw), 4.06rem);
	--font-sub: clamp(1.25rem, calc(1.10rem + 0.67vw), 1.75rem);
	--font-copy: clamp(0.81rem, calc(0.72rem + 0.48vw), 1.13rem);
	--font-small: 12px;
	--primary-color: #F4AC38;
	--background-color: #1D1E1E;
}


*{
	margin:0;
	padding:0;
	border:0;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

body,html{
	height: 100%;
	background: var(--background-color);
}

h1, h2{
	font-size: var(--font-head);
	font-weight: 700;
	margin:  20px 0;
	line-height: 110%;
}

h3{
	font-size: var(--font-sub);
	font-weight: 100;
	letter-spacing: 0.01em;
	line-height: 110%;
}

h4{
	font-size: var(--font-sub);
	font-weight: 300;
	margin:  20px 0;
	line-height: 150%;
}

a{
	display: inline-block;
	text-decoration: none;
	position: relative;
	font-size: var(--font-copy);
	cursor: pointer;
	font-weight: 300;
	transition: ease 0.25s;
}

a:hover{
	color: var(--primary-color) !important;
}

a:after{
	content:  '';
	width:  100%; height:  1px;
	bottom:  -5px;left: 0;
	background: #fff;
	position: absolute;
	opacity: 0.4;
	transition: ease 0.25s;
}

p{
	font-size: var(--font-copy);
	font-weight: 100;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    font-size: var(--font-sub) !important;
    -webkit-text-fill-color: #fff !important;
}

input, input:focus, input:-webkit-autofill{
	background: transparent !important;	
	background-color:  transparent !important;
	-webkit-text-fill-color: #fff !important;
}

input{
	width: 100%;
	max-width: 400px;

	margin:  0 auto;
	outline:  none;
	padding: 15px 20px;
	font-size: var(--font-sub);
	color:  #fff;
	font-weight: 300;
	text-align: center;
}

.center{
	text-align: center;
}

.logo{
	width:  75px;
	height:  75px;
	background-image: url(appicon.png);
	border-radius: 10px;
	background-position: center;
	background-size: cover;
	position: fixed;
	display: inline-block;
	top: 20px;
	left:  2.5%;
	z-index: 9001;
	text-decoration: none;
}

.logo:after{
	display: none;
}

.feature{
	width: 100%;
	height: 100vh;
	background: var(--background-color);
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	margin: 0 auto;
	color:  #ECEAEC;
}

.feature p{
	margin:  10px 0;
}

.feature-col{
	width: 48%;
	flex-basis: 48%;
	text-align: left;
	padding: 0 2.5%;

}

.feature-col h2{
	max-width: 600px;
	margin-bottom: 30px;
}


.feature-col p{
	max-width: 500px;
}

.feature-col.previews{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ECEAEC;
	padding: 0;
}

.feature-image{
	text-align: center;
}

.feature-image p{
	color: var(--background-color);
	max-width: 300px;
	margin: 0 auto 30px auto;
	font-weight: 800;
	font-size: var(--font-sub);
}

.feature-image img{
	width: 75%;
	max-width: 350px;
	margin:  0 auto;
	box-shadow: 20px 20px 30px #959595;
    border-radius: 14px;
}

.privacy-policy-footer{
	width:  100%;
	text-align: center;
	padding: 70px 0;
	background: #0f0e0e;
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 20px;
}

.privacy-policy-footer a{
	color: #fff;
}

.copywright{
	flex-basis: 100%;
	margin-top: 20px;
	font-size: var(--font-small);
	color:  #fff;
}


.section{
	flex-basis: 100%;
	padding:  100px 2.5%;
	background-color: #ECEAEC;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
}

.section:after{
	content: '';
	position: absolute;
	width: 100%;height: 100%;
	background-color: var(--background-color);
	top: 0;left: 0;
	opacity: 0.8;
}

.section-content{
	max-width: 600px;
	margin:  0 auto;
	color: #ECEAEC;
	position: relative;
	z-index: 2;
}

.glass{
  background-color: #0a0a0a80;
  border-radius: 10px;
  cursor: pointer;
  margin: 15pt auto;

  backdrop-filter: blur(10px) saturate(170%);

  padding: 20px;
}

.appstore-link{
	text-decoration: none;
	margin-top: 50px;
}

.appstore-link:after{
	display: none;
}

@media all and (max-width: 968px) {

	.feature{
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 160px 0 0 0;
		height: auto;
	}

	.feature-col{
		width: 100%;
		flex-basis: 100%;
		height: auto;
		padding:0 2.5% 100px 2.5%;
		text-align: center;
	}

	.feature-col h1, .feature-col h2, .feature-col h3{
		text-align: center;
	}

	.feature-col.previews{
		padding: 40px 0 0 0;
	}

	.feature-col h2{
		margin:  0 auto;
	}

}


/**** ADMIN ****/

.content{
	width: 90%;
	height: 100vh;
	background: var(--background-color);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	margin: 0 auto;
	max-width: 500px;
}


.action-box{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    align-items: baseline;
    margin-bottom: 30px;
}


.admin-actions p{
	width:  100%;
	color: #fff;
}

.admin-actions input[type="text"]{
	text-align: left;
	padding: 10px 0 0 0;
	margin:  0;
}

.admin-actions input[type="number"]{
    text-align: center;
    width: 90px;
    padding: 10px 0 0 0;
    margin: 0;
}

.action-btn{
	margin-top: 20px;
	width: 100%;
	color:  var(--primary-color);
}

.action-btn:hover:after{
	width: 20%;
	background:  var(--primary-color);
}


#pending-reports{
	width: 100%;
	background: #0f0e0e;
	position: relative;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	text-align: center;
	margin: 0 auto;
}


.report{
	margin: 30px auto;
	width: 90%;
	max-width: 500px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}


.report-details{
	flex-basis: 100%;
	margin: 10px 0;
	font-size: var(--font-copy);
	color: #fff;
	opacity: 0.25;
	font-size: var(--font-small);
	text-align: left;
}

.report-addl{
	flex: 1;
	color: #fff;
	text-align: left;
	padding-right: 20px;
}

.report-reason{
	background: var(--background-color);
	color: var(--primary-color);
	padding:  5px 25px;
	border-radius: 200px;
	font-size: var(--font-small);
	font-weight: 600;
	text-transform: uppercase;
}

.report-actions{
	display:  flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	flex-basis: 100%;
	margin-top: 15px;
}

@media all and (max-width: 968px) {


}