/* Global variables. */
     :root {
        /* Set sans-serif & mono fonts */
        --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
          "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
          "Helvetica Neue", sans-serif;
        --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      
        /* Default (light) theme */
        --bg: #000000;
          --accent-bg: #000000;
          --text: #ffffff;
          --text-light: #ffffff;
          --border: #000000;
          --accent: #ffffff;
          --code: #f06292;
          --preformatted: #000000;
          --disabled: #21B383;
      }
      
      /* Dark theme */
      @media (prefers-color-scheme: dark) {
        :root {
          color-scheme: dark;
            background-image: url(); /* Acima do Rodapé */
          --bg: #000000;
          --accent-bg: #000000;
          --text: #ffffff;
          --text-light: #ffffff;
          --border: #000000;
          --accent: #ffffff;
          --code: #f06292;
          --preformatted: #000000;
          --disabled: #21B383;
        }
        /* Add a bit of transparency so light media isn't so glaring in dark mode */
        img,
        video {
          opacity: 9.0;
        }
      }
      
      /* Reset box-sizing */
      *, *::before, *::after {
        box-sizing: border-box;
      }
      
      /* Reset default appearance */
      textarea,
      select,
      input,
      progress {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }
      
      html {
        /* Set the font globally */
        font-family: var(--Candara);
        scroll-behavior: smooth;
      }
      
      /* Make the body a nice central block */
      body {
        color: var(--text);
        background-image: url(back.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-size: 100%;
        background-color: var(--bg);
        font-size: 1.15rem;
        line-height: 1.5;
        display:grid;
        grid-template-columns: 1fr min(45rem, 90%) 1fr;
        margin: 0;
      }
      body > * {
        grid-column: 2;
      }
      
      /* Make the header bg full width, but the content inline with body */
      body > header {
        background-color: var(--accent-bg);
        border-bottom: 1px solid var(--border);
        text-align: justify;
        padding: 0 0.5rem 2rem 0.5rem;
        grid-column: 1 / -1;
      }
      
      body > header h1 {
        max-width: 1200px;
        margin: 1rem auto;
      }
      
      body > header p {
        max-width: 40rem;
        margin: 1rem auto;
      }
      
      /* Add a little padding to ensure spacing is correct between content and header > nav */
      main {
        padding-top: 1.5rem;
      }
      
      body > footer {
        background-color: rgb(0, 0, 0);
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2,5cm;
      }
      
      /* Format headers */
      h1 {
        font-size: 3rem;
      }
      
      h2 {
        font-size: 2.6rem;
        margin-top: 3rem;
      }
      
      h3 {
        font-size: 2rem;
        margin-top: 3rem;
      }
      
      h4 {
        font-size: 1.44rem;
      }
      
      h5 {
        font-size: 1.15rem;
      }
      
      h6 {
        font-size: 0.96rem;
      }
      
      /* Prevent long strings from overflowing container */
      p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
      }
      
      /* Fix line height when title wraps */
      h1,
      h2,
      h3 {
        line-height: 1.1;
      }
      
      /* Reduce header size on mobile */
      @media only screen and (max-width: 720px) {
        h1 {
          font-size: 2.5rem;
        }
      
        h2 {
          font-size: 2.1rem;
        }
      
        h3 {
          font-size: 1.75rem;
        }
      
        h4 {
          font-size: 1.25rem;
        }
      }
      
      /* Format links & buttons */
      a,
      a:visited {
        color: var(--accent);
      }
      
      a:hover {
        text-decoration: none;
      }
      
      button,
      [role="button"],
      input[type="submit"],
      input[type="reset"],
      input[type="button"],
      label[type="button"] {
        border: none;
        border-radius: 5px;
        background-color: var(--accent);
        font-size: 1rem;
        color: var(--bg);
        padding: 0.7rem 0.9rem;
        margin: 0.5rem 0;
      }
      
      button[disabled],
      [role="button"][aria-disabled="true"],
      input[type="submit"][disabled],
      input[type="reset"][disabled],
      input[type="button"][disabled],
      input[type="checkbox"][disabled],
      input[type="radio"][disabled],
      select[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      input:disabled,
      textarea:disabled,
      select:disabled {
        cursor: not-allowed;
        background-color: var(--disabled);
      }
      
      input[type="range"] {
        padding: 0;
      }
      
      /* Set the cursor to '?' while hovering over an abbreviation */
      abbr {
        cursor: help;
      }
      
      button:focus,
      button:enabled:hover,
      [role="button"]:focus,
      [role="button"]:not([aria-disabled="true"]):hover,
      input[type="submit"]:focus,
      input[type="submit"]:enabled:hover,
      input[type="reset"]:focus,
      input[type="reset"]:enabled:hover,
      input[type="button"]:focus,
      input[type="button"]:enabled:hover,
      label[type="button"]:focus,
      label[type="button"]:hover {
        filter: brightness(1.4);
        cursor: pointer;
      }
      
      /* Format navigation */
      header > nav {
        font-size: 1rem;
        line-height: 2;
        padding: 1rem 0 0 0;
      }
      
      /* Use flexbox to allow items to wrap, as needed */
      header > nav ul,
      header > nav ol {
        align-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      
      /* List items are inline elements, make them behave more like blocks */
      header > nav ul li,
      header > nav ol li {
        display: inline-block;
      }
      
      header > nav a,
      header > nav a:visited {
        margin: 0 0.5rem 1rem 0.5rem;
        border: 1px solid var(--border);
        border-radius: 5px;
        color: var(--text);
        display: inline-block;
        padding: 0.1rem 1rem;
        text-decoration: none;
      }
      
      header > nav a:hover {
        filter: brightness(1.4);
        cursor: pointer;
      }
      
      /* Reduce nav side on mobile */
      @media only screen and (max-width: 720px) {
        header > nav a {
          border: none;
          padding: 0;
          text-decoration: underline;
          line-height: 1;
        }
      }
      
      /* Consolidate box styling */
      aside, details, pre, progress {
        background-color: var(--accent-bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        margin-bottom: 1rem;
      }
      
      aside {
        font-size: 1rem;
        width: 30%;
        padding: 0 15px;
        margin-left: 15px;
        float: right;
      }
      
      /* Make aside full-width on mobile */
      @media only screen and (max-width: 720px) {
        aside {
          width: 100%;
          float: none;
          margin-left: 0;
        }
      }
      
      article, fieldset {
        border: 1px solid var(--border);
        padding: 1rem;
        border-radius: 5px;
        margin-bottom: 1rem;
      }
      
      article h2:first-child,
      section h2:first-child {
        margin-top: 1rem;
      }
      
      section {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 2rem 1rem;
        margin: 3rem 0;
      }
      
      /* Don't double separators when chaining sections */
      section + section,
      section:first-child {
        border-top: 0;
        padding-top: 0;
      }
      
      section:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }
      
      details {
        padding: 0.7rem 1rem;
      }
      
      summary {
        cursor: pointer;
        font-weight: bold;
        padding: 0.7rem 1rem;
        margin: -0.7rem -1rem;
        word-break: break-all;
      }
      
      details[open] summary + * {
        margin-top: 0;
      }
      
      details[open] summary {
        margin-bottom: 0.5rem;
      }
      
      details[open] > :last-child {
        margin-bottom: 0;
      }
      
      /* Format tables */
      table {
        border-collapse: collapse;
        display: block;
        margin: 1.5rem 0;
        overflow: auto;
        width: 100%;
      }
      
      td,
      th {
        border: 1px solid var(--border);
        text-align: left;
        padding: 0.5rem;
      }
      
      th {
        background-color: var(--accent-bg);
        font-weight: bold;
      }
      
      tr:nth-child(even) {
        /* Set every other cell slightly darker. Improves readability. */
        background-color: var(--accent-bg);
      }
      
      table caption {
        font-weight: bold;
        margin-bottom: 0.5rem;
      }
      
      /* Format forms */
      textarea,
      select,
      input {
        font-size: inherit;
        font-family: inherit;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        color: var(--text);
        background-color: var(--bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        box-shadow: none;
        max-width: 100%;
        display: inline-block;
      }
      label {
        display: block;
      }
      textarea:not([cols]) {
        width: 100%;
      }
      
      /* Add arrow to drop-down */
      select:not([multiple]) {
        background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
          linear-gradient(135deg, var(--text) 51%, transparent 49%);
        background-position: calc(100% - 15px), calc(100% - 10px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: 25px;
      }
      
      /* checkbox and radio button style */
      input[type="checkbox"],
      input[type="radio"] {
        vertical-align: middle;
        position: relative;
      }
      
      input[type="radio"] {
        border-radius: 100%;
      }
      
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: var(--accent);
      }
      
      input[type="checkbox"]:checked::after {
        /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
        content: " ";
        width: 0.18em;
        height: 0.32em;
        border-radius: 0;
        position: absolute;
        top: 0.05em;
        left: 0.17em;
        background-color: transparent;
        border-right: solid var(--bg) 0.08em;
        border-bottom: solid var(--bg) 0.08em;
        font-size: 1.8em;
        transform: rotate(45deg);
      }
      input[type="radio"]:checked::after {
        /* creates a colored circle for the checked radio button  */
        content: " ";
        width: 0.25em;
        height: 0.25em;
        border-radius: 100%;
        position: absolute;
        top: 0.125em;
        background-color: var(--bg);
        left: 0.125em;
        font-size: 32px;
      }
      
      /* Makes input fields wider on smaller screens */
      @media only screen and (max-width: 720px) {
        textarea,
        select,
        input {
          width: 100%;
        }
      }
      
      /* Ensures the checkbox and radio inputs do not have a set width like other input fields */
      input[type="checkbox"],
      input[type="radio"] {
        width: auto;
      }
      
      /* Set a height for color input */
      input[type="color"] {
        height: 2.5rem;
        padding:  0.2rem;
      }
      
      /* do not show border around file selector button */
      input[type="file"] {
        border: 0;
      }
      
      /* Misc body elements */
      hr {
        color: var(--border);
        border-top: 1px;
        margin: 1rem auto;
      }
      
      mark {
        padding: 2px 5px;
        border-radius: 4px;
        background-color: var(--marked);
      }
      
      img,
      video {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
      }
      
      figure {
        margin: 0;
        text-align: center;
      }
      
      figcaption {
        font-size: 0.9rem;
        color: var(--text-light);
        margin-bottom: 1rem;
      }
      
      blockquote {
        margin: 2rem 0 2rem 2rem;
        padding: 0.4rem 0.8rem;
        border-left: 0.35rem solid var(--accent);
        color: var(--text-light);
        font-style: italic;
      }
      
      cite {
        font-size: 0.9rem;
        color: var(--text-light);
        font-style: normal;
      }
      
      dl {
        display: grid;
        grid-template-columns: auto 1fr;
      }
      
      dl dt {
        grid-column-start: 1;
        color: var(--text-light);
      }
      
      dl dd {
        grid-column-start: 2;
      }
      
      /* Use mono font for code elements */
      code,
      pre,
      pre span,
      kbd,
      samp {
        font-family: var(--mono-font);
        color: var(--code);
      }
      
      kbd {
        color: var(--preformatted);
        border: 1px solid var(--preformatted);
        border-bottom: 3px solid var(--preformatted);
        border-radius: 5px;
        padding: 0.1rem 0.4rem;
      }
      
      pre {
        padding: 1rem 1.4rem;
        max-width: 100%;
        overflow: auto;
        color: var(--preformatted);
      }
      
      /* Fix embedded code within pre */
      pre code {
        color: var(--preformatted);
        background: none;
        margin: 0;
        padding: 0;
      }
      
      /* Progress bars */
      /* Declarations are repeated because you */
      /* cannot combine vendor-specific selectors */
      progress {
        width: 100%;
      }
      
      progress:indeterminate {
        background-color: var(--accent-bg);
      }
      
      progress::-webkit-progress-bar {
        border-radius: 5px;
        background-color: var(--accent-bg);
      }
      
      progress::-webkit-progress-value {
        border-radius: 5px;
        background-color: var(--accent);
      }
      
      progress::-moz-progress-bar {
        border-radius: 5px;
        background-color: var(--accent);
        transition-property: width;
        transition-duration: 0.3s;
      }
      
      progress:indeterminate::-moz-progress-bar {
        background-color: var(--accent-bg);
      }  

      #rcorners1 {
        border-radius: 25px;
        background: #000000;
        opacity: 80%;
        padding: 40px; 
        width: auto;
        height: 80%;  
      }

      #rcorners2 {
        border-radius: 25px;
        background: #000000;
        opacity: 80%;
        padding: 40px; 
        width: auto;
        height: 80%;   
      }

      #rcorners3 {
        background: #acacac;
        opacity: 80%;
        padding: 100px; 
        width: auto;
        height: 20%;  
      }

      /* Slide Show Simples */
      
     * {box-sizing:border-box}

        .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
        }

        /* Hide the images by default */
        .mySlides {
        display: none;
        }

        /* Next & previous buttons */
        .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
        right: 0;
        border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
        }

        /* Caption text */
        .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
        background-color: #717171;
        }

        /* Fading animation */
        .fade {
        animation-name: fade;
        animation-duration: 1.5s;
        }

        @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
        }