<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

/* CSS Document */

a {
    text-decoration: none;
}

ul {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0;
    padding: 0 0 0 20px;
}

li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Headings */

#header {
    display: block;
    height: 280px;
    margin-top: 5vh;
    text-align: center;
}

#matt {
    animation: fadeIn 10s;
}

#latimer {
    animation: fadeIn 10s;
}

h1 {
    color: #333;
    font: 80px helvetica, sans-serif;
    font-weight: lighter;
    line-height: 100px;
    margin: 40px;
    margin-top: 40px;
}

h1&gt;img {
    animation: fadeIn 3s;
    height: 120px;
}

div.website-area {
    animation: fadeIn 3s;
    background-color: #f6f6f6;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border-radius: 8px;
    display: block;
    height: calc(240px - 50px - 50px);
    margin: 0 20px 20px 0;
    padding: 50px 10px 50px 10px;
    text-align: center;
    width: calc(240px - 10px - 10px);
}

div.website-area:hover {
    box-shadow: 3px 8px 30px #666;
}

#bfyp {
    background-image: url('../images/bfyp_background.png');
}

#freedomsail {
    background-image: url('../images/freedomsail_background.jpg');
}

div.website-area div {
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

div.website-area p {
    color: #555;
    float: left;
    font: 30px helvetica, sans-serif;
    line-height: 160px;
    margin: 0;
    margin-left: 10px;
    padding: 0px 0px 0px 0px;
    font-weight: lighter;
}

div.website-area img {
    float: left;
    height: 100%;
    margin: 0;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}</pre></body></html>