p {
    text-align: justify;
}

a:visited {
  color: #0b0080;
}

.button {
    white-space: nowrap;
}


.comment {
  height: 100px;  
  padding: 20px;
  border: 1px dotted yellow;
  box-sizing: border-box;
  background-color: #ffff000f;
}

.item {
    padding: 10px;
    border: 1px solid gray;
    margin: 0;
}

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  .active, .collapsible:hover {
    background-color: #555;
  }
  
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }

  section h3 {
    display: inline-block;
    font-weight: bold;
    font-size: 2em;
    position: relative;
    margin: 12px 0;
    z-index: 1;
}

  section h3::after {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 4px;
    transform: translateX(-4px);
    border-radius: 3px;
    content: '';
    display: block;
    height: 50%;
    width: 100%;
    background: red;
    z-index: -1;
}

.flex-container {
  display: flex;
  background-color: #fafafa;
}

.flex-container > div {
  background-color: #ffff000f;
  width: 100%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


.logo {
  position:fixed;
  z-index:101;
  left:50%;
  top:60px;
  margin:0 0 0 -140px;
  transform:scale(1) translate3d(0,0,11px) rotate(-7deg);
  transition:transform cubic-bezier(.92,.74,.725,1.115) .3s
 }
 body.with-dev-tools .logo {
  transform:scale(1) translate3d(150px,0,11px) rotate(-7deg)
 }
 .logo img {
  display:block;
  margin:0 auto;
  height:120px
 }
 .scrolled .logo {
  transform:translate3d(0,-93px,11px) rotate(0) scale(.42)
 }
 body.with-dev-tools.scrolled .logo {
  transform:translate3d(150px,-93px,11px) rotate(0) scale(.42)
 }
 
 .header {
  height:50px;
  background:#fff;
  border-bottom:2px solid #08314fff;
  position:fixed;
  overflow:hidden;
  top:0;
  left:0;
  right:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:all .3s;
  transform:translate3d(0,-15px,10px);
  z-index:100
 }
 .scrolled .header {
  transform:translate3d(0,0,10px);
  background:#08314fff
 }
 _::-webkit-:host:not(:root:root),
 .scrolled .header {
  background:rgba(8,49,79,.5)
 }
 

 /*decoration*/
/* main {
  background: url('/cenarios-de-futuro/assets/logo/bg.jpg') no-repeat scroll top right;
  background-size: cover; 
  content: '';
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
} */

.post-link {
  color: blue;
}

body {
  --block-text-color:#222;
  --block-background-color:#fff;
  --block-accent-color:#00ae86;
  --block-shadow-color:#444
 }
 .block {
  display:fixed;
  color:var(--block-text-color);
  border:3px solid var(--block-text-color);
  border-radius:3px;
  padding:4px 8px;
  background:var(--block-background-color);
  font-weight:700;
  cursor:pointer;
  box-sizing:border-box;
  position:relative;
  top:-2px;
  left:-2px;
  transition:transform .2s;
  margin:8px 6px 10px;
  z-index:1;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none
 }
 .block.wrapper,
 .block.wrapper.inline {
  display:inline-block;
  padding:0
 }
 .block.wrapper>* {
  margin:0
 }
 .block:before {
  content:"";
  background:var(--block-background-color);
  border:3px solid var(--block-text-color);
  border-radius:3px;
  position:absolute;
  top:-3px;
  left:-3px;
  height:100%;
  width:100%;
  z-index:-1
 }
 .block:focus,
 .block:hover {
  transform:translate(2px,2px)
 }
 .block:after {
  content:"";
  display:block;
  background:var(--block-shadow-color);
  border:3px solid var(--block-text-color);
  border-radius:3px;
  height:100%;
  width:100%;
  position:absolute;
  top:3px;
  left:3px;
  right:0;
  z-index:-2;
  transition:transform .2s
 }
 .block:focus:after,
 .block:hover:after {
  transform:translate(-2px,-3px)
 }
 .block:active {
  color:var(--block-text-color);
  transform:translate(3px,3px)
 }
 .block:active:after {
  transform:translate(-4px,-4px)
 }
 .block:focus {
  outline:none
 }
 .block.fixed {
  cursor:auto
 }
 .block.fixed:active,
 .block.fixed:active:after,
 .block.fixed:active:before,
 .block.fixed:focus,
 .block.fixed:focus:after,
 .block.fixed:focus:before,
 .block.fixed:hover,
 .block.fixed:hover:after,
 .block.fixed:hover:before {
  transform:none
 }
 .block.accent {
  color:var(--block-background-color)
 }
 .block.accent,
 .block.accent:before {
  background:var(--block-accent-color)
 }
 .block.inline {
  display:inline-block;
  font-size:.75em;
  padding:0 6px;
  margin:3px 2px 1px 4px
 }
 .block.inline:after {
  top:-1px;
  left:-1px
 }
 .block.inline:focus,
 .block.inline:hover {
  transform:translate(1px,1px)
 }
 .block.inline:focus:after,
 .block.inline:hover:after {
  transform:translate(-1px,-1px)
 }
 .block.inline:active {
  transform:translate(2px,2px)
 }
 .block.round,
 .block.round:after,
 .block.round:before {
  border-radius:30px
 }
 .block.round:after {
  left:1px
 }
 /*# sourceMappingURL=blocks.min.css.map */