@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box; font-family: "Kode Mono", monospace;}

::-webkit-scrollbar-track{background-color:#333;}
::-webkit-scrollbar{width:0; background-color:#333;}
::-webkit-scrollbar-thumb{background-color:#111;}

::-webkit-input-placeholder{color: #3d3d3d;}
:-moz-placeholder{color: #3d3d3d;}
::-moz-placeholder{color: #3d3d3d;}
:-ms-input-placeholder{color: #3d3d3d;}

:root{background-color: #000; color: #fff;}

body{background-color: #191919;}
body.playing{}

#start{width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; background-color: #000000ab; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; text-align: center;}
#start .wrapp-botao-start{width: 150px; height: 150px; background-color: transparent; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%); display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; border-radius: 100%; cursor: pointer;}
#start .wrapp-botao-start span{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; color: #286f2b; font-size: 18px; font-weight: 700; border-radius: 100%; position: relative; z-index: 2; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
#start .wrapp-botao-start span svg{width: 50px; height: auto; fill: #286f2b;}
#start .wrapp-botao-start i{width: 100%; height: 100%; content: ""; position: absolute; z-index: 1; background-color: transparent; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%) !important; border-radius: 100%; -webkit-animation: pulseStart 3s ease-out infinite; animation: pulseStart 3s ease-out infinite;}
#start .wrapp-botao-start i:nth-child(2){-webkit-animation-delay: 2s; animation-delay: 2s;}
#start .wrapp-botao-start i:nth-child(3){-webkit-animation-delay: 1s; animation-delay: 1s;}
#start .wrapp-botao-start:hover span, #start .wrapp-botao-start:hover span svg{color: #fff; fill: #fff;}
#start .wrapp-botao-start:hover i{background-image: linear-gradient(180deg, #41a8fb 0%, #1785dd 100%) !important;}
@-webkit-keyframes pulseStart{100%{-webkit-transform: scale(2); opacity: 0;}}
@keyframes pulseStart{100%{transform: scale(2); opacity: 0;}}

#wrapp{width: 100%; max-width: 1200px; margin: 0 auto 0; padding: 20px 20px 180px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px;}

.results{width: 100%; min-height: 105px; background-color: #404229; padding: 0 15px; border-radius: 10px; display: flex; flex-direction: column; align-items: start; justify-content: center; position: relative;}
.results *{-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.results.start{padding: 15px; align-items: initial; justify-content: initial;}
.results h1{font-size: 18px; font-weight: 700; line-height: 36px; color: #a6a97a; position: relative; z-index: 1;}
.results h1 span{display: block; font-size: 30px;}
.results img{width: 145px; height: auto; position: absolute; right: 15px; bottom: 0; z-index: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 1)); -webkit-filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 1));}
.results.start h1, .results.start img{display: none;}

.results .output{display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.results .output span{font-size: 18px; font-weight: 700; color: #22c55e; background-color: #161616; padding: 0 5px; border-radius: 5px; word-break: break-word;}
.results.start #morse-code.output{border-bottom: 1px dashed #5c5e43; margin-bottom: 14px; padding-bottom: 14px;}
.results .limpar{width: 30px; height: 30px; background-image: linear-gradient(180deg, #ff7f76 0%, #f44336 100%); display: none; align-items: center; justify-content: center; text-align: center; border-radius: 100%; position: absolute; top: -15px; right: -15px; cursor: pointer;}
.results .limpar:hover{box-shadow: 0 0 0 2px #fff inset;}
.results .limpar svg{width: 20px; stroke: #fff;}

.table{width: 100%; background-color: #222; margin: 0 auto 0; padding: 40px 30px; border-radius: 10px;}
.table h2{font-size: 18px; font-weight: 700; color: #22c55e; text-align: center; margin-bottom: 10px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.table > div{width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px;}
.table > div > div{width: 100%; height: 45px; background-color: #161616; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; cursor: pointer; position: relative;}
.table > div > div:hover{box-shadow: 0 0 0 2px #22c55e inset;}
.table > div > div.playing{background-color: #22c55e; box-shadow: 0 0 25px 10px #22c55e !important; z-index: 1;}
.table > div > div span{font-size: 16px; font-weight: 700; color: #22c55e; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.table > div > div.playing span{color: #161616;}

.divider{width: 100%; font-size: 22px; font-weight: 700; color: #22c55e; margin: 20px 0 0 0; padding: 30px 0 0 0; border-top: 1px dashed #2f4236; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}

/**/
.converter-text-to-morse{width: 100%; background-color: #222; margin: 0 auto 0; padding: 10px; border-radius: 10px;}
.converter-text-to-morse.modal{max-width: 1000px; height: 400px; position: fixed; left: 50%; top: 50%; z-index: 10000; margin: -200px 0 0 -500px;}
.converter-text-to-morse h2{font-size: 16px; font-weight: 700; color: #22c55e; margin-bottom: 10px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.converter-text-to-morse.modal h2{display: none;}

.converter-text-to-morse .wrapp-outputs{display: none; width: 100%; height: 310px; overflow: auto; border: 3px solid #1a1a1a; border-radius: 10px; position: relative;}
.converter-text-to-morse.modal .wrapp-outputs{display: block;}

.converter-text-to-morse .wrapp-outputs .results-morse{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 20px 20px 55px 20px;}
.converter-text-to-morse .wrapp-outputs .results-morse span{font-size: 18px; font-weight: 700; color: #22c55e; background-color: #161616; padding: 0 5px; border-radius: 5px; word-break: break-word;}
.converter-text-to-morse .wrapp-outputs .results-morse span.playing{background-color: #22c55e; color: #161616;}

.converter-text-to-morse .wrap-copy{width: 100%; height: 0; position: relative; left: 0; bottom: 35px; z-index: 1; display: none; padding: 0 10px;}
.converter-text-to-morse.modal .wrap-copy{display: block;}
.converter-text-to-morse .copy-morse{width: 100%; height: 25px; background-color: #000; display: flex; align-items: center; justify-content: center; text-align: center; color: #797979; font-size: 12px; font-weight: 700; border-radius: 20px; position: relative; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.converter-text-to-morse .copy-morse:hover{background-color: #22c55e; color: #000;}

.converter-text-to-morse .wrapp-inputs{width: 100%; display: block; position: relative;}
.converter-text-to-morse.modal .wrapp-inputs{margin-top: 10px;}
.converter-text-to-morse .wrapp-inputs .receive-text{width: 100%; height: 60px; border: 3px solid #161616; border-radius: 50px; padding: 0 65px 0 20px; font-size: 16px; font-weight: 700; color: #22c55e; background-color: #191919; outline: none;}
.converter-text-to-morse .wrapp-inputs .receive-text.error{border: 3px solid #f44336;}
.converter-text-to-morse .wrapp-inputs .see-morse{width: 60px; height: 60px; background-color: #191919; border-radius: 100%; border: 3px solid #222; box-shadow: 0 0 0 3px #161616; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; padding-left: 6px; cursor: pointer;}
.converter-text-to-morse .wrapp-inputs .see-morse:hover{background-color: #22c55e; border: 3px solid #22c55e;}
.converter-text-to-morse .wrapp-inputs .see-morse svg{width: 36px; fill: #22c55e;}
.converter-text-to-morse .wrapp-inputs .see-morse:hover svg{fill: #286f2b;}

.converter-text-to-morse .close{width: 30px; height: 30px; background-image: linear-gradient(180deg, #ff7f76 0%, #f44336 100%); display: none; align-items: center; justify-content: center; text-align: center; border-radius: 100%; position: absolute; top: -10px; right: -10px; cursor: pointer;}
.converter-text-to-morse.modal .close{display: flex;}
.converter-text-to-morse.modal .close:hover{box-shadow: 0 0 0 2px #fff inset;}
.converter-text-to-morse .close svg{width: 20px; fill: #fff;}
/**/

/**/
.converter-morse-to-text{width: 100%; background-color: #222; margin: 0 auto 0; padding: 10px; border-radius: 10px;}
.converter-morse-to-text.modal{max-width: 1000px; height: 400px; position: fixed; left: 50%; top: 50%; z-index: 10000; margin: -200px 0 0 -500px;}
.converter-morse-to-text h2{font-size: 16px; font-weight: 700; color: #22c55e; margin-bottom: 10px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.converter-morse-to-text.modal h2{display: none;}

.converter-morse-to-text .wrapp-outputs{display: none; width: 100%; height: 310px; overflow: auto; border: 3px solid #1a1a1a; border-radius: 10px; position: relative;}
.converter-morse-to-text.modal .wrapp-outputs{display: block;}

.converter-morse-to-text .wrapp-outputs .results-text{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 20px 20px 55px 20px;}
.converter-morse-to-text .wrapp-outputs .results-text span{font-size: 18px; font-weight: 700; color: #22c55e; background-color: #161616; padding: 0 5px; border-radius: 5px; word-break: break-word;}
.converter-morse-to-text .wrapp-outputs .results-text span.playing{background-color: #22c55e; color: #161616;}

.converter-morse-to-text .wrap-copy{width: 100%; height: 0; position: relative; left: 0; bottom: 35px; z-index: 1; display: none; padding: 0 10px;}
.converter-morse-to-text.modal .wrap-copy{display: block;}
.converter-morse-to-text .copy-text{width: 100%; height: 25px; background-color: #000; display: flex; align-items: center; justify-content: center; text-align: center; color: #797979; font-size: 12px; font-weight: 700; border-radius: 20px; position: relative; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.converter-morse-to-text .copy-text:hover{background-color: #22c55e; color: #000;}

.converter-morse-to-text .wrapp-inputs{width: 100%; display: block; position: relative;}
.converter-morse-to-text.modal .wrapp-inputs{margin-top: 10px;}
.converter-morse-to-text .wrapp-inputs .receive-morse{width: 100%; height: 60px; border: 3px solid #161616; border-radius: 50px; padding: 0 65px 0 20px; font-size: 16px; font-weight: 700; color: #22c55e; background-color: #191919; outline: none;}
.converter-morse-to-text .wrapp-inputs .receive-morse.error{border: 3px solid #f44336;}
.converter-morse-to-text .wrapp-inputs .see-text{width: 60px; height: 60px; background-color: #191919; border-radius: 100%; border: 3px solid #222; box-shadow: 0 0 0 3px #161616; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; padding-left: 6px; cursor: pointer;}
.converter-morse-to-text .wrapp-inputs .see-text:hover{background-color: #22c55e; border: 3px solid #22c55e;}
.converter-morse-to-text .wrapp-inputs .see-text svg{width: 36px; fill: #22c55e;}
.converter-morse-to-text .wrapp-inputs .see-text:hover svg{fill: #286f2b;}

.converter-morse-to-text .close{width: 30px; height: 30px; background-image: linear-gradient(180deg, #ff7f76 0%, #f44336 100%); display: none; align-items: center; justify-content: center; text-align: center; border-radius: 100%; position: absolute; top: -10px; right: -10px; cursor: pointer;}
.converter-morse-to-text.modal .close{display: flex;}
.converter-morse-to-text.modal .close:hover{box-shadow: 0 0 0 2px #fff inset;}
.converter-morse-to-text .close svg{width: 20px; fill: #fff;}
/**/

.fundo-modal{width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; background-color: #000000ab; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: none;}

section{width: 100%; background-color: #222; padding: 40px 30px; border-radius: 10px;}
section h2{font-size: 20px; font-weight: 700; color: #22c55e; margin-bottom: 20px;}
section p{font-size: 14px; font-weight: 400; line-height: 26px; color: #a6a97a; margin-bottom: 10px;}
section p:last-child{margin-bottom: 0;}
section p b{font-weight: 700;}

#footer{width: 100%; height: 0; display: flex; align-items: end; justify-content: center; position: fixed; left: 0; bottom: 30px; z-index: 3;}
#footer #morse-btn{width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; border-radius: 50%; cursor: pointer; border: 15px solid #191919; box-sizing: initial; background-image: var(--btn-gradient); --btn-gradient: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%); --wave-duration: 1.2s;}
#footer #morse-btn svg{width: 60px; fill: #286f2b; position: relative; z-index: 2;}
#footer #morse-btn:before, #footer #morse-btn:after{width: 100px; height: 100px; content: ""; position: absolute; z-index: 1; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%) !important; border-radius: 100%; -webkit-animation: pulseBotao 2s linear infinite; animation: pulseBotao 2s linear infinite;}
#footer #morse-btn:after{-webkit-animation-delay: 1s; animation-delay: 1s;}

#footer #morse-btn .wave{position: absolute; inset: 0; border-radius: 50%; background-image: var(--btn-gradient); pointer-events: none; animation: pulse var(--wave-duration) linear forwards; will-change: transform, opacity;}

#footer #morse-btn.ativo, #footer #morse-btn.ativo:before, #footer #morse-btn.ativo:after, #footer #morse-btn.ativo .wave{background-image: linear-gradient(180deg, #FF9800 0%, #F44336 100%) !important;}
#footer #morse-btn.ativo svg{fill: #fff;}

@-webkit-keyframes pulseBotao{100%{-webkit-transform: scale(1.5); opacity: 0;}}
@keyframes pulseBotao{100%{transform: scale(1.5); opacity: 0;}}

@keyframes pulse{
    0%{transform: scale(1); opacity: .55;}
    50%{transform: scale(1.8); opacity: .25;}
    100%{transform: scale(2.5); opacity: 0;}
}

@media(max-width: 1090px){
    .converter-text-to-morse.modal{max-width: 600px; height: 400px; margin: -200px 0 0 -300px;}
    .converter-morse-to-text.modal{max-width: 600px; height: 400px; margin: -200px 0 0 -300px;}
}

@media(max-width: 700px){
    .table > div{grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
    .table > div > div span{font-size: 14px;}

    .converter-text-to-morse.modal{max-width: 100%; height: 100%; margin: 0; left: 0; top: 0; border-radius: 0;}
    .converter-text-to-morse .wrapp-inputs .see-morse{background-color: #191919 !important; border: 3px solid #222 !important;}
    .converter-text-to-morse .wrapp-inputs .see-morse svg{fill: #22c55e !important;}
    .converter-text-to-morse .copy-morse{background-color: #000 !important; color: #797979 !important;}
    .converter-text-to-morse .close{top: 5px; right: 5px;}

    .converter-morse-to-text.modal{max-width: 100%; height: 100%; margin: 0; left: 0; top: 0; border-radius: 0;}
    .converter-morse-to-text .wrapp-inputs .see-text{background-color: #191919 !important; border: 3px solid #222 !important;}
    .converter-morse-to-text .wrapp-inputs .see-text svg{fill: #22c55e !important;}
    .converter-morse-to-text .copy-text{background-color: #000 !important; color: #797979 !important;}
    .converter-morse-to-text .close{top: 5px; right: 5px;}

    #footer #morse-btn, #footer #morse-btn:before, #footer #morse-btn:after{width: 80px; height: 80px;}
}

@media(max-width: 450px){
    #wrapp{padding: 20px 20px 170px 20px;}

    .results h1{line-height: 32px;}
    .results h1 span{font-size: 28px;}
    .results img{width: 140px; right: 10px;}

    .table{padding: 25px 10px;}
    .table h2{font-size: 16px;}
    .table > div > div{height: 40px;}
    .table > div > div:hover{box-shadow: none;}
    .table > div > div span{font-size: 12px;}

    .converter-text-to-morse{padding: 25px 10px;}

    .converter-morse-to-text{padding: 25px 10px;}

    section{padding: 25px 10px;}
    section h2{font-size: 18px; line-height: 24px; margin-bottom: 15px;}

    #footer #morse-btn, #footer #morse-btn:before, #footer #morse-btn:after{width: 80px; height: 80px;}
}

@media(max-width: 400px){
    .results h1{font-size: 16px; line-height: 24px;}
    .results h1 span{font-size: 20px;}
    .results img{width: 140px; right: 10px;}
}