/* Step 2) Add CSS:  */

 /* Style the image gallery, next and previous buttons, the caption text and the dots:
 Example */
 * {
     box-sizing: border-box;
 }

 /* Position the image container (needed to position the left and right arrows) */
 .container {
     position: relative;
 }

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

 /* Add a pointer when hovering over the thumbnail images */
 .cursor {
     cursor: pointer;
 }

 /* Next & previous buttons */
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 40%;
     width: auto;
     padding: 16px;
     margin-top: -50px;
     color: white;
     font-weight: bold;
     font-size: 20px;
     border-radius: 0 3px 3px 0;
     user-select: none;
     -webkit-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);
 }

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

 /* Container for image text */
 .caption-container {
     text-align: center;
     background-color: #222;
     padding: 2px 16px;
     color: white;
 }

 .row:after {
     content: "";
     display: table;
     clear: both;
 }

 /* Six columns side by side */
 .column {
     float: left;
     width: 16.66%;
 }

 /* Add a transparency effect for thumnbail images */
 .demo {
     opacity: 0.6;
 }

 .active,
 .demo:hover {
     opacity: 1;
 }

 /* =============================================================
                             main
================================================================*/
 main {
     margin-bottom: 10rem;
 }






 /*=========================================================================================*/
 /*                                 news Links
  /*=========================================================================================*/


 .documentation,
 .doc-label {
     border: 1px solid rosybrown;
     margin: 1px;
 }

 .documentation:hover,
 .doc-label:hover {
     box-shadow: var(--box-shadow);
     transform: scale(1.1);

 }

 .documentation:hover,
 .doc-label:hover {
     filter: brightness(1.15);

 }