diff --git a/style.css b/style.css
new file mode 100644
index 0000000..95714f5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,108 @@
+/* Estilos básicos */
+* {                      /* Seleciona todos os elementos na página */
+    margin: 0;            /* Remove a margem padrão */
+    padding: 0;           /* Remove o preenchimento (padding) padrão */
+    box-sizing: border-box; /* Faz com que o padding e a borda sejam incluídos no cálculo do tamanho total do elemento */
+    font-family: Arial, sans-serif; /* Define a fonte padrão para Arial, ou sans-serif se Arial não estiver disponível */
+}
+
+/* Estilo do corpo da página */
+body {                    /* Seleciona o elemento <body> */
+    background-color: #f5f5f5;  /* Define a cor de fundo da página como um cinza claro */
+    display: flex;              /* Define o modelo de layout como flexbox */
+    flex-direction: column;     /* Organiza os itens no eixo vertical (coluna) */
+    align-items: center;        /* Alinha os itens no centro do eixo horizontal */
+    justify-content: center;    /* Alinha os itens no centro do eixo vertical */
+    min-height: 100vh;          /* Garante que o corpo tenha pelo menos a altura da janela do navegador */
+    color: #333;                /* Define a cor do texto como um cinza escuro */
+}
+
+/* Estilo do título principal */
+h1 {                        /* Seleciona o elemento <h1> */
+    font-size: 2rem;          /* Define o tamanho da fonte como 2rem (relativo ao tamanho da fonte do documento) */
+    color: #4a90e2;           /* Define a cor do texto como um tom de azul */
+    margin-bottom: 1rem;      /* Define a margem inferior do título */
+}
+
+/* Estilo do formulário */
+form {                      /* Seleciona o elemento <form> */
+    background-color: #ffffff; /* Define o fundo do formulário como branco */
+    padding: 1.5rem;           /* Define o preenchimento interno do formulário */
+    border-radius: 8px;        /* Arredonda as bordas do formulário */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aplica uma sombra suave ao redor do formulário */
+    width: 100%;               /* Define a largura do formulário como 100% do seu contêiner */
+    max-width: 400px;          /* Define a largura máxima do formulário */
+    text-align: center;        /* Alinha o texto dentro do formulário ao centro */
+}
+
+/* Estilo dos rótulos e inputs */
+label {                      /* Seleciona o elemento <label> */
+    display: block;           /* Exibe o <label> como um bloco, ocupando toda a largura disponível */
+    margin-bottom: 0.5rem;    /* Define a margem inferior do <label> */
+    font-weight: bold;        /* Torna o texto do <label> em negrito */
+    color: #4a90e2;           /* Define a cor do texto como azul */
+}
+
+input[type="number"],
+input[type="text"] {         /* Seleciona os inputs de tipo number e text */
+    width: 100%;              /* Define a largura dos inputs como 100% do seu contêiner */
+    padding: 0.5rem;          /* Adiciona preenchimento interno aos inputs */
+    margin-bottom: 1rem;      /* Define a margem inferior dos inputs */
+    border: 1px solid #ccc;   /* Aplica uma borda fina e cinza ao redor dos inputs */
+    border-radius: 4px;       /* Arredonda as bordas dos inputs */
+    font-size: 1rem;          /* Define o tamanho da fonte dentro dos inputs */
+}
+
+/* Estilo dos botões */
+button[type="submit"],
+button[type="reset"] {       /* Seleciona os botões de tipo submit e reset */
+    padding: 0.7rem 1.5rem;   /* Define o preenchimento interno dos botões */
+    font-size: 1rem;          /* Define o tamanho da fonte dos botões */
+    border: none;             /* Remove a borda padrão dos botões */
+    border-radius: 4px;       /* Arredonda as bordas dos botões */
+    cursor: pointer;         /* Define o cursor como uma mãozinha ao passar o mouse sobre o botão */
+    transition: background-color 0.3s; /* Aplica uma transição suave para a mudança de cor do fundo */
+}
+
+button[type="submit"] {      /* Seleciona o botão de tipo submit */
+    background-color: #4a90e2; /* Define o fundo do botão como azul */
+    color: white;             /* Define a cor do texto dentro do botão como branco */
+}
+
+button[type="reset"] {       /* Seleciona o botão de tipo reset */
+    background-color: #ccc;   /* Define o fundo do botão como cinza */
+    color: #333;              /* Define a cor do texto dentro do botão como cinza escuro */
+    margin-left: 1rem;        /* Define a margem esquerda do botão */
+}
+
+button[type="submit"]:hover {  /* Aplica estilo ao botão de submit quando o mouse passa sobre ele */
+    background-color: #357abd; /* Muda a cor do fundo para um tom mais escuro de azul */
+}
+
+button[type="reset"]:hover {   /* Aplica estilo ao botão de reset quando o mouse passa sobre ele */
+    background-color: #999;    /* Muda a cor do fundo para um tom mais escuro de cinza */
+}
+
+/* Estilo da frase "Volume do aquário:" */
+p {                          /* Seleciona o elemento <p> */
+    font-size: 1.1rem;        /* Define o tamanho da fonte como 1.1rem */
+    font-weight: bold;        /* Torna o texto em negrito */
+    color: #4a90e2;           /* Define a cor do texto como azul */
+    margin-top: 1.5rem;       /* Define a margem superior do <p> */
+    text-align: center;       /* Alinha o texto dentro do <p> ao centro */
+}
+
+/* Ajuste para o input de resultado */
+#resultado {                 /* Seleciona o elemento com id "resultado" */
+    width: 80%;               /* Define a largura como 80% do contêiner */
+    padding: 0.7rem;          /* Adiciona preenchimento interno ao input */
+    border: 2px solid #4a90e2; /* Aplica uma borda de 2px e cor azul */
+    border-radius: 6px;       /* Arredonda as bordas do input */
+    background-color: #e6f7ff; /* Define o fundo como azul claro */
+    color: #333;              /* Define a cor do texto como cinza escuro */
+    font-size: 1.1rem;        /* Define o tamanho da fonte do input */
+    font-weight: bold;        /* Torna o texto dentro do input em negrito */
+    text-align: center;       /* Alinha o texto dentro do input ao centro */
+    margin-top: 0.5rem;       /* Define a margem superior do input */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Aplica uma sombra suave ao redor do input */
+}
