.bg-dark {
    background-color: #343a40 !important;
}
body {
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #343a40;
    font-family: 'Montserrat', sans-serif;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
.cont {
    position: absolute;
    width: 100%;
    height: 88.7vh;
    overflow-x: hidden;
}
.formCont {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%) ;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 900px;
    height: fit-content;
    
    
  
}
#main {
    
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1000px;
}

 #signup-container, #log-container {
    width: 600px;
    margin: 0 auto;
    border-radius: 10px ;
    box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.933), 3px 3px 7px rgb(216, 216, 215) ;

}
#signup-container input, #log-container input {
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.933) inset, 2px 2px 4px rgb(218, 218, 218) inset ;
    background-color: #343a40;
    border: none;
    color: white;
}
#signup-container {
    transform: translateX(500px);
    visibility: hidden;
}
#signin, #signup {
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.933) inset, 2px 2px 4px rgb(218, 218, 218) inset ;
    background-color: #343a40;
    border: none;
    color: white;
    padding: 7px 10px;
    border-radius: 3px;
}

@media only screen and (max-width: 550px){
    #signup-container, #log-container {
        max-width: 300px;
    }
}