{{- $fragment := .self.Params -}}
{{- $name := strings.TrimSuffix ".md" (replace .self.Name "/index.md" "") -}}
{{- $bg := $fragment.background | default "secondary" }}
<style>
    .v-center{
    margin-top: 10%;
    }
    .ascii-art {
    font-family: monospace;
    white-space: pre;
}
</style>
<section id="{{ $name }}">
  <div class="overlay container-fluid
    {{- printf " bg-%s" $bg -}}
  ">
  <div class="container py-5">
    <div class="row">
      <div class="col text-center
        {{- if eq $bg "dark" -}}
          {{- printf " text-%s" "light" -}}
        {{- else -}}
          {{- printf " text-%s" "dark" -}}
        {{- end -}}
      ">

            <h2>Discord Info</h2>
        </div>
    </div>
    <div class="row">
        <div class="col text-center v-center">
            <h4 class="text-center">Join my Discord</h4>
                <div class="ascii-art text-center">
           |\      _,,,---,,_            
     ZZZzz /,`.-'`'    -.  ;-;;,_        
          |,4-  ) )-,_. ,\ (  `'-'       
         '---''(_/--'  `-'\_)            
                </div>
                <h4 class="text-center">Why join my Discord? </h4>     
            <p class="text-center">So you can chat with people who have the same interest about Art, Programming, Games, Music and</p>
        </div>
        <div class="col text-center">
            <iframe src="https://discord.com/widget?id=476786404761010196&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
        </div>
  </div>
</section>