html,body {
    color: var(--text-colour);
    width: 100%;
    height: 100%;
}

div.main {
    background-color: var(--base-colour);
    background-image: -moz-linear-gradient(45deg, var(--base-colour), var(--gradient-colour-1));
    background-image: -webkit-linear-gradient(45deg, var(--base-colour), var(--gradient-colour-1));
    background-image: -ms-linear-gradient(45deg, var(--base-colour), var(--gradient-colour-1));
    background-image: linear-gradient(25deg, var(--base-colour), var(--gradient-colour-1));
}

a {
    text-decoration: none;
    color: var(--text-colour);
}

a.link {
    color: var(--link-colour);
    text-decoration: none;
    background-image: linear-gradient(to right, var(--link-gradient-colour-1), var(--link-gradient-colour-1));
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 50% 2px;
    transition: all .2s ease;

}

a.link:hover {
    color: var(--link-gradient-colour-1);
    background-size: 100% 2px;
}

li {
    margin: 5px 0;
}

div.status {
    position: fixed;
    right: 15px;
    top: 15px;
    background-color: var(--status-background-colour);
    border: 1px solid var(--status-border-colour);
    border-radius: 5px;
    padding: 5px;
    z-index: 1;
    text-transform: capitalize;

}

div.title {
    position: relative;
    margin: auto;

    left: 0;
    right: 0;
    width: 500px;
    height: 300px;
    background-image: var(--title-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

div.content {
    padding-bottom: 25px;
    align-content: center;

}

div.justifytextbox {

    margin: auto;
    width: 800px;

}


div.subtitle {
    padding-left: 25px;
    padding-right: 25px;
    font-size: 1.5em;
    text-align: center;
}

div.text {
    font-size: 1.2em;
    letter-spacing: -0.02em;
}

div.status.in.development {
    background-color: var(--status-in-development-background-colour);
    border: 1px solid var(--status-in-development-border-colour);
    color: white;
}

div.status.halted {

    background-color: var(--status-halted-background-colour);
    border: 1px solid var(--status-halted-border-colour);
    color: white;
}


a.post {
    position: relative;
    background-color: rgba(25, 25, 25, 0.5);
    border-radius: 5px;
    border: 1px solid rgba(50, 50, 50, 0.9);
    margin: auto;
    width: 800px;
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 0;
    gap: 15px;
    text-decoration: none;
    color: white;

}

a.post .image {
    width: 25%;
    background: center;
    background-size: 100%;
    transition: background-size 0.5s ease-out;
}

a.post:hover .image {
    background-size: 115%;
}

a.post .postcontent {
    text-decoration: none;
    width: 75%;
    padding-top: 5px;
}

a.post .postcontent .posttitle {
    font-size: 2em;
}

a.post .postcontent .date {
    float: right;
    position: absolute;
    top: 5px;
    display: inline;
    right: 5px;
}

a.post .postcontent .category {
    font-size: 1.1em;
}


@media (max-width:1360px) {

    div.postcontent {
        padding-bottom: 25px;
    }

    div.justifytextbox {
        margin: auto;
        width: 65%;
    }

    a.post {
        overflow: hidden;
        width: 600px;
        height: 350px;

    }

    a.post .postcontent {
        padding: 25px;
        background-color: rgba(20, 20, 20, 0.7);
        width: 100%;
    }

    a.post .image {
        position: absolute;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;

        transition: transform 0.5s cubic-bezier(0.42, 0, 0, 1);


    }

    a.post:hover .image {
        transform: scale(1.2, 1.2);
    }
}


@media (max-width:720px) {

    div.content {
        padding-bottom: 25px;

    }

    div.justifytextbox {

        margin: auto;
        width: 75%;
    }

    a.post {

        width: 80%;
        height: 30%;

    }


    div.title {
        width: 75%;
    }
}