.hide{
    display: none !important;
}
body{
    /*background-color: white;*/
    background-color: #0F0F0F;
    color: white;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin:0!important;
    scroll-behavior: smooth !important;
    transition-duration: 7s, 1s;
    transition-property: background-color, opacity;
    overflow-x: hidden;
}
#content{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#WebHeader, #SoftHeader{
    transition-duration: 1s;
}
#WebHeader, #SoftHeader, #physHeader, #exploreSpan h3, #maintHeader, #finaleHeader{
    text-align: center;
    font-size: 1.8em; 
    font-family: "Inconsolata", monospace;
}
#maintHeader{
    color: #0f0f0f;
    transition-duration: 1s;
}
#borderEng{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    transition-duration: 2s;
    border-radius: 3px;
    border: solid #0F0F0F 2px;
}
#exploreSpan{
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: center;
}
#exploreSpan h3{
    transition-duration: 1s;
}
#header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    height: 1.6em;
    font-size: 1.2em;
}
#header p{
    margin-top: -7px;
}
#navBar{
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0px;
    left: 0px;
}
.headerNav{
    border-left: solid white 2px;
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: 0.3s;
}
.headerNav:hover{
    color: #550146;
    cursor: pointer;
}
.firstNav{
    border-left: none !important;
}
#mainSiteHeader{
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    border: solid white 4px;
    padding: 5px;
    text-align: center;
}
#mainSiteHeader img{
    width: 10%;
    margin-left: auto;
    margin-right: auto;
}
#logoHeader{
    display: flex;
    height: 1.3em;
    font-size: 1.3em;
}
#logoHeader p{
    padding-top: 8px;
}
#logoHeader img, #logoHeader div p{
    height: 100%;
    width: auto;
}
#headerPhrase{
    font-size: 5.2em;
    transition-duration: 0.5s;
}
.centerText{
    text-align: center;
    font-size: 1.7em;
}
#contactButton{
    margin-left: auto;
    margin-right: auto;
    color: black;
    background-color: silver;
    width: 25%;
    height: 2em;
    font-size: 2.5em;
    border-radius: 5px;
    border: none;
}
#consultButton{
    margin-left: auto;
    margin-right: auto;
    color: lavender;
    background-color: black;
    width: 20%;
    height: 1.5em;
    font-size: 1.5em;
    border-radius: 5px;
    border: solid white 1px;
}
#formButtons{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#headSpacer{
    height: 15vh;

}
.textandDescIndex{
    height: 50vh;
    width: 100%;
    display: flex;
}
.textandDescIndex img{
    height: 50vh;
    width: auto;
}
.full-space{
    justify-content: space-between;
}
.dropInPhoto{
    height: 30vh !important;
    border: solid black 2px;
    margin-left: auto;
    margin-right: auto;
}
#backgroundgif{
    height: 100vh;
    width: 100vw;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: -1;
    margin-bottom: -100vh;
    transition-duration: 1s;
    opacity: 0;
}

#exploreDiv{
    background-image: url("edits/explore.png");
    background-size: cover;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 75vh;
}
.topSpacer, .bottomSpacer{
    height: 20vh;
}
.extraSpacer{
    height: 15vh;
}
.headerSpacer{
    height: 10vh;
}
#footer{
    width: 100%;
    height: 75px;
    background-color: rgba(0,0,0,0.8);
    display: flex; 
    justify-content: space-between;
}
#conForm{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
#conForm input{
    width: 100%;
    height: 1.4em;
    font-size: 1.4em;
    color: white;
    background-color: #0F0F0F;
    border: solid silver 1px;
}
#submitContact{
    background-color: silver !important;
    border: solid white 1px !important;
    color: #0f0f0f !important; 
}
#consultbutton2{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    height: 1.4em;
    font-size: 1.4em;
    border-radius: 4px;
    color: white;
    background-color: #0F0F0F;
    border: solid silver 1px;
}
.descText{
    font-size: 1.7em;
}
.homeDirect{
    font-size: 1.7em;
    height: 1.7em;
    border-radius: 5px;
    transition-duration: 0.25s;
    color: white;
    background-color: #0F0F0F;
    border: solid silver 1px;
}
.WebButton{
    margin-left: auto !important;
}
.efficButton{
    margin-right: auto !important;
    width: 70%;
}
.ExploreDirect{
    width: 80%;
    margin-left: auto;
    margin-left: 15px;
}
.WebButton:hover, .SoftButton:hover, .efficButton:hover, .MaintButton:hover, .ExploreDirect:hover{
    background-color: silver;
    color: black;
    border-color: #550146;
}
.servDescription{
    display: flex;
    flex-direction: column;
}
.setLeft{
    width: 45%;
    margin-right: auto;
    margin-left: 5px;
}
#footer div{
    width: 20%;
    display: flex;
    justify-content: space-around;
}
#footer div img{
    width: 70px; height: auto;
    transition-duration: 1s;
}
#footer div img:hover{
    opacity: 0.5;
}

