<!DOCTYPE html>
<html>
<head>
  <title>IT2805</title>

  <style type="text/css">

    html, body{
      margin: 0;
      padding: 0;
      height: 100%;
    }
    /* Part 1 */

    .header{
      font-family: sans-serif;
      padding-top: 30px;
      margin-bottom: 40px;
    }

    .box{
      border-width: 2px;
      border-color: #0060A3;
      border-style: solid;
      height: 400px;

      margin: 0 25%;
    }

    .one{
      width: 100px;
      height: 100px;
      border-width: 2px;
      border-color: #FAA21B;
      border-style: solid;

      margin-top: 25px;
      margin-left: 25px;
    }

    .two{
      width: 100px;
      height: 100px;
      border-width: 2px;
      border-color: #FAA21B;
      border-style: solid;
      background-color: #fff;

      margin-left: 25px;
      position: relative;
      top: 145px;
      
    }

    .three{
      width: 100px;
      height: 100px;
      border-width: 2px;
      border-color: #FAA21B;
      border-style: solid;
      background-color: #fff;

      margin-left: auto;
      position: relative;
      left: 50px;
      bottom: 150px;

    }

    .five{
      bottom: 10px;
      font-size: 35px;
      font-family: sans-serif;

      text-align: right;
      margin-right: 25px;
    }

    .four{
      width: 50px;
      height: 50px;
      border-width: 2px;
      border-color: #FAA21B;
      border-style: solid;
      
      margin: 25px auto;
    }

    /* Part 2 */

    a {
      color:blue;
    }

    a:hover {
      color: cyan;
    }

    a::selection {
      background-color: orange;
    }

    a:visited {
      color: purple;
    }
    
    a:visited:hover {
      color: green;
    }

  </style>
</head>
<body>

    <div class="header">
      <h1>Assignment 3: position</h1>
    </div>

    <div class="box">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three">
        <div class="four"></div>
      </div>
      <div class="five">
        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a>
      </div>
    </div>



</body>
</html>