style.css

:root {
    --light-colour: #B9EDDD;
    --accent-colour: #87CBB9;
    --medium-colour: #569DAA;
    --dark-colour: #006f87;
}

/* Styles */
.mcmaster {
    font-weight: bold;
    color: #7A003C;
    text-shadow: 2px 2px #FDBF57;
}

.pixel {
    image-rendering: pixelated;
}

body {
    font-family: 'Pangolin', sans-serif;
    color: var(--dark-colour);
    background: var(--light-colour);
    padding: 50px;
    font-size: 1.2em;
}

.header, .main, .footer {
    display: grid;
}

.main {
    width: min(600px, 100%);
    margin: 0px auto;
}

/* Header */
.info {
    width: 60%;
    float: left;
    font-size: 1.25em;
}

.info img {
    width: 100%;
}

.profile-icon {
    width: 30%;
    float: right;
}

.profile-icon img {
    width: 100%;
    border: 15px solid var(--medium-colour);
    border-radius: 50%;
    overflow: hidden;
}

.profile-icon img:hover {
    cursor: pointer;
}

.socials {
    width: 100%;
    text-align: center;
    display: inline-block;
    padding-top: 10px;
}

.socials a {
    padding: 5px;
}

.go-back {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
}

/* Projects */
.project {
    width: 100%;
    height: 200px;
    display: block;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    border: solid 15px var(--medium-colour);
    border-radius: 5px;
    margin: 10px;
    transition: height 0.5s;
}

.project:hover {
    height: 400px;
}

.project .project-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.project .project-title {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 15px;
    font-size: 1.7em;
    color: white;
    background-color: rgba(0, 111, 135, 0.7);
}

.project .ubisoft { background-image: url("media/ubisoft.jpg"); }
.project:hover .ubisoft { background-image: url("media/ubisoft_gif.gif"); }

.project .chip8 { background-image: url("media/chip8.jpg"); }
.project:hover .chip8 { background-image: url("media/chip8_gif.gif"); }

.project .cat { background-image: url("media/cat.jpg"); }
.project:hover .cat { background-image: url("media/catgif.gif"); }

.project .renderer { background-image: url("media/monkey.png"); }
.project:hover .renderer { background-image: url("media/catgif2.gif"); }

/* Footer */

.footer hr {
    margin: 50px 0 10px 0;
    border: solid 3px;
    width: 100%;
    height: 0px;
}

.footer p {
    margin: 5px;
}