#calendar{
    display: flex;
    justify-content: space-around;
    width: 95%;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    font-family: "Inconsolata", sans-serif;
}
.weekrow{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.weekday{
    text-align: right;
    vertical-align: top;
    width: calc(100% / 7);
    height: 20vh;
    border: solid silver 2px;
    margin-left: -1px;
    font-size: 2.8em;
}
.unavailable{
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        #4b00003d 10px,
        #4b00003d 20px
    );
}
.available{
    background-image: radial-gradient(rgba(0,0,0,0), #5100d43d);
}
#monthSelect{
    margin-bottom: 15px;
    font-size: 1.5em;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    justify-content: space-between;
    flex-direction: row;
    vertical-align: top;
    align-content: center;
}
#monthSelect h3{
    height: 100%;
    vertical-align: top !important;
    text-align: center;
}
#monthSelect button{
    font-weight: bold;
    border: none;
    vertical-align: top;
    height: 2.7em;
    cursor: pointer;
    font-size: 1.5em;
    background-color: rgba(0,0,0,0);
    color: silver;
}
#monthSelect .stop{
    cursor: default;
    opacity: 0;
}
#timeSlots{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
}
.timeslot{
    font-size: 2em;
    height: 50px;
    width: 30%;
    background-color: rgba(0,0,0,0);
    color: silver;
    border: solid silver 2px;
    border-radius: 3px;
    margin-bottom: 5px;
    transition-duration: .25s;
}
.timeslot:hover, .selected, #accepted:hover, .selectedButton{
    background-color: silver !important;
    color: black !important;
}
#viewTerms{
    font-size: 2em;
    height: 50px;
    width: 80%;
    background-color: purple;
    color: silver;
    border: solid silver 2px;
    border-radius: 3px;
    margin-bottom: 5px;
    transition-duration: .25s;
    margin-left: auto;
    margin-right: auto;
}
#reserve, #accepted{
    width: 100%;
    margin-top: 15px;
    font-size: 2em;
    height: 50px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    color: silver;
    border: solid silver 2px;
    transition-duration: 0.25s;
}
#accepted{
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}
#reserve:hover{
    background-color: gold;
    color: black;
    border: solid gold 2px;
}
#resDiv{
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    font-family: "EB Garamond", system-ui;
}
.formDiv{
    display: flex;
    flex-direction: column;
}
.formDiv input{
    height:1.5em;
    font-size: 1.5em;
}

.thisDay{
    background-image: radial-gradient(rgba(0,0,0,0), #0b880088);
}

#cardInfo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 175px;
    width: 350px;
    border: solid white 2px;
    border-radius: 3px;
}
#cNo{
    margin-top: 15px;
    width: 100%;
    font-size: 1.2em;
    height: 1.2em;
    color: white;
    background-color:#0f0f0f;
}
#otherDetails{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
#otherDetails p{
    align-content: top;
}
#cName{
    width: 100%;
    font-size: 1.2em;
    height: 1.2em;
    color: white;
    background-color:#0f0f0f;
}
#expField{
    width: 25%;
    display: flex;
    flex-direction: row;
}
#cVV{
    width: 25%;
    font-size: 1.2em;
    height: 1.2em;
    color: white;
    background-color:#0f0f0f;
}
#cExpM, #cExpY{
    width: 48%;
    font-size: 1.2em;
    height: 1.2em;
    color: white;
    background-color:#0f0f0f;
}
#billingInfo{
    display: flex;
    flex-direction: row;
    flex-direction: column;
    width: 50%;
}
#billingInfo input, #billingInfo select{
    font-size: 1.2em !important;
    height: 1.2em !important;
    color: white;
    background-color:#0f0f0f;
}
#billingInfo h3, #cardInfo h3{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
#inputFields{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
@media (max-aspect-ratio: 1/1){
    #mainSiteHeader{
        width: 80vw;
        margin-bottom: 20vh;
    }

    #formButtons{
        margin-top: 10vh;
    }

    #webSpacer{
        height: 10vh;
    }

    #webDirect{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10vh;
    }
    #conForm{
        font-size: 1.5em;
    }
    #consultbutton2{
        height: 1.6em !important;
        line-height: 1.6em !important;
        font-size: 1.6em !important;
    }

    #backgroundgif{
        display: none;
    }
    body{
        overflow: visible;
    }
    .textandDescIndex img{
        display: none;
    }
    .servDescription{
        width: 100vw !important;
    }
    #exploreDiv{
        background-image: none;
    }
    #finSpacer{
        height: 40vh;
    }

    .setLeft{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
/*                #effBody{
        background-image: url("edits/efficient.png");
        background-size: cover;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
    }*/
    #webBody{
        background-image: url("edits/webDev.png");
        background-size: cover;
        padding: 5px;
    }
    #webBody div p{
        width: 65%;
        margin-right: auto;
    }
    #softBody{
        background-size: cover;
        padding: 5px;
    }
    #softBody div p{
        width: 100%;
        margin-left: auto;
        text-align: left;
    }
    .efficButton, .ExploreDirect{
        margin-top: 40vh;
        margin-left: auto;
        margin-right: auto !important;
        width: 100%;
    }
    .SoftButton{
        margin-top: 40vh;
        margin-left: auto;
        margin-right: auto !important;
        width: 95%;
    }
    #contactButton{
        width: 40vw;
    }
    #consultButton{
        width: 60vw !important;
    }
    .weekday{
        height: 10vh;
    }
    #cardInfo{
        height: 45vw;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
    #cardInfo input{
        height: 2em;
        line-height: 2em;
        font-size: 2em;
        color: white;
    }
    #inputFields{
        flex-direction: column;
    }
    #billingInfo{
        width: 100%;
        margin-bottom: 5vh;
    }

    #billingInfo input, #billingInfo select{
        height: 2em !important;
        line-height: 2em !important;
        font-size: 2em !important;
    }

    #accepted, #viewTerms{
        font-size: 1.4em;
    }
}