.scrollerer {
  overflow-y: scroll;
  overflow-x:hidden;
  white-space: nowrap;
    padding: 3px;
    border-radius:28px;
    margin: 0px;
   -moz-box-shadow:    inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;
}

.scrolling {
  animation: marquee 4s linear infinite;
  display: inline-block;
  padding-right: 10px;
}

.trail {
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); /* o un altro colore */
  pointer-events: none;
  transition: all 0.1s ease-out;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

::-webkit-scrollbar {
  width: 20px;
  height: 0px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 ;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: ;
  border-radius: 10px;
  border: 0.5px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover {
  background: ;
}


body {
  font-family: 'Open Sans', sans-serif ;
  font-style: normal;
  padding:3px 7px;
  margin: 4px 10px;
  background-color: #000000;
  text-align: left;
  color: #ffffff;
  width: 100%
}



a {   color: #ffffff;}

a:hover  {   color: rgba(255,255,255,0.23);
    text-shadow: 0px 3px 3px #ffffff; }

h3 {
  font-family: "Audiowide", sans-serif;
  font-style: normal;
  color: #ff0096;}

  i {
    font-family: "Audiowide", sans-serif;
    font-size: 17px;
    font-style: normal;
    color: #ff0096;}



  g {
    font-family: "Audiowide", sans-serif;
    font-style: normal;
    font-size: 105px;
    color: #ffffff ;
    text-shadow: 10px 10px 10px #00ff69;}

    f {
      font-family: "Audiowide", sans-serif;
      font-style: normal;
      color: #00ff69 ;
      text-shadow: 10px 10px 10px #00ff69;}




       #phone {
    display: none
    }

    #site_menu {
    	font-family: 'Open Sans', sans-serif;
        background: rgba(255, 255, 255, 1);
        color: #000;
    	font-size: 36px;
    	font-style: normal;
    	padding: 20px 30px 90px 30px;

      }





   .btn {
   	background-color: rgba(0,0,0,1);
   	border-radius:15px;
   	border:0.5px solid #ffffff;
   	cursor:pointer;
    color: #ffffff;
   	font-family: ;
    width: 24%;
    display: inline-block;
   	font-size:15px;
   	padding:3px 7px;
    margin: 4px 2px;
   	text-decoration:none;
    box-shadow: 0px 8px 15px #ffffff;
     	   }


   .btn:hover {
   	background-color: rgba(0,0,0,0.1);
    color: rgba(255,255,255);
    text-shadow: 0px 3px 3px #ffffff;
   }


   #myBtnContainer {
     position: fixed;
     width: 100%;
     display: inline-block;}


   .scrollerer {   color: rgba(255,255,255,0);
         text-shadow: 0px 3px 3px #ffffff; }

         img {padding:3px 7px;

  border:0.3px solid #ffffff;

    overflow: clip;
    ma-width: 70%;

  }


         .row {
           position: absolute;
           left: 250px;
           top: 250px;
           min-width: 100%;
           min-height: 100%;
           width: auto;

           }

           .column {
             position: fixed;
             right: 25px;
             top: 25px;
             width: 500px;
             color: #ff0096;
             text-shadow: 10px 10px 10px #ffffff;
             text-align: justify;
           }

           .content {
             position: relative;
             width: 50%;
             text-align: justify;
           }

           .contento {
             position: relative;
             width: 45%;
             text-align: justify;
           }

           .img {
             position: relative;
             width: 75%;
             text-align: justify;
           }


           [grid-pad="2"] {
    padding: 1rem;}

    [grid-gutter="4"] {
    margin: -2rem;
}

[grid-row] {
    align-items: flex-start;

    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }

    .trail { /* className for the trail elements */
      position: absolute;
      height: 25px; width: 25px;
      border-radius: 20px;
      background: #ff0096;
    }

    .box {display: flex;}
    model-viewer {width:800px; height:600px; margin:0, auto;}


    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }

    @media only screen and (min-width: 600px) {
      /* For tablets: */
      .col-s-1 {width: 8.33%;}
      .col-s-2 {width: 16.66%;}
      .col-s-3 {width: 25%;}
      .col-s-4 {width: 33.33%;}
      .col-s-5 {width: 41.66%;}
      .col-s-6 {width: 50%;}
      .col-s-7 {width: 58.33%;}
      .col-s-8 {width: 66.66%;}
      .col-s-9 {width: 75%;}
      .col-s-10 {width: 83.33%;}
      .col-s-11 {width: 91.66%;}
      .col-s-12 {width: 100%;}
    }
    @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }


    body {
      font-size: 16px;
    }

    .container {
      max-width: 1200px; /* Limits width for readability on larger screens */
      margin: 0 auto;
      padding: 20px;
    }

    /* Styles for tablets (768px and smaller) */
    @media (max-width: 768px) {
      body {
        font-size: 15px; /* Slightly smaller text on smaller screens */
      }

    }

    /* Styles for mobile phones (480px and smaller) */
    @media (max-width: 480px) {
      body {
        font-size: 14px; /* Reduces font size further for very small screens */
      }
      h1 {
        font-size: 1.5rem; /* Scales down headings */
      }
    }

    @media (max-width: 480px) {
      body {
        line-height: 1.8;
      }
    }