/* LOGIN PAGE CSS */

.login-wrapper {
	width: 100%;
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
	margin: auto;
	background: conic-gradient(from 90deg at 1px 1px, transparent 90deg, rgba(192, 192, 192, 0.079) 0) 0 0/40px 40px;
}

.left {
	width: 50%;
	height: 50%;
	max-width: 900px;
	min-width: 700px;
	position: relative;
	overflow: hidden;
}

.right {
	width: 50%;
	min-width: 500px;
}

.login-container {
	margin: auto;
	padding: 3em;
	width: 75%;
	max-width: 900px;
	height: 70vh;
	max-height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2em;
	background-color: black;
	border-radius: 10px;
	text-align: center;

	h2 {
		font-size: 2em;
		font-weight: 700;
	}

	h4 {
		font-size: 1.2em;
		font-weight: 300;
	}
}

.radar-container {
	position: absolute;
	top: 25%;
	left: 50%;
}

.trackr-logo-text {
	position: absolute;
	z-index: 99999;
	left: 32%;
	top: 22%;
}

#trackr-logo-text {
	font-size: 9em;
	font-weight: 700;
	letter-spacing: 5px;
	text-shadow: 2px 2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, -2px -2px 0 #ffffff, 2px 0px 0 #ffffff, 0px 2px 0 #ffffff, -2px 0px 0 #ffffff, 0px -2px 0 #ffffff;
	color: black;
	display: block;
}

#itam-text {
	letter-spacing: 3px;
	font-size: 20px;
	color: white;
	font-weight: 500;
	margin-left: 20px;
	text-shadow: none;
	margin-top: -35px;
	display: block;
}

.radar {
	position: relative;
	border: 10px solid #058cff;
	border-radius: 50%;
	width: 300px;
	height: 300px;
	margin: auto;
	padding: 0;
}

.second {
	width: 200px;
	height: 200px;
	margin-top: 40px;
}

.first {
	width: 100px;
	height: 100px;
	margin-top: 40px;
}

.dot {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 5px solid #058cff;
	background-color: #212529;
	transition: all 0.1s ease-in-out;
	box-shadow: 0px 0px 50px 7px #058cff;
}

#dot-1 {
	left: calc((0.6) * 100%);
	top: calc((0.91) * 100%);
}

#dot-2 {
	left: calc((0.2) * 100%);
	top: calc((-0.009) * 100%);
}

#dot-3 {
	left: calc((0.975) * 100%);
	top: calc((0.5) * 100%);
}

#dot-4 {
	left: calc((0.7) * 100%);
	bottom: calc((0.92) * 100%);
}

#dot-5 {
	left: calc((0.07) * 100%);
	top: calc((0.8) * 100%);
}

.dot:hover {
	filter: brightness(1.5);
	background-color: #058cff;
}

@media (width <= 1400px) {
	.login-wrapper {
		flex-direction: column;
        justify-content: start;
        align-items: center;
        min-width: 90vw;
        margin: auto;
        gap: .5em;
	}

	.left {
		height: 25%;
	}

	#trackr-logo-text {
		font-size: 5em;
        left: 15%;
	}

	.radar {
		height: 200px;
		width: 200px;
	}

	.second {
		height: 100px;
		width: 100px;
	}

	.first {
		visibility: hidden;
	}

	#itam-text {
		font-size: 15px;
        margin-top: -20px;
        margin-left: 10px;
	}

    .right {
        width: 75%
    }

    .login-container {
        width: 75%;
        height: 40vh;
        align-items: center;
        height: 100%;
        gap: .5em;
        background-color: black;
        border-radius: 10px;
        text-align: center;
    
        h2 {
            font-size: 1.5em;
            font-weight: 700;
        }
    
        h4 {
            font-size: 1.2em;
            font-weight: 300;
        }
    }

    #login-container-text {
        width: 75%;
    }

    #login-btns {
        display: flex;
        flex-direction: column;
        gap: .5em;
        button, a {
            width: 100% !important;
        }
    }

    form {
        width: 75%;
    }

}

@media (width <= 800px) {
    .login-wrapper {
        gap: 2em;
    }
	.left {
		height: 30%;
	}

	.first {
		visibility: hidden;
	}

	#itam-text {
		font-size: 15px;
        margin-top: -20px;
        margin-left: 10px;
	}

    .right {
        width: 100%
    }

}

@media (width <= 500px) {
    .login-wrapper {
        gap: 1em;
    }

	.left {
		height: 30%;
        width: 100%;
	}

	.first {
		visibility: hidden;
	}

	#itam-text {
		font-size: 10px;
        margin-top: -20px;
        margin-left: 10px;
	}

    form,  #login-container-text  {
        width: 100%
    }

    .login-container {
        gap: 0;
    }
    #login-container-text  {
        h2 {
            font-size: 1.2em;
        }

        h4 {
            font-size: 1em;
        }
    }

}