@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Racing+Sans+One&family=Rubik+Mono+One&family=Russo+One&family=Yellowtail&display=swap');

:root{

    --color-dark-red: #950101;

    --color-red: #F94C66;

    --color-green: #53BF9D;

    --color-violet: #BD4291;

    --color-yellow: #FFC54D;

    --color-black: #000000;

    --color-bg: #F2F2F2;

    --color-white: #FFFFFF;

    --color-white-alpha: rgba(255, 255, 255, 0.201);



    --font-primary: 'Russo One', sans-serif;

    --font-one: 'Yellowtail', cursive;

    --font-two: 'Baloo 2', cursive;

    --font-three: 'Racing Sans One', cursive;

    --font-four: 'Rubik Mono One', sans-serif;

}


*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html{

    scroll-behavior: smooth;

}



/* Nav Bar Styles */

.navbar{

    border-color: transparent !important;

    color: var(--color-white) !important;

    transition: all 500ms !important;
    
    box-shadow: 0 0 15px #ccc;

}

.navbar-brand{

    font-family: var(--font-primary);

}

.scrolled{

     background-color: #0B091F !important;

}

.navbar-collapse{

    transition: all 500ms !important;

}

/*Basics*/

.wrapper{
  max-width: 30rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 15px #ccc;
  border: 2px solid rgba(0, 0, 0, 0.107);
}

/* Change the white to any color */
.wrapper input:-webkit-autofill,
.wrapper input:-webkit-autofill:hover, 
.wrapper input:-webkit-autofill:focus, 
.wrapper input:-webkit-autofill:active{
  /*border-radius: 1rem;*/
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7) inset !important;
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7) inset !important;
}
/*Change text in autofill textbox*/
.wrapper input:-webkit-autofill{
  -webkit-text-fill-color: black !important;
}

.wrapper textarea:focus, 
.wrapper textarea.form-control:focus, 
.wrapper input.form-control:focus, 
.wrapper input[type=text]:focus, 
.wrapper input[type=password]:focus, 
.wrapper input[type=email]:focus, 
.wrapper input[type=number]:focus, 
.wrapper [type=text].form-control:focus, 
.wrapper [type=password].form-control:focus, 
.wrapper [type=email].form-control:focus, 
.wrapper [type=tel].form-control:focus, 
.wrapper [contenteditable].form-control:focus {
border: initial;
outline: none;
box-shadow: initial;
transform: translateX(0);
}
.wrapper input[type=text], .wrapper input[type=password]{
  background: transparent;
  border: initial;
  border-bottom: 2px solid rgba(0, 0, 0, 0.541);
  border-radius: 0;
  color: rgb(0, 0, 0);
}
.wrapper h2{
  color: rgb(0, 0, 0);
}
.wrapper p{
  color: rgba(0, 0, 0, 0.473);
}
.wrapper .form-floating label{
  transition: all 500ms;
}
.wrapper input[type=text]:focus, .wrapper input[type=password]:focus{
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(24deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  border-image-slice: 1;
  transition: all 500ms;
}
.wrapper input[type=submit]{
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  /*background: linear-gradient(90deg, rgba(119,61,139,1) 0%, rgba(0,11,78,1) 100%);*/
  background: rgb(69, 135, 79);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 40px;
  text-align: center;
  box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.elevated{
  box-shadow: 0 0 15px #ccc;
  border: 2px solid rgba(0, 0, 0, 0.107);
}

@media only screen and (min-width: 400px) {
  .wrapper{
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}