@charset "UTF-8";

:root {
   --bg: #FFFFFF;
   --bg-main: rgb(233, 233, 233);
   --main-shadow: rgb(230, 230, 230);
   --teclado: rgb(220, 220, 220);
   --teclado-hover: rgb(210, 210, 210);
   --teclado-destaque: rgb(136, 197, 230);
   --letra: #000000;
}

body.escuro {
   --bg: #1e1e1e;
   --bg-main: #2d2d2d;
   --main-shadow: rgba(0, 0, 0, 0.294);
   --teclado: #3a3a3a;
   --teclado-hover: #282828;
   --teclado-destaque: rgb(0, 150, 231);
   --letra: #FFFFFF;
}

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

body {
   font-family: Arial, Helvetica, sans-serif;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   background-color: var(--bg);
   color: var(--letra);
}

main {
   width: 350px;
   background-color: var(--bg-main);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 2px 2px 5px var(--main-shadow);
}

main textarea {
   background-color: var(--bg);
   color: var(--letra);
   cursor: text;
   width: 100%;
   resize: none;
   border: none;
   border-radius: 10px;
   padding: 10px;
   font-size: 1.5em;
   text-align: right;
   margin-bottom: 10px;
}

main .teclado {
   display: grid;
   grid-template-columns: auto auto auto auto;
   gap: 5px;
}

main #mais {
   grid-column: 4;
   grid-row: 4 / 4 span;
   background-color: var(--teclado-destaque);
}

main .teclado button {
   border: none;
   background-color: var(--teclado);
   font-size: 1.4em;
   padding: 15px;
   border-radius: 10px;
   transition: background-color 0.2s;
   cursor: pointer;
   color: var(--letra);
}

main .teclado button:hover {
   background-color: var(--teclado-hover);
}

.notificacao {
   overflow: hidden;
   position: fixed;
   bottom: 0;
   right: 0;
   margin: 20px;
   background-color: #C31D39;
   border-radius: 10px;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.354);
   color: white;
   min-width: 300px;
   transition: .2s;
   cursor: pointer;
}

.notificacao:hover {
   background-color: #b70825;
}

.notificacao .notificacao-container {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px;
}

@keyframes cooldown {
   from { width: 100%; }
   to { width: 0%; }
}

div.cooldown {
   background-color: #891125;
   width: 100%;
   height: 5px;
   animation: cooldown 5s linear forwards;
}

header {
   display: flex;
   margin-top: 10px;
   gap: 10px;
}

header h2 {
   font-size: 1.3em;
   font-weight: normal;
}

.switch {
   display: block;
   background-color: var(--bg-main);
   width: 50px;
   border-radius: 20px;
   height: 25px;
   margin-bottom: 20px;
   cursor: pointer;
}

.thumb {
   display: block;
   position: relative;
   top: 2.5px;
   left: 3px;
   height: 20px;
   width: 20px;
   border-radius: 100%;
   background-color: var(--teclado-destaque);
   transform: translateX(0);
   transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);;
}

.thumb.active {
   transform: translateX(24px);
}

.switch input {
   display: none;
}

footer {
   margin-bottom: 10px;
}

footer a {
   color: var(--letra);
}