Papers Please - (Custom Colours)

<!--------------------- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules ---------------------

Default Colours
-Credit-Colour White: #FFFFFF
-Card-Background Beige: #EEE1D8
-Button & Left-Inner-Border Light-Grey: #A39690
-Most-Text Dark Grey: #5C4F47
-Outer-Border Green: #3E443A

Quick Changes:
(Highlight These and press ctrl+F to change commonly-changed information quickly!)
[IMAGE]         [Replace with Image URL]
[BIRTHDAY]
[M/F]
[CITY]
[EXPIRY]
[COUNTRY]
[ID]

Thank you for reading!
Crispin / Tomcat

-->


<!--------------------------------------------------------- START OF DO NOT REMOVE -------------------------------------------------------->

<!-- This centers the code. There's no reason for you to touch this. Color & Style here sets #5C4F47 as the default colour and Times New as the default Font. -->
<div class="mx-auto mt-5" style="max-width:480px; color:#5C4F47; font-family:'Times New Roman';">

  <!--------------------------------------------------------- START CODE --------------------------------------------------------->

  <!-- This sets up the little box we're working in, for both the top section and the bottom section. -->
  <div class="card rounded-0 mb-0 mt-0" style="height:750px; width:500px; background-color:#5C4F47; border:10px #3E443A solid;">

    <!--------------------------------------------------------- START TOP SECTION --------------------------------------------------------->
    <!--- This is where the "Entry Visa" image is --->

    <!-- Start Entry Visa Box -->
    <div class="card rounded-0 mb-0" style="height:375px; width:480px; background-color:#EEE1D8; border-left:10px #A39690 solid;">
      <img src="https://media.discordapp.net/attachments/909750674223419413/994625897078464602/unknown.png"> <!-- Entry Visa Image -->
    </div>
    <!-- End Entry Visa Box -->

    <!--------------------------------------------------------- END TOP SECTION --------------------------------------------------------->

    <!-- Start Middle Section -->
    <div class="card rounded-0 mb-0 mt-0" style="height:35px; width:480px; background-color:#EEE1D8; border-left:10px #A39690 solid; border-top:0px transparent; border-bottom:0px transparent;">
      <img src="https://media.discordapp.net/attachments/909750674223419413/1041761751458381824/image.png"> <!-- Seperates Top & Bottom -->
    </div>
    <!-- End Middle Section -->

    <!--------------------------------------------------------- START BOTTOM SECTION --------------------------------------------------------->

    <!-- Sets up the bottom section -->
    <div class="card rounded-0 mb-0" style="height:375px; width:480px; background-color:#EEE1D8; border-left:10px #A39690 solid; border-bottom:10px #A39690 solid;">

      <!-- Sets up all the bottom-section sub sections (Name, Image, Data, and ID) -->
      <div class="p-3 row no-gutters">

        <!-- Start Name Section -->
        <div class="card col-12 p-0 border-0 rounded-0" style="background:transparent;">
          <div class="card mb-0 p-0" style="height:50px; width:400px; background:transparent; font-size:1.8rem; border:1px solid #EEE1D8;">
            <p><b>Gusav-Weis, Antonin</b></p> <!-- Edit name here! -->
          </div>
        </div>
        <!-- End Name Section -->

        <!-- Start Mugshot Section -->
        <div class="card col-6 p-0 border-0 rounded-0" style="background:transparent;">
          <div class="card mb-0 p-0" style="height:250px; width:180px; background:transparent; border:1px solid #EEE1D8;">
            <div class="card bg-transparent" style="background:url([IMAGE]) center; background-size:contain; background-repeat:no-repeat; height:300px;"></div> <!-- Put your image where the # is! -->
          </div>
        </div>
        <!-- End Mugshot Section -->

        <!-- Start Data Section -->
        <div class="card col-6 pt-3 border-0 rounded-0" style="background:transparent;"> <!-- Start Set-Up of Data Section -->
          <div style="width:180px; background:transparent; border:1px solid #EEE1D8;"> <!-- Start Set-Up 2 -->

            <div style="color:#5C4F47; font-family:Times New Roman; font-size:18px;"> <!-- Start Blocks -->
              <span class="badge"style="width:50px; background-color:#A39690; border-radius:0px;">DOB.</span>
              <span class="pull-right;"><b>[BIRTHDAY]</b></span> <!-- Data Of Birth -->
              <br>
              <span class="badge"style="width:50px; background-color:#A39690; border-radius:0px;">SEX</span>
              <span class="pull-right;"><b>[M/F]</b></span> <!-- Male, Female, NB, etc -->
              <br>
              <span class="badge" style="width:50px; background-color:#A39690; border-radius:0px;">ISS</span>
              <span class="pull-right;"><b>[CITY]</b></span> <!-- City Or Something... -->
              <br>
              <span class="badge" style="width:50px; background-color:#A39690; border-radius:0px;">EXP</span>
              <span class="pull-right;"><b>[EXPIRY]</b></span> <!-- Expiry Date -->
            </div> <!-- End Blocks -->

            <!-- Start Country Section -->
            <div class="card mt-5 pt-2 rounded-0" style="width:180px; background:transparent; font-size:1.8rem; border:1px solid #EEE1D8; border-bottom:3px solid #A39690;">
              <p><b>[COUNTRY]</b></p> <!-- This code is based on the Arstotzka passport specifically, but that doesn't mean it can't be used for non-Arstotzkan OCs! -->
            </div>
            <!-- End Country Section -->

          </div> <!-- End Set-Up 2 -->
        </div> <!-- End Set-Up -->
        <!-- End Data Section -->

        <!-- Start ID Section -->
        <div class="card col-12 p-0 mb-3 border-0 rounded-0" style="background:transparent;">
          <div class="card" style="height:20px; width:400px; background:transparent; font-size:1.8rem; border:1px solid #EEE1D8;">
            <p><b>[ID]</b>   ••••••••••••••••••••</p>
          </div>
        </div>
        <!-- End ID Section -->

      </div> <!-- End Sub-Section -->

    </div> <!-- End Bottom-Section -->

    <!--------------------------------------------------------- END BOTTOM SECTION --------------------------------------------------------->

  </div> <!-- End Code -->

</div> <!-- End Centering -->

<!--------------------------------------------------------- END CODE --------------------------------------------------------->

<div class="text-center">
  <a href="https://toyhou.se/12971965.papers-please" style="color:#FFFFFF;"><i class="fas fa-moon"></i> Code By TomcatCodes / CrispinAsheYA</a>
</div>