* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'customfont', monospace;
}

@font-face {
    font-family: 'regular';
    src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
}

.header {
    padding: 40px;
    text-align: center;
    background: #7D0A0A;
    color: white;
}

.header h1 {
    font-size: 40px;
}


.navbar {
    overflow: hidden;
    background-color: #333;
}

.navbar a.right {
    float: right;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.side {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

.footer {
    padding: 20px;
    text-align: center;
    background: #BF3131;
}

/* Configuration of hyperlinks */
a:link {
    color: #7D0A0A; /* dark red */
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: #BF3131; /* red */
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: #BF3131;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: #7D0A0A;
    background-color: transparent;
    text-decoration: underline;
}

/* Navbar must be below hyperlinks because it overrides the colour. */
.navbar a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

#img {
    filter: drop-shadow(8px 8px 10px gray);
}