:root {
    --login-color: #00b9d7;
    --login-bgColor: #008400;
    --register-color: #00b9d7
}

html{
	font-size: clamp(12px, 1.1vw,20px);
	background-color: #752c9e
}
body{
	margin: 0;
	font-family: Arial, sans-serif;
	font-weight: bold;
	background-color: #379886;
    transition: background-color 3s ease-in-out;
	position: relative;
	z-index:0
}

button{
	font:inherit;
	cursor:pointer

}
input{
	font:inherit
}
*::selection{
    color: #00e6db;
    background-color: #09594e
}
a[href='/premium']{
	text-decoration: none
}
.gap-1{
	gap: 1.5em
}
.wrapper1{
	display:grid;
	grid-template-columns: 1fr;
	place-items: center
}
h1{
	color: snow;
	text-shadow: 0.1em 0.1em #000;
	text-align: center;
	font-size: 1.5rem;
	padding: 1em;
	margin: 0px 0px;
}
.loginbox , .register{
    border:1px solid black;
    border-radius: 30px;
	gap: 1.5em
}
.loginbox{
	background-color: green;
}
.register {
    background-color: #1d7d1f;
}

.flex-row {
    display:flex;
	gap:1.5em;
	justify-content:center;
	flex-wrap: wrap
}
.flex-col {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.flex-col2 {
    display: flex;
    flex-direction: column;
}
.flex-elm50 {
    flex-basis:50%;
    align-items: center
}
.at3{
	align-items:flex-start
}
#main{
	align-items: baseline
}
#registerBox{
gap:0.5em
}
#registerBox > h2{
	color:yellow; font-size:clamp(0.5rem, 7vw + 1rem, 2.5rem); padding: 5px 10px; background-color: #686800;margin:0px; margin-top:0.1em; border: 2px solid black
}
#registerForm > div:nth-child(-n+4) {
	gap: 0.5em; width: 100%
}
#response, #response2, #response3{
	border-radius:7px;text-align:center;padding:0.2em;margin-top:0.3em;font-size:1.5rem;color:red; background-color:black; display:none
}
#response{
 color: #0AF90A;
}
#response3{
	width:auto
}
img[onclick*="locat"]{
	max-width: 100%;
	cursor:pointer
}
#header{
	background-color: #d8143b;
	width: 80%;
	margin-inline: auto;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 7px 7px 0px 0px;
	border-inline: 3px solid #000;
	border-top: 3px solid #000
}
#registerForm > div:nth-child(-n+4) > input, .cap > input{
    padding: 0.1em;    
    border: 1px solid black;
    background-color: black;
    color: yellow;
    border-radius: 15px;
	align-self:center; flex-grow: 0.8; font-size: 1.5rem
}
#loginForm > div > input{
    padding: 5px;
    margin-left: 9px;
    border: 1px solid black;
    font-size: 1.5rem;
    background-color: black;
    color: lime;
    border-radius: 15px;
	align-self:center; flex-grow:0.8
}

#loginForm > div > label {
	text-align:center;
    padding: 0.1em;
    border: 2px solid rgba(23,74,40,1);
    font-size: 1.5rem;
    border-radius: 7px;
	color: black; background-color: var(--login-color); flex-basis: 40%;
}
#registerForm > div > label {
    padding: 0.1em;
    border: 2px solid rgba(23,74,40,1);
    font-size: 1.5rem;
    color: black;
	text-align:center;
    background-color: var(--register-color);
    border-radius: 7px;
	flex-basis: 40%;
}
#registerForm > div:nth-child(1) {
    margin-top: 1em
}
#loginForm > div:nth-child(1){
	margin-top: 1em
}
#logbutton {
    margin: 0.3em;
    padding: 0.7em 2em;
    font-size: clamp(0.5rem, 1.1vw + 1rem, 1.7rem);
    background-color: lime;
    border-radius: 12px;
    border: 2px solid black;
    cursor:pointer;
}
    #logbutton:hover {
        box-shadow: 5px 5px rgba(0,0,0,0.55);
    }
.transitionIt {
    transition: background-Color linear 1s;
}

#registerbutton {
    margin: 0.3em;
    padding: 0.7em;
    font-size: clamp(0.5rem, 1.1vw + 1rem, 1.5rem);
    background-color: yellow;
    border-radius: 12px;
    border: 2px solid black;
    cursor: pointer;
	align-self:center
}
    #registerbutton:hover {
        box-shadow: 5px 5px rgba(0,0,0,0.55);
    }
	
