html {
  cursor: url('frutiger/cur.png'), default;
}

body {   
  
  background-image: url("frutiger/backg.jpg");
   background-size:cover;
  background-repeat: repeat;
  background-attachment: fixed;
  text-align: center;
  font-family: Helvetica, sans-serif;    
  line-height: 1.5;
   font-size: 11px;
   display: grid;
  place-content: center;

}
.button_example{
border:2px solid #007FAD; -webkit-border-radius: 50px; -moz-border-radius: 50px;border-radius: 50px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 5px 15px 5px 15px; text-decoration:none; display:inline-block;text-shadow: 1px 1px 0 rgba(255,255,255,0.3);font-weight:bold; color: #01516E;
 background-color: #B0F7FF; background-image: -webkit-gradient(linear, left top, left bottom, from(#B0F7FF), to(#7CE6B4));
 background-image: -webkit-linear-gradient(top, #B0F7FF, #7CE6B4);
 background-image: -moz-linear-gradient(top, #B0F7FF, #7CE6B4);
 background-image: -ms-linear-gradient(top, #B0F7FF, #7CE6B4);
 background-image: -o-linear-gradient(top, #B0F7FF, #7CE6B4);
 background-image: linear-gradient(to bottom, #B0F7FF, #7CE6B4);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#B0F7FF, endColorstr=#7CE6B4);
}

.button_example:hover{
 border:2px solid #1BA186;
 background-color: #ADF7D4; background-image: -webkit-gradient(linear, left top, left bottom, from(#ADF7D4), to(#1F848F));
 background-image: -webkit-linear-gradient(top, #ADF7D4, #1F848F);
 background-image: -moz-linear-gradient(top, #ADF7D4, #1F848F);
 background-image: -ms-linear-gradient(top, #ADF7D4, #1F848F);
 background-image: -o-linear-gradient(top, #ADF7D4, #1F848F);
 background-image: linear-gradient(to bottom, #ADF7D4, #1F848F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ADF7D4, endColorstr=#1F848F);
}


.text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550px;
  transition: inherit;
}

 h1    {
 font-weight: normal; 
    font-size: 30px;
 font-family: 'Jellies'}


 h2   {
 font-weight: normal; 
    font-size: 20px;
   color: #6cd7bb;
 font-family: 'Sofia-Regular'}
 
   h3   {
 font-weight: normal; 
    font-size: 25px;
   color: #6cd7bb;
 font-family: 'Sofia-Regular'}
 
 

 

a:link {
  color: #5f13ab;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #0883AF;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #006e65 ;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #f8ffe0;
  background-color: transparent;
  text-decoration: underline;
}




.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "leftsidebar main rightsidebar"
    "leftsidebar2 main2 rightsidebar2"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  padding: 15px;
   margin: 80px 250px 80px 250px;
  gap: 20px;
  text-align: center;
 
 place-items: inherit;
 
}

   p a {
       color: BlueViolet;
     }
 
 a {
  text-decoration: none;
  
}

 

.container > div.header {
  grid-area: header;
  text-align: center;
 
  
 
}
.container > div.leftsidebar {
  grid-area: leftsidebar;
   text-align: center;
     color:#7500b3;
}
.container > div.main {
  grid-area: main;
    padding:15px;
    
 
}

.container > div.rightsidebar {
  grid-area: rightsidebar;
    text-align: center;
    color:#7500b3;
    
}

.container > leftsidebar2 {
  grid-area: leftsidebar2;
   text-align: center;
  min-width: 100vw;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
 
   
}

.container > main2 {
  grid-area: main2;
    padding:15px;
    
}
.container > rightsidebar2 {
  grid-area: rightsidebar2;
    text-align: center;
    color:#7500b3;
    
}

.container > div.footer {
  grid-area: footer;
  
}




 
.container >div, div.footer, div.header,div.main ,div.leftsidebar, div.rightsidebar,leftsidebar2,  rightsidebar2,div.footer{
 border: 2px solid BlueViolet;
  background-image: linear-gradient(#ACFCFB, #73EBD5, #38A8A8);
    background-size:cover;
  background-repeat: repeat;
  color:#7500b3;
  border-radius: 25px;
  margin: initial;

}
 .leftsidebar {
    padding:35px;
   }
   
    .rightsidebar {
    padding:35px;
   }
   
   
   .main2{
      border: 2px solid BlueViolet;
  background-image: url(frutiger/tile.png);
    background-size:cover;
  background-repeat: repeat;
  color:#7500b3;
  border-radius: 25px;
  margin: initial;
     
     }

    @media (min-width: 768px) {
     
    }
  
 
 .text-image-button {
           
            display: inline-block;
            padding: 10px;
      
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .text-image-button img {
             background-image: url("frutiger/alap.png");
            vertical-align: middle;
            margin-right: 5px;

}

 
@font-face {
  font-family:'Jellies';
  src: url('Jellies.eot'); /* IE9 Compat Modes */
  src: url('Jellies.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Jellies.woff2') format('woff2'), /* Super Modern Browsers */
       url('Jellies.woff') format('woff'), /* Pretty Modern Browsers */
       url('Jellies.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Jellies.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family:'Sofia-Regular';
  src: url('Sofia-Regular.eot'); /* IE9 Compat Modes */
  src: url('Sofia-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Sofia-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('Sofia-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('Sofia-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Sofia-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}




@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
 #textindent
{
   text-indent: 50px;
}
    
.tag-list {
  width: 10rem;
  border-radius: 25px;
  display: flex;
   margin: auto;
  flex-direction: column;
  gap: 4rem 0rem;
  position: relative;
  padding: 0rem 0rem;
  overflow: hidden;
}

.loop-slider, .inner {
    display: flex;
    width: fit-content;
    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--direction);
    animation-duration: var(--duration);
  }
 
.tag {
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
 
  padding: 0.7rem 1rem;
  margin-right: 1rem; margin-right 
  box-shadow: 
    0 0.1rem 0.2rem rgb(0 0 0 / 20%),
    0 0.1rem 0.5rem rgb(0 0 0 / 30%),
    0 0.2rem 1.5rem rgb(0 0 0 / 40%);
}