<template>
  <div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-large-size-20 md-small-hide"/>
      <CharacterImage :size="20" :hide_if_small="true" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
      <div class="md-layout-item md-size-20 md-small-size-100">
        <div class="md-layout md-alignment-bottom-center md-small-hide">
          <CharacterImage :size="25" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)"/>
          <CharacterImage :size="50" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
          <CharacterImage :size="25" :img_src="require(`@/assets/images/characters/engi_n.png`)" :audio_src="require(`@/assets/sounds/nigger.mp3`)"/>
        </div>
        <div class="md-layout md-size-40">
          <div class="md-layout-item md-alignment-bottom-center rounded-and-colored-without-bottom">
            <h1 style="text-align: center; text-shadow: rgba(80,80,80,0.59) 2px 5px; margin: 2%">Факты 13</h1>
          </div>
        </div>
      </div>
      <CharacterImage :size="20" :hide_if_small="true" :img_src="require(`@/assets/images/characters/mgesold.png`)" :audio_src="require(`@/assets/sounds/soldier_laughevil03.mp3`)"/>
      <div class="md-layout-item md-size-large-20 md-small-hide"/>
    </div>
    <div class="md-layout">
      <div class="md-layout-item md-size"/>
      <div class="md-layout-item md-size-55 rounded-and-colored-without-bottom md-small-size-100">
        <h4 style="text-align: center; text-transform: uppercase; font-size: 2.5em; margin: 1%">Добро пожаловать на "лучший" ру-сервер тф2</h4>
      </div>
      <div class="md-layout-item md-size"/>
    </div>
  </div>
</template>

<script>
import CharacterImage from "@/components/Others/CharacterImage.vue";
export default {
  name: 'LogoWithCharacters',
  components: {CharacterImage}
}
</script>