:root {
    --colour-black:#11151C;
    --colour-grey: #C1C1C1;
    --colour-accent: #4F759B;
    --colour-white: #ECECEC;
}

body {
    font-family: 'courier', monospace;
    color: var(--colour-black);
    background-color: var(--colour-white);
    width: 50%;
}

header {
    margin-bottom: 2em;
    text-transform: uppercase;
    padding-bottom: 0.5em;
    border-bottom: 0.1em solid var(--colour-black);
}

div {
    box-sizing:border-box;
}

footer {
    margin-top: 2em;
    border-top: 0.1em solid var(--colour-black);

}

hr {
    height: 0.1em;
    background: var(--colour-black);
    border: none;
}

h1 {
    font-size: 2vw;
}

p {
    font-size: 1.5vw;
}

.content-block {
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    margin-top: 1em;
    margin-bottom: 1em;
}


.btn {
    color: var(--colour-black);
    font-size: 1vw;
    cursor: pointer;
    display: inline-block;
    margin: 1em;
    padding: 1em;
    position: relative;
    align-self: center;
    border: 0.1em solid var(--colour-black);
    background: transparent;
    z-index: 1;
    transition: all 0.1s ease;
    font-family: courier, monospace;
    transform: translate(-1em, 0);
  }

.btn:before,
.btn:after {
    border: 0.1em  solid var(--colour-black);
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-color: var(--colour-black);
}

/* SIDE */
.btn:before {
    left: -0.1em;
    top: -0.1em;
    width: 0.5em;
    height: 100%;
    transform-origin: top right;
    transform: translate(-100%, 0) skewY(-45deg);
}

/* BOTTOM */
.btn:after {
    bottom: -0.1em;
    right: -0.1em;
    width: 100%;
    height: 0.5em;
    transform-origin: top left;
    transform: translate(0, 100%) skewX(-45deg);
}

.btn:hover {
    color: var(--colour-accent);
    border-color: var(--colour-accent);
    background-size: 90%;
    transform: translate(-1.4em, 0.4em);
}

.btn:hover:after,
.btn:hover:before {
    background-color: var(--colour-accent);
    border-color: var(--colour-accent);
}

.btn:hover:before {
    width: 0.1em;
}

.btn:hover:after {
    height: 0.1em;
}

.navbtn{
    background-color: var(--colour-black);
    cursor: pointer;
    color: var(--colour-white);
    font-size: 1vw;
    padding: 1.5vw;
    border: 0.2em solid var(--colour-black);
    border-radius: 3vw;
    transition: all 0.1s ease-out;
}

.navbtn:hover {
    background-color: transparent;
    color: var(--colour-accent);
    border-color: var(--colour-accent);
    transform: scale(98%);
}

.socialicon {
    color: var(--colour-black);
}

.socialicon:hover {
    color: var(--colour-accent);
}

.callout {
    border: 0.1em solid var(--colour-black);
    border-radius:1em;
    width: 100%;
    padding:2em;
    margin-left: auto;
    margin-right:auto;
}

@media (max-width: 767px) {
    body {
        width: 90%;
    }
    h1 {
        font-size: 3.5vw;
    }
    p {
        font-size: 4vw;
    }
    .hidden-mobile {
      display: none;
    }
    .btn {
        font-size: 2.5vw;
    }
    .callout {
        padding: 1em;
    }
}