@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap");

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-family: Poppins, sans-serif;
}

body {
   background-color: #eaeaea;
   transition: 1s all;
}

.container {
   background-color: #efefef;
   display: block;
   text-align: center;
   width: 300px;
   height: 243px;
   margin: 0 auto;
   margin-top: 300px;
   border: 1px solid black;
   border-radius: 10px;
   box-shadow: 0 0 10px 1px;
   padding-bottom: -20px;
}

h5 {
   font-size: 1rem;
   border-bottom: 1px solid black;
   width: 75%;
   text-align: center;
   margin: 0 auto;
}

input {
   border: 0.1px solid black;
   border-radius: 5px;
   padding: 2px;
   margin-bottom: 5px;
   box-shadow: 0px 0px 2px 1px black;
}

h5 + input {
   margin-top: 10px;
}

.erro {
   border: 1px solid red;
}

.container-message {
   color: black;
   width: 100%;
   display: block;
   margin: 0 auto;
}

.message {
   background-color: #ffb0b0b9;
   width: 15%;
   text-align: center;
   margin: 0 auto;
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
}

button {
   padding: 6px;
   background-color: darkgray;
   border: 1px solid #eaeaea;
   border-radius: 3px;
}

::placeholder.need {
   color: red;
}

.need::placeholder {
   color: red;
}

.error {
   background-color: #eeeeee;
}

.error h5 {
   color: red;
}

img#dark {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   position: relative;
   transition: 0.5s all;
   background-color: gray;
}

img:hover#dark {
   position: relative;
   transform: translateY(2px);
   filter: drop-shadow(0 0 5px 5px);
   box-shadow: 0px 0px 10px black;
   cursor: pointer;
}

.dark {
   background-color: #333;
}