<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        
<title>Collage</title>

        <meta name="viewport" content="width=device-width, initial-scale=0.5">
        <link rel="stylesheet" href="../static/css/normalize.css">
        <link rel="stylesheet" href="../static/css/skeleton.css">
        <link rel="icon" sizes="16x16 32x32 48x48 64x64" href="../static/images/favicon.ico" type="image/vnd.microsoft.icon">
        <link rel="stylesheet" href="../static/css/base.css">
        
        <link rel="stylesheet" href="../static/css/night.css">
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
        <link rel="stylesheet" href="../static/css/bigfoot-default.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <script type="text/javascript" src="../static/js/jquery.formset.js"></script>
        <script type="text/javascript" src="../static/js/sorttable.js"></script>
        <script type="text/javascript" src="../static/js/bigfoot.js"></script>
        
<link rel="stylesheet" href="../static/css/dictionary.css">
<script type="text/javascript" src="../static/js/dictionary.js"></script>
<script>
    var dictionary_refresh = 60;
    $.ajaxSetup({headers: {'X-CSRFToken': 'l65RX1SIugS2wI0L6e5F5lg8M5n2QklgpVLHbUEulsaxcEwRM2b44E7viOFEFZlH' }});
</script>

    </head>
    <body><div class="wrapper">
        
        <div class="bg"></div>
        <div class="top">
        
        <nav>
            <a  href='../index.html'>Home</a>
            <a  href='../rules.html'>Rules</a>
            
                <a  href='../story.html'>Story</a>
            
            
                <a  href='../puzzles.html'>Puzzles</a>
            
            
                <a class="selected-tab" href='../artifacts.html'>Artifacts</a>
            
            <a  href='../teams.html'>Teams</a>
            <a  href='../faq.html'>FAQ</a>
            
                <a  href='../errata.html'>Updates</a>
            
            
                <a  href='../wrapup.html'>Wrap-Up</a>
            
            <a  href='../archive.html'>Archive</a>
        </nav>
        <div class="actions">
            <div class="top-left-actions-container">
            
            </div>
            <div class="login-controls-container">
            
            </div>
        </div>
        
        </div>
        <div class="content">
            

<h1>
    
    Collage
    
</h1>

<main>
    

<style>

table {
    margin: auto;
}

main {
    background-color: white;
}

img {
    width: 100%;
}

p {
    color: white;
}

.puflantu-container {
    position: relative;
}
.puflantu-container .puflantu {
    position: absolute;
    white-space: nowrap;
    font-size: 1.3vw;
    padding-left: 8px;
    padding-right: 8px;
    background-color: white;
    color: black;
}

#athletics-one {
    top: 87%;
    left: 65.6%;
}
#athletics-two {
    top: 41%;
    left: 48.6%;
}
#athletics-three {
    top: 41%;
    left: 14.6%;
}
#athletics-four {
    top: 58%;
    left: 75.6%;
}



#diagram-one {
    top: 46%;
    left: 93%;
}
#diagram-two {
    top: 35%;
    left: 74%;
}
#diagram-three {
    top: 35%;
    left: -2%;
}
#diagram-four {
    top: 29%;
    left: 38.8%;
}



#fire-one {
    top: 76%;
    left: 69.6%;
}
#fire-two {
    top: 82%;
    left: 11.6%;
}
#fire-three {
    top: 26%;
    left: 52.6%;
}
#fire-four {
    top: 41%;
    left: 14.6%;
}



#glasses-one {
    top: 74%;
    left: 3.3%;
}
#glasses-two {
    top: 84%;
    left: 24.3%;
}
#glasses-three {
    top: 74%;
    left: 42.8%;
}
#glasses-four {
    top: 41%;
    left: 63%;
}
#glasses-five {
    top: 41%;
    left: 84.2%;
}



