html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html{
    font-family: "Figtree", sans-serif;
    user-select:none;
}

@media screen and (max-width: 600px) {
    #sideNav{
        width:100%;
        height:100%;
        justify-content:space-between;
    }

    #sideNav h1{
        display:none;
    }

    #desktopNav{
        display:none !important;
    }

    #about p{
        padding:0 10%;
        margin-bottom:30px;
        line-height:30px;
    }

    #p1{
        display:none;
    }

    #p2{
        display:block;
    }

    #aboutContent{
        flex-direction:column;
        align-items:center;
        padding-top:50px;
    }

    .aboutImg{
        width:90%;
        margin-bottom:30px;
    }

    #popup{
        width:100%;
    }

    #footerContent{
        flex-direction:column;
    }

    #fLinks, #fInfo, #fSocial{
        margin-bottom:45px;
    }
    
}

@media screen and (min-width:601px) {
    #sideNav i{
        display:none;
    }

    #about p{
        padding:0 22%;
        margin-bottom:50px;
    }

    #p1{
        display:block;
    }

    #p2{
        display:none;
    }

    .aboutImg{
        width:49%;
    }

    #popup{
        width:600px;
    }

    #footer{
        overflow:hidden;
        height:300px;
    }

    #footerContent{
        align-items:center;
    }
}

header {
    display: flex;
    height: 100px;
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#logo{
    height:80%;
    margin-left:4%;
    
}

#sideNav{
    display:flex;
    align-items:center;
}

#sideNav h1{
    font-size:40px;
    margin-left:7%;
    color:#2E2E2E;
    font-weight:bold;
}

#desktopNav{
    width:100%;
    height:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.links{
    margin:0 6%;
    font-size:22px;
    font-weight:300;
    text-decoration:none;
    color:black;
}

.links::after {
    content:'';
    display:block;
    width:0;
    height:2px;
    background:#ee680f;
    margin:0 auto;
    transition:width 0.25s ease;
}

.links:hover::after {
    width:100%;
}

#hero{
    width:100%;
}

#heroText {
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%, -50%);
    color:white;
    text-align:center;
    z-index:3;
    opacity:0;
    animation:slideDown 1s ease-out forwards;
}

@keyframes slideDown {
    0% {
        top: 30%;
        opacity: 0;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}

#heroText h1{
    font-size:70px;
    font-weight:600;
    margin-bottom:20px;
}

#heroText p{
    font-size:30px;
    font-weight:300;
    margin-bottom:50px;
}

#heroText a{
    text-decoration:none;
    color:white;
    background-color:#db600e;
    padding:15px;
    font-size:20px;
    font-weight:500;
    transition:0.3s;
}

#heroText a:hover{
    background-color:#b44f0c;
}

.heroImg{
    width:100%;
    filter:brightness(0.5);
    object-fit:cover;
    object-position:center;
    margin-top:100px;
    height:95vh;
}

#mobileHeroImg{
    display:none;
}

@media screen and (max-width: 600px) {
    .heroImg {
        display: none;
    }

    #mobileHeroImg {
        display: block;
    }
}

#scrollIcon{
    height:50px;
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:end;
    width:100%;
    z-index:2;
    bottom:0;
}

#scroll{
    opacity:100%;
    color:white;
    font-size:50px;
    transition:.5s;
}

@keyframes bounce {
    0%, 100% {
        transform:translateY(0);
    }

    20%{
        transform:translateY(-10px);
    }

    40%{
        transform:translateY(0);
    }

    60%{
        transform:translateY(-10px);
    }

    80%{
        transform:translateY(0);
    }
}

#scroll {
    animation: bounce 1.5s infinite;
}

#loginIcon, #mobileLogin{
    font-size:30px;
    margin-right:4%;
    cursor:pointer;
    transition:.2s;
}

#loginIcon:hover{
    color:#ee680f;
}

#menu{
    font-size:30px;
    margin-left:4%;
    cursor:pointer;
    transition:.2s;
}

#sideMenu{
    position:fixed;
    top:0;
    left:0;
    width:0px;
    height:100%;
    background:#222;
    color:#fff;
    z-index:1000;
    box-shadow:2px 0 8px rgba(0,0,0,0.2);
    transition:.3s;
}

#mobileNav{
    width:100%;
    height:100%;
    margin-top:70px;
    display:flex;
    flex-direction:column;
    gap:50px;
    padding-left:30px;
    position:fixed;
    transform:translateX(-100%);
    transition:0.3s;
}

.mobileLinks{
    width:70%;
    font-size:30px;
    font-weight:300;
    color:#fff;
    text-decoration:none;
}

#closeMenu{
    font-size:50px;
    position:absolute;
    top:10px;
    right:20px;
}

#popup{
    right:0;
    top:0;
    height:390px;
    box-shadow:-2px 0 5px rgba(0, 0, 0, 0.2);
    position:fixed;
    background-color:white;
    z-index:9999;
    transition:.3s;
}

#close{
    font-size:60px;
    cursor:pointer;
    margin-left:2%;
    transition:.2s;
}

#close:hover{
    color:#ee680f;
}

#popupContent{
    padding:2% 5%;
}

