@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");





/* RESET RULES

–––––––––––––––––––––––––––––––––––––––––––––––––– */



:root {

  --white: #fefffd;

  --body: #1b1f40;

  --border: #edf4f4;

  --element: #f5f5f5;

  --focus: #edf4f4;

  --text: #fefffd;

}



* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  outline: none;

}



a {

  color: inherit;

}



input,

select,

textarea,

button {

  font-family: inherit;

  font-size: 100%;

}



button,

label {

  cursor: pointer;

  width: 50%;

}



select {

  appearance: none;

}



/* Remove native arrow on IE */

select::-ms-expand {

  display: none;

}



/*Remove dotted outline from selected option on Firefox*/

/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/

/*We use !important to override the color set for the select on line 99*/

select:-moz-focusring {

  color: transparent !important;

  text-shadow: 0 0 0 var(--white);

}



h1 {

  text-align: center;

}



body {

  font: 12px/1.5 "Open Sans", sans-serif;

  background: var(--body);

  color: var(--white);

  margin: 0;

}



.container {

  width: 800px;

  margin: 0 auto;

  padding: 1rem 1.5rem;

}



h1 {

  margin-bottom: 1.5rem;

}



li,

.input-field > *:not(:last-child) {

  margin-bottom: 1.5rem;

  list-style-type: none;

  font: 15px/1.5 "Open Sans", sans-serif;

}



input,

button {

  width: 100%;

  line-height: 1.5;

  padding: 15px 10px;

  border: 2px solid var(--text);

  color: var(--text);

  background: var(--body);

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

  font-size: 16px;

  list-style-type: none;

}



select:focus,

input:focus{

  transform: scale(1.02);

}



input[type="text"]:focus {

  background-color: var(--focus);

}



.container button:hover {

  background: var(--focus);

  border-color: var(--focus);

  color: var(--body);

}



.container input::placeholder {

  color: var(--text);

}



.container select:focus,

.container input:focus{

transform: scale(1.02);

}



.container input[type="text"]:focus {

background-color: var(--focus);

border-color: var(--focus);

color: var(--body);

}



.container input[type="text"]:focus::placeholder {

  color: var(--body);

}