@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans:wght@300&family=Playfair+Display:ital@1&display=swap');

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #0B1120;
	background-size: cover;
}
form {
    width: min(90vw, 1000px);
	background-color: #0B1120;
	margin: 100px auto;
	padding: 1rem;
    box-shadow:  
                0 0 5px #60a5fa,
                0 0 10px #3B82F6,
                0 0 20px #2563EB,
                0 0 40px #1D4ED8;
	color: white;
	text-align: center;
	align-items: center;
	position: relative;
	top: 100px;
}
div.two {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    
}

div.two label {
    display: inline-block;
    text-align: left;
	font-weight:bold;
	position: relative;
    font-size: clamp(1.2rem, 1.6vw, 1.2rem);
}

div.two input, div.two select{
	width: 150px;
}

div.two select {
	width: 157px;
}

div.one {
	text-align: center;
}

#submit{
	clear: both;
	width: 125px;
	height: 30px;
	background:white;
	text-align:center;
	line-height:20px;
	font-size:12px;
	font-weight:bold;
}

.tooltip {
	display: block; 
	position: absolute; 
	visibility: hidden;
	left: 18em;
	top: 0; 
	width: 12em;
	padding: 0.5em;
	font-weight: normal;
	color: white;
	background-color: #0B1120;
    box-shadow:  
    0 0 5px #60a5fa,
    0 0 10px #3B82F6,
    0 0 20px #2563EB,
    0 0 40px #1D4ED8;
    border-radius: 20%;
    text-align: center;
}

span.error{
    display: inline-block;
    width: 220px;
    padding-left: 10px;
    color: #D92525;
    text-align: left;
}

.span.success{
	padding-left: 10px;
    color: green;
}
.h1 {
	font-family: "Montserrat",sans-serif;
	font-size: 200px;
	color: white;
	text-align: center;
}
legend {
    text-shadow:  0 0 5px #60a5fa,
                  0 0 10px #3B82F6,
                  0 0 20px #2563EB,
                  0 0 40px #1D4ED8;
    font-size: clamp(1.75rem, 6vw, 1rem);
}
@media (max-width:600px) {
    .tooltip {
        left:0%;
        top:100%;
        width: min(80vw, 18rem);
        margin-top: 0.4rem;
    }
    .div.two {
        flex-direction: column;
        align-items: stretch;
        gap:6px;
    }
    .tooltip {
        left:0;
        top: 100%;
        width: min(80vw, 18rem);
        margin-top: 0.4rem;
        z-index: 10;
    }
    span.error {
        width:100%;
        padding-left: 0;
    }
}