@font-face {
  font-family: humantooth;
  src: url(/fonts/humantooth-type-v1.ttf); /* shoutout humantooth ! https://humantooth.neocities.org/home https://humantooth.neocities.org/font-table*/
  }
  
@font-face {                  
  font-family: 'AnalogueOS';
  src: url(/fonts/AnalogueOS-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  } 

* {
    box-sizing:border-box;
}
/* https://www.w3schools.com/css/css3_box-sizing.asp */

body {
  color: white;
  background-image:url(/tricking/trippystars.png);
  font-family: AnalogueOS; 
  }
 
 /*https://matthewjamestaylor.com/holy-grail-layout#flexbox HOLY GRAIL FLEXBOX*/ 
 
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
/* astretics = all html styled elements, > = all direct children, ie. left mid right */
.holy-grail-flexbox > * {
    width:100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left,
    .holy-grail-flexbox > .right {
        width:50%;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .left {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main {
        width:33.3%;
    }
    .holy-grail-flexbox > .left,
    .holy-grail-flexbox > .right {
        width:33.3%;
    }
}

/* my content */

/*main */


/*left*/

.statics {
  position: relative;
  width: 100%;
  height: auto;
}

.kick {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: auto;
  top: 40px;
  left: 5%;
  z-index: 2;
  }

.twisting1 {
  position: absolute;
  width: 100%;
  max-width: 300px;
  height: auto;
  top: 20px;
  left: 10%;
  z-index: 1;
  }

/*right*/
  
.info-vinny {
  position: relative;
  width: 100%;
  height: auto;
  }

.standing {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: auto;
  top: -20%;
  z-index: 1;
  }

.speech-bubble {
  position: relative;
  width: 40%;
  min-width: 100px;
  top: -10%;
  height: auto;
  z-index: 2;
  }

.info-text {
  position: absolute;
  width: 50%;
  min-width: 60px;
  top: 15%;
  left: 25%;
  z-index: 3;
  color: black;
  text-align: center;
  }