Tropicalia antropophagous design

The audio file was implemented in the JavaScript file, as part of the switchTheme(input) function which initializes Tropicalia when selected by the user:

                      
var sounds = document.getElementsByTagName('audio');
for(i=0; i<sounds.length; i++) sounds[i].pause();

if (input.name == "themes/tropicalia") {
  var audioElement = document.createElement('audio');
  document.head.appendChild(audioElement);
  audioElement.setAttribute('src', '../audio/tropicalia/Sambar.mp3');
  audioElement.play();
};

                      
                    

The open fonts were imported as local files:

                      
/* beamie */
@font-face {
    font-family: beamie;
    src: url("../../fonts/tropicalia/beamie.ttf") format("opentype");
}

/* boomtown-deco */
@font-face {
    font-family: boomtown-deco;
    src: url("../../fonts/tropicalia/Boomtown-deco.otf") format("opentype");
}

/********DOGSMOKE********/
/* dogsmoke */
@font-face {
    font-family: dogsmoke;
    src: url("../../fonts/tropicalia/Dogsmoke.ttf") format("opentype");
}

/* dogsmoke-ii */
@font-face {
    font-family: dogsmoke-ii;
    src: url("../../fonts/tropicalia/Dogsmoke-II.ttf") format("opentype");
}

/* dogsmoke-thunder-ii */
@font-face {
    font-family: dogsmoke-thunder-ii;
    src: url("../../fonts/tropicalia/Dogsmoke-Thunder-II.ttf") format("opentype");
}

/* dogsmoke-thunder */
@font-face {
    font-family: dogsmoke-thunder;
    src: url("../../fonts/tropicalia/Dogsmoke-Thunder.ttf") format("opentype");
}

/* dogsmoke-ii */
@font-face {
    font-family: dogsmoke-ii;
    src: url("../../fonts/tropicalia/Dogsmoke-II.ttf") format("opentype");
}
/********DOGSMOKE********/

/* milho */
@font-face {
    font-family: milho;
    src: url("../../fonts/tropicalia/Milho-Cozido.ttf") format("opentype");
}

/* ostrichsans */
@font-face {
    font-family: ostrichsans;
    src: url("../../fonts/tropicalia/ostrichsans-medium-webfont.ttf") format("opentype");
}

/* tropicalia */
@font-face {
    font-family: tropicalia;
    src: url("../../fonts/tropicalia/Tropicalia-Brush.ttf") format("opentype");
}

/********TEXGYREADVENTOR********/
/* texgyreadventor-italic */
@font-face {
    font-family: texgyreadventor-italic;
    src: url("../../fonts/tropicalia/texgyreadventor-italic.otf") format("opentype");
}

/* texgyreadventor-bolditalic */
@font-face {
    font-family: texgyreadventor-bolditalic;
    src: url("../../fonts/tropicalia/texgyreadventor-bolditalic.otf") format("opentype");
}

/* texgyreadventor-bold */
@font-face {
    font-family: texgyreadventor-bold;
    src: url("../../fonts/tropicalia/texgyreadventor-bold.otf") format("opentype");
}

/* texgyreadventor-regular */
@font-face {
    font-family: texgyreadventor-regular;
    src: url("../../fonts/tropicalia/texgyreadventor-regular.otf") format("opentype");
}
/********TEXGYREADVENTOR********/

/* yoxall */
@font-face {
    font-family: yoxall;
    src: url("../../fonts/tropicalia/Yoxall.ttf") format("opentype");
}
                      
                    

And were applied to each of the core structural elements of the HTML document:

                      
body {
  font-family: "yoxall";
}

h1 {
  font-family: "dogsmoke";
}

h2 {
  font-family: 'yoxall', sans-serif;
}

h3 {
  font-family: 'beamie';
}
                      
                    

The initial animations were created by simply using CSS transform, in different ways for small and large screens:

Small Screens

                      
h1 {
  transform: rotate(180deg);
  transition: transform 3s ease-in-out 2.9s;
}

h3 {
  transform: scale(1.5) translate(25vw);
  transition: transform 5s ease-in-out 5s;
}
                      
                    

Large Screens

                      
h1 {
  transform: rotate(-180deg);
  transition: transform 5s ease-in-out 2.9s;
}

h1:hover {
  transform: rotate(0deg);
  transition: transform 2s ease;
}


h3 {
  transform: rotate(-180deg);
  transition: transform 5s ease-in-out 2.9s, color 5s linear 1s;
}

h3:hover {
  transform: rotate(0deg);
  transition: transform 2s ease;
}
                      
                    

The samurai psychedelic background works as follows:

                      
@keyframes cells {
  from { background-size: 22px 22px; }
  to { background-size: 24px 24px; }
}

h4 {
  animation: cells 0.4s linear infinite;
  background-image: repeating-radial-gradient(#A9A355 8px, white 12px);
}
                      
                    

This is the code that makes the image round, creates two shadows to make them look like a 3D border, and makes the colors rotate as a gradient through the color wheel:

                      
figure > img {
  border-radius: 50%;
  box-shadow: -1vw 1vw 0 1vw black, 1vw 0 0 3vw #e0d289;
  animation: colorRotate 10s infinite;
}

figure > img:hover {
  transform: rotate(1080deg);
  transition: transform 3s ease-in;
}
                      
                    

The way the see-through background title was applied was the following:

                      
h1 {
  background: url("../../img/bg/tropicalia/tropheader.jpg");
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
                      
                    

The layout of the main article was structured as follows:

                    
main p {
  text-align: justify;
}

figure > figcaption {
  text-align: justify;
}

main {
  -webkit-column-count: 1;
  -moz-column-count: 1;
    column-count: 1;
    column-gap: 5vw;
}

main {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  column-gap: 7.5vw;
}