.age-verification {
    background-image: url('../images/age_verification.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    margin: 0;
    color: var(--ui-color-white);
    background-color: var(--ui-color-black); 
}

.container {
    position:relative;    
    width: 330px;    
    top: -10%;
    left : 50%;
    transform: translate(-120%, 25%);    
}
.logo           { width: 100%;    }
.logo img       { max-height:100px; left: 50%; transform: translateX(-50%); position: relative; }
.age-line       { width: 100%; height:30px;    }
.age-line img   { width:330px; left: 50%; transform: translateX(-50%); position: relative; cursor:pointer }
.age-line a     { color:#fff;}
.date-part      { width: 32px;border: none; outline: none;background: transparent;padding: 0;margin: 0;color: var(--ui-color-white);font-family: inherit;font-size: 14px;text-align: center;}
    .date-part::placeholder { color: var(--ui-color-white); opacity: 1; }

@media (min-aspect-ratio: 0.9/1) and (max-aspect-ratio: 1.2/1) {
	.age-verification {
		background-size: cover;
		 
	}

    .container {
        width: 260px;
        top: -20%;
    }
    .age-line img {
        width: 260px;
    } 
}

@media (max-width: 600px) {
    .age-verification {
        background-position: 87% 25%;
        background-size: auto auto;
        background-attachment: scroll;
    }

	.age-line img   { width:100%; left: 50%; transform: translateX(-50%); position: relative; cursor:pointer }
    .container {
        position: relative;
        width: 90%;
        top: -20%;
        left: 50%;
        transform: translate(-50%, 25%);
    }
}