#popupContent h2{
    font-size:30px;
    font-weight:bold;
}

#loginForm, #signupForm{
    display:flex;
    flex-direction:column;
}

#loginForm label, #signupForm label{
    font-size:20px;
    margin-top:3%;
    margin-bottom:.5%;
}

#loginForm input, #signupForm input{
    padding:10px;
    font-size:16px;
    border-radius:5px;
    border:1px solid #c5c5c5;
}

#submit, #signupSubmit, #logout{
    margin-top:3%;
    padding:10px;
    font-size:18px;
    background-color:#eb670f;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition:.2s;
    width:30%;
}

#submit:hover, #signupSubmit:hover, #logout:hover{
    background-color:#b44f0c;
}

#noAccount{
    margin-top:1%;
    font-size:16px;
}

#signupForm{
    margin-top:20px;
    visibility:hidden;
    opacity:0;
    transition:.7s;
}

#logout{
    position: absolute;
    bottom: 20px;
}

#loginText{
    font-size:20px;
    font-weight:300;
    margin-top:20px;
}

#about{
    text-align:center;
}

#about h2{
    font-size:50px;
    font-weight:600;
    margin-top:50px;
}

#about p{
    font-size:22px;
    font-weight:300;
    margin-top:20px;
}

#schedule{
    text-decoration:none;
    padding:10px 20px;
    font-size:18px;
    font-weight:500;
    color:white;
    background-color:#db600e;
    border:none;
    transition:.3s;
}

#schedule:hover {
    background-color: #b44f0c;
}

#aboutContent{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:4% 5%;
}

.aboutImg{
    height:400px;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-decoration:none;
}

.aboutImg h3{
    font-size:35px;
    font-weight:600;
    text-align:center;
    margin-top:20px;
}

#repairImg{
    background-image:url(images/repair.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-color:rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    cursor:pointer;
    transition:.3s;
}

#tuneImg{
    background-image:url(images/e30Tuned.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-color:rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    cursor:pointer;
    transition:.3s;
}

#repairImg:hover, #tuneImg:hover{
    background-color:rgba(0, 0, 0, 0.65);
    box-shadow: 0px 14px 16px rgba(0, 0, 0, 0.4);
    transform:scale(100.5%);
}

#footer{
    background-color:#1f1f1f;
    color:white;
    padding:3% 3% 1% 3%;
}

#footer h2{
    font-size:40px;
    font-weight:600;
    margin-bottom:40px;
}

#footerContent{
    display:flex;
    justify-content:space-between;
    margin:0 5%;
}

.footerLinks, #fInfo p, #fSocial a{
    text-decoration:none;
    color:white;
    font-size:20px;
    font-weight:300;
    margin-bottom:20px;
    margin-left:5px;
    transition:.2s;
}

.footerLinks:hover, #fSocial a:hover{
    color:#ee680f;
}

#fLinks, #fInfo, #fSocial{
    display:flex;
    flex-direction:column;
}

#fLinks h3, #fInfo h3, #fSocial h3{
    font-size:30px;
    font-weight:600;
    margin-bottom:20px;
}

#footerBottom{
    font-size:15px;
    background-color:#1f1f1f;
    color:white;
    padding:1%;
}

#noAccess, #employeeAccess{
    width:100%;
    text-align:center;
}

#noAccess h2{
    font-size:50px;
    font-weight:600;
}

#noAccess p{
    font-size:22px;
    font-weight:300;
    margin-top:20px;
}

#employees{
    width:100%;
    text-align:center;
}

#employees h2{
    font-size:50px;
    font-weight:600;
    margin-top:50px;
}

#employees p{
    font-size:22px;
    font-weight:300;
    margin-top:20px;
}

#employeeAccess{
    display:flex;
    flex-wrap:wrap;
}

.card{
    width:30%;
    padding:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin:auto;
    margin-top:25px;
    margin-bottom:25px;
    background-color:#1f2937;
    color:#f9fafb;
    font-size:18px;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.cardh2{
    font-weight:700;
}

.cardp{
    margin-left:5px;
}

#contain{
    display:flex;
    margin:5px 0;
}

#searchForm{
    margin:auto;
    display:flex;
    flex-direction:column;
    width:30%;
}

#uidRange{
    vertical-align: middle;
}

#search{
    width:20%;
    margin:auto;
    margin-top:10px;
}

#searchForm span{
    margin:15px 0;
}

#searchForm label{
    font-size:20px;
}

#searchForm select{
    margin-left:10px;
    padding:10px;
    font-size:16px;
    border-radius:5px;
    border:1px solid #c5c5c5;
    cursor:pointer;
}

#searchForm button{
    margin-top:10px;
    width:40%;
    padding:15px;
    font-size:18px;
    background-color:#eb670f;
    color:white;
    border:none;
    cursor:pointer;
    transition:.2s;
    margin-bottom:50px;
}

#searchForm button:hover{
    background-color:#b44f0c;
}

#radios input{
    cursor:pointer;
}

#uidRange{
    cursor:grab;
}

#uidRange:active{
    cursor:grabbing;
}

#func{
    font-weight:600;
    font-size:25px;
    margin:20px 0;
}