<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>abtmtr.link</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/assets/style.css" />
</head>

<body>
  <div class="fakemain">
    <a href="/">&lt; back to abtmtr.link</a>
  </div>
  <main>
    <div class="header">
      <p>welcome to ...</p>
      <p class="big"><span>T</span><span>H</span><span>E</span><span> </span><span>M</span><span>A</span><span>T</span><span>K</span><span>A</span><span>P</span><span> </span><span>Z</span><span>O</span><span>N</span><span>E</span><span>!</span><span>!</span><span>!</span></p>
      <p style="text-align: right;"><small>a cool friend made this header tysm!!</small></p>
    </div>
    <p style="text-align: center;font-size: 12px;">this website is best viewed on a computer</p>
    <h1>hey i'm mat what's up?</h1>
    <p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but most call me matkap</p>
    <div class="box">
      <p><b>ABOUT ME</b></p>
      <ul>
        <li>i think i am <b>very cool</b></li>
        <li>i go by he/they <b>pronou</b>ns</li>
        <li>im 17 (minor ! !!! !!!)</li>
        <li>i tied my hair once and i never stopped doing it</li>
        <li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> <a href="https://klausveen.bandcamp.com/">klaus veen</a> and others</li>
        <li>i watch some youtube. <a href="https://youtube.com/@kurtisconner">kurtis conner</a> and <a href="https://youtube.com/@Danny-Gonzalez">danny gonzalez</a> are cool</li>
        <li><a href="https://twitter.com/mattkp134">follow me on twitter</a></li>
        <li><a href="https://spectrum.avris.it/9Z96">my spectrum</a> and also <a href="https://cake.avris.it/bB5">have a slice of my cake!</a></li>
      </ul>
      <p>thanks for visiting!!!!!!!!</p>
      <p><a href="https://users3.smartgb.com/g/g.php?a=s&i=this-is-fake-and-im-not-very-creative-give-me-a-break">sign my guestbook</a></p>
    </div>
    <p>this is my website! i sure hope you like it.</p>
    <p>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck.</p>
    <img src="/assets/matkap/me.jpg" width="463" height="200" />
    <center><p><b><i>this is me</i></b></p></center>
    <p>i am a 🌈g<b>ay dude</b>🌈 i sorta like men but also i'm aroace so DON'T flirt with me !!!! thank you</p>
    <div class="box2">
      <h2>dni list</h2>
      <ul>
        <li>*-phobic</li>
        <li><a href="https://basic-dni.crd.co/">basically everything here</a> except the toothpaste flag stuff. i love that flag</li>
      </ul>
    </div>
    <h2>now playing</h2>
    <p>classical by klaus veen</p>
    <iframe width="200" height="200" src="https://www.youtube.com/embed/fzynKBSruwY?si=y6J2OVNajxPVbG24&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <h2>this site is a work in progress</h2>
    <p>im not very good at this website stuff someone help me</p>
    <script type="text/javascript" src="https://counter.websiteout.com/js/6/10/0/0"></script>
  </main>
  <script src="/assets/script.js"></script>
  <style>
    :root {
      --font-text-top: "Permanent Marker";
      --font-text-mono: "VCR OSD Mono";
      --font-text-legible: "Helvetica";
      --font-text-header: "Comic Neue";
      --font-text-generic: "Helvetica";
      font-size: 16px;
    }

    h1, h2 {
      font-weight: bold;
    }

    main {
      width: 768px;
    }
    @keyframes flash {
      0% {
        color: var(--grey);
      }
      50% {
        color: var(--background);
      }
      100% {
        color: var(--grey);
      }
    }

    .box {
      float: left;
      width: 33%;
      border: 1px solid currentColor;
      padding: 8px;
      margin-right: 8px;

      :first-child {
        margin-top: 0;
      }
      :last-child {
        margin-bottom: 0;
      }
    }

    .box2 {
      display: inline-block;
      width: 100%;
      border: 1px solid currentColor;
      box-sizing: border-box;
      padding: 8px;
      margin-top: 8px;

      :first-child {
        margin-top: 0;
      }
      :last-child {
        margin-bottom: 0;
      }
    }

    .header {
      border: 1px solid currentColor;
      padding: 8px;

      p {
        margin: 0;
      }

      .big {
        font-size: 4em;
        text-align: center;
        font-weight: bold;
        text-shadow: var(--foreground) 4px 0px 0px, var(--foreground) 3.87565px 0.989616px 0px, var(--foreground) 3.51033px 1.9177px 0px, var(--foreground) 2.92676px 2.72656px 0px, var(--foreground) 2.16121px 3.36588px 0px, var(--foreground) 1.26129px 3.79594px 0px, var(--foreground) 0.282949px 3.98998px 0px, var(--foreground) -0.712984px 3.93594px 0px, var(--foreground) -1.66459px 3.63719px 0px, var(--foreground) -2.51269px 3.11229px 0px, var(--foreground) -3.20457px 2.39389px 0px, var(--foreground) -3.69721px 1.52664px 0px, var(--foreground) -3.95997px 0.56448px 0px, var(--foreground) -3.97652px -0.432781px 0px, var(--foreground) -3.74583px -1.40313px 0px, var(--foreground) -3.28224px -2.28625px 0px, var(--foreground) -2.61457px -3.02721px 0px, var(--foreground) -1.78435px -3.57996px 0px, var(--foreground) -0.843183px -3.91012px 0px, var(--foreground) 0.150409px -3.99717px 0px, var(--foreground) 1.13465px -3.8357px 0px, var(--foreground) 2.04834px -3.43574px 0px, var(--foreground) 2.83468px -2.82216px 0px, var(--foreground) 3.44477px -2.03312px 0px, var(--foreground) 3.84068px -1.11766px 0px, var(--foreground) 3.9978px -0.132717px 0px;
        color: var(--background);

        :nth-child(3n - 2) {
          animation: infinite flash 0.25s -0.33s alternate;
        }
        :nth-child(3n - 1) {
          animation: infinite flash 0.25s -0.16s alternate;
        }
        :nth-child(3n) {
          animation: infinite flash 0.25s alternate;
        }
      }
    }

    a {
      color: var(--red);
    }
  </style>
</body>

</html>