.whole-container {
    padding-top: 6%;
    padding-bottom: 6%;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: white;
    display: block;
    text-align: center;
    width: 100vw;
    height: 100vh;
    border: 2rem solid #ff6600;
    box-shadow: inset 0.25rem 0.25rem 1rem #00000066;
	background-image: url('images/the-bg.jpg');
	background-size: cover;
	background-position: center center;
}

.whole-container a {
	text-decoration: none;
}

img.logoimg {
	width: auto;
	max-width: 100%;
	margin-bottom: 2rem;
	display: table;
	margin-left: auto;
	margin-right: auto;
	max-width: 50%;
}

.whole-container button {
	margin-bottom: 2rem;
	margin-top: 2rem;
	padding: 1rem 3rem;
	border-radius: 0.5rem;
	border: 0;
	background-color: black;
	color: white;
	font-size: 1.75rem;
	line-height: 1.2;
}

.whole-container button span {
	color: #ff6600;
	font-size: 2.25rem;
	display: block;
}

.social-row {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.social-row i {
	font-size: 3rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.social-row a i {
	color: black;
}

.social-row a i:hover {
	color: #ff6600;
}

.whole-container button:hover {
	background-color: #ff6600;
}

.whole-container button:hover span {
	color: black;
}















/*==========  Boostrap 5 Non-Mobile First Method  ==========*/

@media only screen and (max-width: 3180px) {

html { font-size: 16px; }

}

@media only screen and (max-width: 2520px) {

html { font-size: 16px; }

}

@media only screen and (max-width: 1860px) {

html { font-size: 16px; }

}

@media only screen and (max-width: 1199px) {

html { font-size: 15px; }

}

@media only screen and (max-width: 991px) {

html { font-size: 14px; }

}

@media only screen and (max-width: 767px) {

html { font-size: 13px; }
.whole-container { padding-left: 1rem; padding-right: 1rem; border: 0.75rem solid #ff6600; padding-top: 12% }
img.logoimg { max-width: 80%; }
.whole-container button { padding: 0.75rem 1.5rem; border-radius: 0.25rem; font-size: 1.5rem; }
.whole-container button span { font-size: 2rem; }
.social-row i { font-size: 3rem; margin-left: 0.25rem; margin-right: 0.25rem; }

}

@media only screen and (max-width: 575px) {

html { font-size: 12px; }

}