HexagonTrip border fix

a fix for hexagonTrip to create a semi transparent border

by TheBanana

HTML

<link rel="stylesheet" href="http://vps128502.ovh.net/wp-admin/css/colors.min.css">
<link rel="stylesheet" href="http://vps128502.ovh.net/wp-includes/css/buttons.min.css">
<link rel="stylesheet" href="http://vps128502.ovh.net/wp-admin/css/wp-admin.min.css">
<link rel="stylesheet" href="http://vps128502.ovh.net/wp-includes/css/dashicons.min.css">
<body class="login login-password-protected login-action-password-protected-login wp-core-ui">
    <div id="login">
         <h1>
                <a href="http://vps128502.ovh.net/" title="HexagonTrip">HexagonTrip</a>
            </h1>

        <div class="boxContainer">
            <div class="border"></div>
            <form name="loginform" id="loginform" action="http://vps128502.ovh.net/" method="post">
                <p>
                    <label for="password_protected_pass">Password
                        <br/>
                        <input type="password" name="password_protected_pwd" id="password_protected_pass" class="input" value="" size="20" tabindex="20" />
                    </label>
                </p>
                <!-- <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
		-->
                <p class="submit">
                    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" tabindex="100" />
                    <input type="hidden" name="testcookie" value="1" />
                    <input type="hidden" name="password-protected" value="login" />
                    <input type="hidden" name="redirect_to" value="http://vps128502.ovh.net" />
                </p>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <div class="clear"></div>
</body>

CSS

body.login div#login h1 a {
      background-image: url(http://vps128502.ovh.net/wp-content/uploads/2015/01/logo.png);
      background-size: contain;
      width: 100%;
  }
  .boxContainer {
      position:relative !important;
      padding:10px !important;
  }
  .boxContainer .border {
      width:calc(100% - 20px) !important;
      height:calc(100% - 20px) !important;
      background:#CCCCCC !important;
      opacity:0.5 !important;
      border-radius:3px !important;
      position:absolute !important;
      box-shadow:0px 0px 10px;
  }
  .boxContainer #loginform {
      position:relative;
      margin:5px 8px !important;
      border-radius:2px;
      box-shadow:none;
  }