.hide{
	display:none
}

#captcha2{
	color:lime
}
.buttons {
	font-size: 2em;
    align-self:center;
    border: dashed
}
    .buttons:hover, .buttons:active {
        border:double;transform:scale(1.1)
    }
#goBack {
    color:red;
    background-color:#750000;
	font-size: clamp(0.75rem, 4vw + 0.5rem, 2.5rem);
    align-self:center;
    border: dashed;
	padding: 0.4em	
}
#registerBtn {
    color:yellow;
    background-color:#686800;
	width: 10em;
	height: 2em
}
#loginBtn {
    color: lime;
    background-color: #006e00;
	width: 10em;
	height: 2em
}
#guest-btn{
	color: #20dbdd;
    background-color: #184d4d;
	width: 10em;
	height: 2em	
}
#g_id_signin{
	width: 100%;
	max-width: 315px;
	margin: 0 auto
}
#login{
	gap: 0.5em; align-content: center
}
#login > h2{
	color: lime; font-size:clamp(0.5rem, 7vw + 1rem, 2.7rem); padding: 5px 10px; background-color: var(--login-bgColor); margin-top: 15px; border: 2px solid black
}

.jc1{
	justify-content:center
}
.hidden{
	opacity: 0
}
.bg-img{
	grid-row: 2;grid-column: 1;
	max-width:80%;
	height: auto;
	z-index: -1;
	transition: opacity 500ms ease-in-out;
	border-inline: 3px solid #000;
	border-bottom: 3px solid #000
}

.margin-img {margin-bottom: 3.7em}
#wrapper{
    background-repeat: round;align-items:center;
	justify-content:center;
	grid-row:2; grid-column: 1
}
#logo {    
    max-width: 100%
}

#news{
	color: #fff;
	font-size: 1.8em;
	text-shadow: 5px 5px 5px #000;
	cursor: pointer;
	text-decoration:none
}
#premium{
	color: #e1e137;
	text-shadow: 5px 5px 5px #000;
	font-size: 1.8em;
	cursor: pointer
}
@property --angle{
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
#patreon{
	color: #000;
	text-shadow: 0px 0px 5px #fff;
	font-size: 1.8em;
	cursor: pointer;
	text-decoration: none;
	padding: 0.2em;
	background-image: conic-gradient(from var(--angle), #ff8f04, #c100008a);
	animation: patr 5s linear infinite;
	border-radius: 7px;
	border: 2px solid #000
}
@keyframes patr{
	to{
		--angle: 360deg;
	}
}
a[href*=reset]{
	font-size: 1.3rem
}
#newsletter{
	width: 1.3rem;
	height: 1.3rem;
	accent-color: var(--register-color);
	cursor: pointer
}
label[for*=news]{
	cursor:pointer
}
.agree{
	font-size: 1.2rem;
	width: 100%;
	text-align:center;
	gap:0.5rem
}
#wrapper2{
    border: 7px dotted; font-size: 2rem;
	position:relative;padding:1em;gap:1em;justify-content:center; display:flex; flex-wrap: wrap;background-color:#4c1d7b; align-content: center; max-width:10em
}
#wrapper2 > button{
	font-size: clamp(0.75rem, 2.5vw + 0.5rem, 2rem)
}
	
img[src*=captcha]{
	border: 3px solid #000
}
a:link {
    color:lightblue
}
a:visited {
	color:lightblue
}
#footer > a:visited {
    color:lightblue    
}
    #footer > a:hover {
        color:#e4f5ff
    }

.openinga {
    animation-name: openingAnim2;
    animation-duration: 0.5s;
    animation-direction:unset;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes openingAnim2 {
    0% {
        opacity: 0;
    }
    50%{
        opacity:0;
    }
    100% {
        opacity: 1;
    }
}

#loginForm > div{
	gap: 0.5em; width: 100%
}
.at1{
	align-items:center
}
.at2{
	align-items:baseline
}
	
@media (max-width: 430px){
	#registerForm > div > label{
		flex-basis: auto
	}

}
@media (max-width: 472px){
	#loginForm > div > label {
		flex-basis: auto
	}
}
@media (max-width: 1012px){
	#wrapper{
		grid-row:3;
		margin-top: 1em
	}
	.bg-img{
		max-width: 90%;
		margin-bottom: 0px
	}
	#header{
		width:90%
	}
	
}