#playing-cards-one {
    top: 13%;
    left: 19.6%;
}
#playing-cards-two {
    top: 32%;
    left: 18.5%;
}
#playing-cards-three {
    top: 51%;
    left: 20.5%;
}
#playing-cards-four {
    top: 69%;
    left: 21%;
}
#playing-cards-five {
    top: 89%;
    left: 22%;
}
#playing-cards-six {
    top: 13%;
    left: 69%;
}
#playing-cards-seven {
    top: 32%;
    left: 67%;
}
#playing-cards-eight {
    top: 51%;
    left: 68.8%;
}
#playing-cards-nine {
    top: 69%;
    left: 70%;
}
#playing-cards-ten {
    top: 89%;
    left: 67.5%;
}
</style>

<div class="puflantu-container">
    <img src="../static/puzzle_resources/artifacts/athletics.png">
    <span id="athletics-one" class="puflantu">pailwle tanuvwva</span>
    <span id="athletics-two" class="puflantu">anuvwva tanuvwva</span>
    <span id="athletics-three" class="puflantu">yoxukwka tanuvwva</span>
    <span id="athletics-four" class="puflantu">enxwnxa tanuvwva</span>
</div>

<table>
    <tr>
        <td>IBB</td>
        <td><span class="puflantu">dubqwbqa falokwka</span></td>
    </tr>
    <tr>
        <td>W</td>
        <td><span class="puflantu">falokwka</span></td>
    </tr>
    <tr>
        <td>PH</td>
        <td><span class="puflantu">gamwma donelwla</span></td>
    </tr>
    <tr>
        <td>PR</td>
        <td><span class="puflantu">gamwma zunatwta</span></td>
    </tr>
    <tr>
        <td>1B</td>
        <td><span class="puflantu">utale</span></td>
    </tr>
    <tr>
        <td>2B</td>
        <td><span class="puflantu">fele</span></td>
    </tr>
    <tr>
        <td>3B</td>
        <td><span class="puflantu">paile</span></td>
    </tr>
    <tr>
        <td>&#x2662;</td>
        <td><span class="puflantu">ralwli zunatwta</span></td>
    </tr>
</table>

<div class="puflantu-container">
    <img src="../static/puzzle_resources/artifacts/playing-cards.png">
    <span id="playing-cards-one" class="puflantu">espuyi ungikpe</span>
    <span id="playing-cards-two" class="puflantu">durema ungikpe</span>
    <span id="playing-cards-three" class="puflantu">avu atimora</span>
    <span id="playing-cards-four" class="puflantu">ombu rali</span>
    <span id="playing-cards-five" class="puflantu">ungikpe</span>
    <span id="playing-cards-six" class="puflantu">durema</span>
    <span id="playing-cards-seven" class="puflantu">pai atimora</span>
    <span id="playing-cards-eight" class="puflantu">fe jwntw</span>
    <span id="playing-cards-nine" class="puflantu">jwntu</span>
    <span id="playing-cards-ten" class="puflantu">anuva wabu</span>
</div>

<div class="puflantu-container">
    <img src="../static/puzzle_resources/artifacts/diagram.png">
    <span id="diagram-one" class="puflantu">utqunxe</span>
    <span id="diagram-two" class="puflantu">utcuafi eterqoye</span>
    <span id="diagram-three" class="puflantu">otombu eterqoye</span>
    <span id="diagram-four" class="puflantu">lahrogbi</span>
</div>

<div class="puflantu-container">
    <img src="../static/puzzle_resources/artifacts/fire.png">
    <span id="fire-one" class="puflantu">atagi ete'a</span>
    <span id="fire-two" class="puflantu">eteyi ete'a</span>
    <span id="fire-three" class="puflantu">agri xorale</span>
    <span id="fire-four" class="puflantu">eyri xorale</span>
</div>

<div class="puflantu-container">
    <img src="../static/puzzle_resources/artifacts/glasses.png">
    <span id="glasses-one" class="puflantu">pamrono tinri</span>
    <span id="glasses-two" class="puflantu">egraska tinri</span>
    <span id="glasses-three" class="puflantu">apro tinri</span>
    <span id="glasses-four" class="puflantu">tini uxfaplo</span>
    <span id="glasses-five" class="puflantu">enxa uxfaplo</span>
</div>


</main>


        </div>
        
        
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-92192633-1', 'auto');
  ga('send', 'pageview');
</script>

        
    </div></body>
</html>