@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');'
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');



body {margin-left:5%;}

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

p, ul, li, label, q {
  font-family: "Zilla Slab", serif;
  text-rendering: optimizelegibility;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

h1 {
  font-family: 'Zilla Slab', serif;
  font-size: 26px;
}

h2 {
  font-family: 'DM Sans', sans-serif;
  color: #35203D;
  font-weight: 600;
  text-align: left;
}

h2 u {
  box-shadow: inset 0 -4px 0 #fff2cc;
  text-decoration: none;
}

u {
    box-shadow: inset 0 -12px 0 #fff2cc;
    text-decoration-color: #FFF056;
}

h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3em;
  text-align: left;
}

p, ul, li, q {
  font-weight: 300;
  font-size: 20px;
  color: #120931;
  text-align:left;
}

b {
  font-weight: 600;
}

button {
  font-size: 19pt;
  font-family: 'Chivo',sans-serif;
  font-weight: bold;
  color: black;
  background-color: #fcf057;
  padding: 26px;
  border: 2px dashed #afafaf;
  border-radius: 8px;
  box-shadow: 6px 12px 20px rgba(46, 229, 157, 0.4);
  cursor: pointer;
}

/* Botão Flutuante */
        .floating-button {
            position: fixed;
            bottom: 20px;
            right: 50%;
            transform: translateX(50%);
            background: #0779e4;
            color: #fff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .floating-button:hover {
            background: #065bb5;
        }


audio {
  border-radius: 8px;
  background-color: #39f;
  width: 80%;
  height: 42px;
}

#layout-23{
    margin: 0;
/*    margin-top: 150px;*/
    width: 100%;

        }
        
        .layout-23-miolo{
        width:98%;
            margin: auto;
            max-width: 400px;
            padding-top: 15px;
        }
        
                .layout-23-miolo-box{
        width:98%;
            margin: auto;
            max-width: 450px;
     
                    display: flex;
    align-items: center;
        }
        
        
        .miolo-image {
  width: 30%;
  float: left;
            display: flex;
}
        
        .miolo-image img{
        max-width: 150px;
            margin:0;
            width: 100%;
        }

.miolo-text {
  width: 70%;
  float: right;
    font-size:1em;
    padding:10px;

    display: flex;
}
        
        .miolo-text p{
        font-family: Arial;
        font-size: 16px;
        line-height: 1.4;
        }
        
        
        
        
        .bd-container{
          
        }
        .box{padding: 20px}
        
        .box:hover {
      cursor: pointer;
    }

form {
}

input {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-style: dashed;      

  -webkit-border-left: none;
  -webkit-border-right: none;
  -webkit-border-top: none;
  -webkit-border-bottom-style: dashed;      

  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
}

ssinput {
      box-shadow: 4px 4px;
      -webkit-box-shadow: 3px 3px 6px 6px ##35203D;
      box-shadow: 3px 3px 6px 6px ##35203D;
}

.cursor {
  position: relative;
}
.cursor i {
  position: absolute;
  width: 1px;
  height: 80%;
  background-color: gray;
  left: 5px;
  top: 10%;
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  opacity: 1;
}

.cursor input:focus + i {
  display: none;
}

.caixadetexto {
  	max-width: 710px;
		flex-wrap: wrap;
    text-rendering: optimizeLegibility;
    line-height: 1.6em;
}



.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
  margin-top:16px;
}

.blink_text
{
    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
}

@-moz-keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
 }


.linha {
    width: 100%;
    height: 1px;
    background-color: #e4ebf3;
    margin-top: 8px;
    margin-bottom: 8px;
}