@import url('https://fonts.cdnfonts.com/css/teko');
body {
color: #2255a5;
font-family: "Poppins", serif;
font-size: 1.5rem;
font-weight: 600;
margin: 0 auto;
min-height: 500px;
display: flex;
align-items: flex-start;
justify-content: center;
width: 750px;
}
.content {
margin: 20px auto;
text-align: center;
display: grid;
width: 100%;
min-height: 300px;
align-content: center;
background-size: 100% 100% !important;
}
.content.sm{
background: url(https://img.koggames.com/ES/microsite/2025/1201/winter-vanguard/form/bg-form-sm.png) no-repeat center;
}
.content.lg{
background: url(https://img.koggames.com/ES/microsite/2025/1201/winter-vanguard/form/bg-form.png) no-repeat center;
}
.content h1 {
margin: 0px auto;
font-family: 'Teko', sans-serif;
font-size: 3.5rem;
font-weight: 600;
letter-spacing: 1px;
line-height: 0.8;
color: #2255a5;
padding: 0px 30px;
min-width: 340px;
}
.content h2 {
margin: 0 auto;
font-weight: 600;
font-size: 1.2rem;
}
.content h4 {
margin: 40px auto -20px;
font-weight: 600;
font-size: 2rem;
font-family: 'Teko', sans-serif;
line-height: 1.2;
}
.content .message {
padding: 20px 0 10px;
}
.content a,
button.btn {
outline: none !important;
}
.content button.btn {
background: url(https://img.koggames.com/ES/microsite/2025/1201/winter-vanguard/form/btn-bg.png) no-repeat center;
background-size: 100% 80%;
background-color: transparent;
font-family: 'Teko', sans-serif;
padding: 5px 20px 10px;
border: none;
cursor: pointer;
text-transform: uppercase;
width: 300px;
color: #fff;
font-weight: 800;
font-size: 36px;
transition: all 0.4s ease-in-out;
margin-top: 20px;
}
button.btn:hover {
transform: scale(105%);
}
.pink {
color: #e93c3c;
}

.content p {
margin: 0px auto;
line-height: 1.1;
}
input,
select {
outline-color: #754a43;
width: 65%;
height: 40px;
font-weight: 600;
font-size: 1rem;
padding: 0.2rem 1rem;
border-radius: 6px;
background: #f6f6f6;
border: 1px solid#666;
color: #000;
text-align: center;
}
.content img,
input[type="image"] {
display: block;
margin: 1rem auto 1rem;
transition: all 0.3s;
background: transparent;
border: none;
box-shadow: none;
height: auto;
}
.content img:hover,
input[type="image"]:hover {
transform: scale(1.05);
}
.content label {
padding: 10px 10px 0 0;
color: #2255a5;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
}
.content .group {
display: flex;
width: 90%;
flex-direction: row;
text-align: center;
flex-wrap: wrap;
margin: 20px auto 0;
justify-content: flex-end;
align-items: right;
align-content: center;
}
.content .spacer {
height: 20px;
}
@media (max-width: 420px) {
.content h1 {
font-size: 24px !important;
}
}