@font-face {
   font-family: 'cooper';
   src: url('/font/cooperl.ttf') format('ttf');
   font-weight: normal;
   font-style: normal;
}

html {
   min-height: 100vh;
   height: 100%;
   margin: auto;
}

body {
   background-attachment: fixed;
   padding: 0px;
   font-family: cooper;
   color: #d8a748;
   min-height: 100vh;
   height: 100%;
   max-width: 1024px;
   margin: auto;
}

.light {
   background: -webkit-linear-gradient(#000000, #293f50);
   background: -o-linear-gradient(#000000, #293f50);
   background: -moz-linear-gradient(#000000, #293f50);
   background: linear-gradient(to bottom, #000000, #293f50);

}

hr {
   color: #d8a748;
}

a {
   text-decoration: none;
   color: #d8a748;
}

.phone {
   padding: 20px;
   font-size: 26px;
}

.category {
   margin-left: 20px;
   padding: 10px;
   font-size: 26px;
   transition: text-shadow 1.0s ease-out;
}

.category:hover {
   padding: 10px;
   font-size: 26px;
   text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #0ff,
      0 0 20px #00f;
   transition: text-shadow 0s ease-in;
}

.container {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   padding: 10px;
}

.column {
   flex: 1;
   padding: 15px;
}

.center {
   text-align: center;
}

.fadein img {
    position: absolute;
    padding: 3px;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 30s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 30
    }
				
@-webkit-keyframes fade {
   0% {opacity: 0;}
   10% {opacity: 1;}
   17% {opacity: 1;}
   40% {opacity: 1;}
   53% {opacity: 0;}
   100% {opacity: 0;}
}
@keyframes fade {
   0% {opacity: 0;}
   10% {opacity: 1;}
   17% {opacity: 1;}
   40% {opacity: 1;}
   53% {opacity: 0;}
   100% {opacity: 0;}
}
	    
#f1 {
   width: 50%;
   max-width: 500px;
   background-color: lightblue;
   }
#f2 {
   width: 50%;
   max-width: 500px;
   -webkit-animation-delay: -25s;
   background-color: yellow;
}
#f3 {
   width: 50%;
   max-width: 500px;
   -webkit-animation-delay: -20s;
   background-color: lightgreen;
   }
#f4 {
   width: 50%;
   max-width: 500px;
   -webkit-animation-delay: -15s;
   background-color: lightgreen;
   }
#f5 {
   width: 50%;
   max-width: 500px;
   -webkit-animation-delay: -10s;
   background-color: lightgreen;
   }
#f6 {
   width: 50%;
   max-width: 500px;
   -webkit-animation-delay: -5s;
   background-color: lightgreen;
   }

.canvas-container {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh; 
  width: 100vw;
  text-align: center;
  margin: auto;
  z-index: -1;
}
      
#background-canvas {
  z-index: -1; 
  width: 100%;
}
	  
.content {
  position: relative; 
  z-index: 1; 
  padding: 20px;
}