html{
    overflow: hidden;
}

:root {
    --primary-color: #010712;
    --secondary-color: #818386;
    --bg-color: #FCFDFD;
    --button-color: #3B3636;
    --h1-color: #3F444C;
}

[data-theme="dark"] {
--primary-color: #FCFDFD;
--secondary-color: #818386;
--bg-color: #010712;
--button-color: #818386;
--h1-color: #FCFDFD;
}

* {
margin: 0;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}

.contact-container {
display: flex;
height: 100vh;
background: var(--bg-color);
}

.left-col {
width: 45vw;
height: 100%;
/*background-image: url("../assets/siteFrontSpace.JPG");*/
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/siteFrontSpace.webp') no-repeat fixed;
background-size: cover;
}

.logo {
width: 10rem;
padding: 1.5rem;
}

.right-col {
background: var(--bg-color);
width: 50vw;
height: 100vh;
padding: 5rem 3.5rem;
}

h1, label, button, .description {
font-family: 'Jost', sans-serif;
font-weight: 400;
letter-spacing: 0.1rem;
}

h1 {
color:var(--h1-color);
text-transform: uppercase;
font-size: 2.5rem;
letter-spacing: 0.5rem;
font-weight: 300;
}

p {
color: var(--secondary-color);
font-size: 0.9rem;
letter-spacing: 0.01rem;
width: 40vw;
margin: 0.25rem 0;
}

label, .description {
color: var(--secondary-color);
text-transform: uppercase;
font-size: 0.625rem;
}

form {
width: 31.25rem;
position: relative;
margin-top: 2rem;
padding: 1rem 0;
}

input, textarea, label {
width: 40vw;
display: block;
}

p, placeholder, input, textarea {
font-family: 'Helvetica Neue', sans-serif;
}

input::placeholder, textarea::placeholder {
color: var(--primary-color);
}

input, textarea {
color: var(--primary-color);
font-weight: 500;
background: var(--bg-color);
border: none;
border-bottom: 1px solid var(--secondary-color);
padding: 0.5rem 0;
margin-bottom: 1rem;
outline: none;
}

textarea {
resize: none;
}

button {
text-transform: uppercase;
font-weight: 300;
background: var(--button-color);
color: var(--bg-color);
width: 10rem;
height: 2.25rem;
border: none;
border-radius: 2px;
outline: none;
cursor: pointer;
}

input:hover, textarea:hover, button:hover {
opacity: 0.5;
}

button:active {
opacity: 0.8;
}

/* Toggle Switch */

.theme-switch-wrapper {
display: flex;
align-items: center;
text-align: center;
width: 160px;
position: absolute;
top: 0.5rem;
right: 0;
}

.description {
    margin-left: 1.25rem;
}

.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}

.theme-switch input {
display:none;
}

.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}

.slider:before {
background-color: #fff;
bottom: 0.25rem;
content: "";
width: 26px;
height: 26px;
left: 0.25rem;
position: absolute;
transition: .4s;
}

input:checked + .slider {
background-color: var(--button-color);
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

#error, #success-msg {
width: 40vw;
margin: 0.125rem 0;
font-size: 1rem;
font-family: 'Jost';
color: var(--secondary-color);
}

#success-msg {
transition-delay: 3s;
}

@media only screen and (max-width: 950px) {
.logo {
    width: 8rem;
}
h1 {
    font-size: 1.75rem;
}
p {
    font-size: 0.7rem;
}
input, textarea, button {
    font-size: 0.65rem;
}
.description {
    font-size: 0.3rem;
    margin-left: 0.4rem;
}
button {
    width: 7rem;
}
.theme-switch-wrapper {
    width: 120px;
}
.theme-switch {
height: 28px;
width: 50px;
}

.theme-switch input {
display:none;
}

.slider:before {
background-color: #fff;
bottom: 0.25rem;
content: "";
width: 20px;
height: 20px;
left: 0.25rem;
position: absolute;
transition: .4s;
}
input:checked + .slider:before {
transform: translateX(16px);
}

.slider.round {
border-radius: 15px;
}

.slider.round:before {
border-radius: 50%;
}

}

.nav-link.active
{
    color: lightcoral!important;;
}

#Navitems{
    width: 30%!important;
    flex-grow: 0!important;
}

#error{
    color: red;
}

/*Needed to better understand which field is wrong to the user*/
.errorField{ 
    border-bottom: 1px solid red!important;
}

#success-msg{
    color: green;
}

.gx-5.custom
{
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-right: calc(var(--bs-gutter-x) * .5);
}

#privacy
{
    margin: 0px;
    width: auto;
    margin-right: 9px;
}

#privacyCheckbox
{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
}

#submit
{
    cursor: not-allowed;
}

@media screen and (max-width: 1250px){
    #navbarContent{
        justify-content: unset!important;
    }
  }
  
  @media screen and (max-width: 991px){
    #navbarContent{
        justify-content: unset!important;
    }
  
    #Navlogos{
        display: inline-block;
    }
    li{
        display: inline-block;
    }
    #navbarContent{
        /*display: inline-block!important;*/
        display: flex!important;
        flex-direction: column;
    }
    #HTMLheader{
        white-space: nowrap;
    }
    .navbar-brand{
        text-shadow: 0 0 black;
    }
    .left-col{
        display: none;
        width: 0vw;
    }
    .contact-container{
        flex-wrap: nowrap;
    }
    .right-col{
        display: flex!important;
        justify-content: center;
        flex-wrap: wrap;
        width: 100vw;
        padding: 0rem 3.5rem;
    }
    p{
        width: 100%!important;
        text-align: center;
    }
    form{
        width: 100vw;
        margin-top: 0rem;
    }
    label{
        width: 100%;
    }
    input{
        width: 100%;
    }
    textarea{
        width: 100%;
    }
    h1{
        text-align: center;
        margin-bottom: -2.5rem;
        margin-top: 2.5rem;
    }
    #mobileButton{
        width: 56px;
        height: 40px;
    }
    html{
        overflow: scroll;
    }
    .fa.fa-envelope{
        margin-bottom: -2.5rem;
        margin-top: -3rem;
        height: min-content;
    }
    #contact-form{
        margin-top: -5rem;
        height: min-content;
        padding-bottom: 0rem;
    }
    #submit{
        position: absolute;
    }
}