::-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;}


/* -------------------- FONTS -------------------- */

@font-face {
   font-family: Qarmic;
   src: url(https://choco-ex3.neocities.org/font/Qarmic_sans_Abridged.ttf);}

@font-face {
   font-family: FuturaHandwritten;
   src: url(https://choco-ex3.neocities.org/font/FuturaHandwritten.ttf);}

@font-face {
   font-family: VCR;
   src: url(font/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);}



/* -------------------- MAIN -------------------- */

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: s5px;}

a {color: #c587ff; text-decoration: none; 
  display: inline-block;
  position: relative;}
a:hover {top: -5px;}

.italic {font-style: italic;}

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 4px 1px #00000066); margin-top: 2em; margin-bottom: 2em;}


#location {margin-top: 10px; margin-bottom: 30px; border-bottom: 1px #201f24 dashed;}


/* -------------------- FOOTER -------------------- */
footer {margin-top: 8vh; font-size: 80%;}


/* -------------------- 2 CONTAINER -------------------- */


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

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


/**** 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;}
}