::-webkit-scrollbar {
    width: 0; /* remove scrollbar space */
    background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
    background: transparent;
}

html {scroll-behavior: smooth; overflow-x: hidden;}


@font-face {
   font-family: Grapesoda;
   src: url(FONTS/GrapeSoda.ttf);
}


@font-face {
   font-family: VCR;
   src: url(FONTS/VCR_OSD_MONO_1.001.ttf);
}

@font-face {
   font-family: Retron;
   src: url(FONTS/Retron2000.ttf);
}

@font-face {
    font-family: DigitalDisco;
    src: url(FONTS/DigitalDisco.ttf);
}

@font-face {
    font-family: zyzol;
    src: url(FONTS/ZyzolRound-DOe9D.otf);
}

@font-face {
   font-family: Franxurter;
   src: url(FONTS/FranxurterTotallyFat.ttf);
}

@font-face {
   font-family: monkey;
   src: url(FONTS/Talk-to-three-headed-monkey.ttf);
}

@font-face {
   font-family: arial_narrow_7;
   src: url(FONTS/arial_narrow_7.ttf);
}


body {
    overflow-x: hidden; 
margin: 0; letter-spacing: 1px; 
font-family: 'DigitalDisco'; text-align: left; color: #201f24;
}

h1 {font-size: 25px;}
h2 {font-size: 20px;}
p {font-size: 17px; line-height: normal; letter-spacing: normal; font-family: 'arial_narrow_7';}
mark {background-color: #0000000D; font-style: normal; border-radius: 5px; padding: 5px;}
a {color: #7d24e3; text-decoration: none;}
a:hover {position:relative; top: -5px;}

main {margin: auto; width: 80%; padding: 15px; border-radius: 5px; 

    margin-top: 1em; margin-bottom: 1em;
}

#content {margin: auto; width: 50%; background-color: #ffffff; padding: 35px; border-radius: 5px; border: 1px solid #201f24; filter: drop-shadow(0 7px 1px #00000066); margin-top: 2em; margin-bottom: 2em;}

#location {margin-top: 10px; margin-bottom: 30px; border-bottom: 1px #201f24 dashed;}
footer {margin-top: 8vh; font-size: 80%;}

.layout {    display: flex;}
.col {
  padding: 1em;
  margin: 0 auto;
} 

.col-main {flex: 1;  }  
.col-complementary {flex: 1;  }

.italic {font-style: italic;}

/**** Hover *****/

.hovertext {
    position: relative;
}

.hovertext:before {
    font-size: 40px;
    text-shadow: 2px 2px 2px #201f2466;
    font-family: 'Grapesoda';  text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;

    content: attr(data-hover);
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    border-radius: 5px;
    padding: 3px 3px;
    transition: opacity 0.2s ease-in-out;

    position: absolute;
    bottom: 90px;
    left: 50%; 
    transform: translateX(-50%);
    
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #000;
}

.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}


#dhtmltooltip{
    position: absolute;
    padding: 5px;
    border-radius: 5px;
    visibility: hidden;
    max-width: 150px;
    font-size: 20px; font-family: 'poppins'; color: #fff; font-weight: bold; letter-spacing: -1px; line-height: 20px;
        -webkit-text-stroke: 1.5px #7d24e3;); text-align: center; 
    -webkit-background-clip: text;
    background-clip: text;
    z-index: 100; filter: drop-shadow( 0 3px #201f2466); }

/*** ANIMATIONS ***/
        @keyframes rotation {
          0% {
            transform: rotate(6deg);
          }
          50% {
            transform: rotate(-6deg);
          }
          100% {
            transform: rotate(6deg);
          }
        }

        @keyframes scalei {
          33% {
            transform: scale(1);
          }
          66% {
            transform: scale(.9);
          }
          100% {
            transform: scale(1);
          }
        }

    .pop {
     -webkit-animation: pop 1s ease-in-out infinite alternate;
     animation: pop 1s ease-in-out infinite alternate;
     -moz-animation: pop 1s ease-in-out infinite alternate;
    }

    @keyframes pop {
    from {
    transform:scale(0.99)
    }

    50% {
    transform:scale(1)
    }

    to {
    transform:scale(0.99)
    }
    }

    @-webkit-keyframes pop {
    from {
    -webkit-transform:scale(0.99)

    }

    50% {
    -webkit-transform:scale(1)

    }

    to {
    -webkit-transform:scale(0.99)

    }
    }

    .float {
        animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    @keyframes floating {
        0% { transform: translate(0,  0px); }
        50%  { transform: translate(0, 5px); }
        100%   { transform: translate(0, -0px); }    
    }

/**** Load Animation *****/
.loadanimation {
  -webkit-animation-name: loadanimation;
  -webkit-animation-duration: 1.5s;
  animation-name: loadanimation;
  animation-duration: 1.5s
}
    @-webkit-keyframes loadanimation {
      from { opacity:0 } 
      to { opacity:1 }
    }
    @keyframes loadanimation { 
      from{ opacity:0 } 
      to{ opacity:1 }
    }



/**** PHONE RESPONSIVE *****/

@media screen and (max-width:768px){
    main { width: 100%;}
    #content { min-height: 800px; width: 85%; padding: 15px; }
    h1 {font-size: 1.5em;}
    h2 {font-size:1.5em;}
    p {font-size: 1em;}
    
    .hovertext:before {
        font-size: 20px; }

    
  .layout {display: inline;}
    
}

/**** IPAD RESPONSIVE *****/
/** Portrait ***/
@media screen and (min-width:768px) and (max-width:1368px) and (max-height:1368px) and (orientation:portrait) {

    #content { min-height: 400px; width: 90%; padding: 15px; }

    h1 {font-size: 2em;}
    h2 {font-size:2em;}
    p {font-size: 1.3em;}
}