body {
   font-family: 'Dosis', sans-serif;
}

.container {
   background-color: #438094;
   -webkit-box-shadow: inset 0px 0px 14px 7px rgba(0,0,0,0.42);
   -moz-box-shadow: inset 0px 0px 14px 7px rgba(0,0,0,0.42);
   box-shadow: inset 0px 0px 14px 7px rgba(0,0,0,0.42);
   width: 25em;
   height: 250px;
   margin: auto;
   margin-top: 80px;
}

#converter {
   position: relative;
   top: 10%;
   text-align: center;
}

#converter h2, p {
   color: #fff;
}

#convert {
   border: solid 1px #33b0ff;
   padding: 2px 25px;
   box-shadow: inset 0 0 0 0 #33b0ff;
   transition: all 0.2s ease-in-out;
   color: #fff;
}

#convert:hover {
   box-shadow: inset 150px 0 0 0 #33b0ff;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
}

#converter input {
   text-align: center;
   font-size: 16px;
   font-family: 'Dosis', sans-serif;
   color: #0007C9;
   width: 100px;
   margin-bottom: 10px;
   background: transparent;
   border: none;
   border-bottom: dotted 1.5px #fff;
   transition: all 0.2s ease-in-out;
   
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: white;
 }
 ::-moz-placeholder { /* Firefox 19+ */
   color: white;
 }
 :-ms-input-placeholder { /* IE 10+ */
   color: white;
 }
 :-moz-placeholder { /* Firefox 18- */
   color: white;
 }

#converter input:focus {
   border-bottom: 1.5px dotted #0007C9;
   color: #fff;
   transition: all 0.2s ease-in-out;
   outline: none;
}

#output {
   color: #0007C9;
   letter-spacing: 2px;
}


.article {
   padding: 3% 20%;
}

 .article p {
   color:black;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}