/* Base settings */
html {
height: 100%;
font-family: 'Karla', sans-serif;
background: linear-gradient(to bottom, #A82512, #000000, #000000); /* Ensuring full height background */
color: #ffffff;
}
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* Safe area for notch and screen edges */
}
/* Styles for the rounded red button */
.rounded-red-button {
background: #424242;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.rounded-red-button:hover {
background-color: #c992c0;
}
/* Styles for the text field */
.text-field {
margin-top: 2%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
width: 200px; /* Adjust width as needed */
}
/* Optionally, you can style the placeholder text */
.text-field::placeholder {
color: #999;
}
/* Logo image styling */
.logo {
width: 30vw;
max-height: 20vh;
max-width: 100%;
}
.hero-image {
max-height: 30vh;
max-width: 100%;
}
/* Header styling */
h1 {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 2em;
color: #c992c0;
}
.m1 {
align-items: center;
}
.p1 {
width: 75%;
}
/* Paragraph styling */
p {
font-weight: 400;
font-size: 1.1em;
color: #424242;
text-align: left;
}
/* Bold text styling */
b, p strong {
font-weight: 700;
}
.subscribe-form {
display: flex;
justify-content: center;
align-items: center;
background-color: #424242; /* Adjust color to match your screenshot */
padding: 3px; /* Adjust padding to match your screenshot */
border-radius: 5px; /* Adjust border-radius to match your screenshot */
justify-content: space-between;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
#email {
padding: 10px 15px;
margin-right: 10px;
border: none;
border-radius: 5px;
font-size: 16px; /* Adjust font-size to match your screenshot */
background-color: #424242;
}
#notify-button {
padding: 10px 20px;
border: none;
border-radius: 3px;
background-color: #A82512; /* Adjust the color to match your screenshot */
color: #ccc;
font-size: 16px; /* Adjust font-size to match your screenshot */
cursor: pointer;
}
#email::placeholder {
color: #ccc; /* Adjust the color to match the placeholder in your screenshot */
}
#notify-button:hover {
background-color: #424242; /* Darker shade for hover effect, adjust as needed */
}
@keyframes colorFade {
0%, 100% {
color: #323232;
}
50% {
color: #ffffff;
}
}
/* Responsive adjustments */
@media (max-width: 4000px) {
.logo { width: 70vw; }
h1 { font-size: 1.2em; }
p {font-size: 1.1em; margin-left: 5%; margin-right: 5%;}
.m1 { margin-left: 30%; margin-right: 30%;}
}
@media (max-width: 992px) {
.logo { width: 60vw; }
h1 { font-size: 1.6em; }
p {font-size: 1.1em; margin-left: 8%; margin-right: 8%;}
.m1 { margin-left: 15%; margin-right: 15%;}
}
@media (max-width: 768px) {
.logo { width: 60vw; }
h1 { font-size: 1.5em; margin-bottom: 9%; }
p {font-size: 1.1em; margin-left: 9%; margin-right: 9%;}
.m1 { margin-left: 15%; margin-right: 15%;}
}
@media (max-width: 576px) {
.logo { width: 90vw; }
h1 { font-size: 1.1em; margin-bottom: 5%; }
p { font-size: 0.9em; margin-left: 2%; margin-right: 2%;}
.m1 { margin-left: 5%; margin-right: 5%;}
}