:root {
   --bg-color: #1b1b32;
   --text-color: #f5f6f7;
   --convert-bg: #3b3b4f;
   --btn-color: #ffb83d;
   --container-border: #f4f6fd;
}

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

body {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   background-color: var(--bg-color);
   color: var(--text-color);
   align-items: center;
   justify-content: center;
}

#container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 50%;
   margin: 3rem auto;
}

img {
   width: 17rem;
   padding-bottom: 1rem;
}

h1 {
   padding: 1rem;
   width: 50%;
   text-align: center;
   font-family: 'Castoro Titling', cursive;
   font-size: 2.5rem;
}

#conversion-container {
   background-color: var(--convert-bg);
   border: 3px solid var(--container-border);
   padding: 2.5rem;
   margin-bottom: 1.5rem;
   width: 55%;
}

#conversion-container p {
   text-align: center;
   font-size: 1.5rem;
   font-weight: bold;
   padding-bottom: 1rem;
}

#conversion-container input {
   background-color: #0a0a22;
   color: #fcffff;
   font-size: 2rem;
   width: 100%;
   border: 1px solid var(--container-border);
   padding: 0.5rem;
   margin-bottom: 1rem;
}

#convert-btn {
   background-color: var(--btn-color);
   width: 100%;
   padding: 1rem 0;
   margin-top: 0.8rem;
   font-size: 1.5rem;
   cursor: pointer;
}

#output {
   background-color: var(--convert-bg);
   border: 3px solid var(--container-border);
   padding: 1rem;
   width: 55%;
   display: none;
}

#output p {
   text-align: center;
   font-size: 2rem;
}