@font-face {
    font-family: 'CCarnage';
    src: url('ChainsawCarnage.ttf');
}
@font-face{
    font-family: 'Crayon';
    src: url('CrayonLibre.ttf');
}
@font-face{
    font-family: 'Wobbly';
    src: url('Wobbly font.ttf');
}

.header {
    line-height: 0;
    color: #ff1150;
    text-align: center;
    font-size: 600%;
    font-family: CCarnage;
}

.tagline{
    color: aliceblue;
    text-align-last: center;
    font-family: CCarnage;
}

/*Start of Navigation*/
.topnav {
    overflow: auto;
    background-color: #4f0a1a;
    background-image: url(gravel.png);
    margin-top: 15px;
}

.topnav a {
    float: left;
    display: block;
    color: aliceblue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: CCarnage;
}

.topnav a:hover {
    background-color: #ddd;
    background-image: url(gravel.png);
    color: #ff1150;
}
/*End of Navigation*/

/*Start of Columns*/
.column {
    float: left;
    color: aliceblue;
    font-family: Wobbly;
}

.column.side {
    width: 25%;
}

.column.center {
    width: 75%;
}

@media screen and (max-width: 600px) {
    .column.side, .column.center {
        width: 100%;
    }
}
/*End of Columns*/

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.card {
    background-color: #3d0010;
    background-image: url(gravel.png);
    border-style: solid;
    border-width: 12px;
    border-color: #080021;
    border-image: url(redox-02.png) 30 round;
    padding: 20px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}


body {
    background-color: black;
    overflow: auto;
    background-image: url("rocky-wall.png");
    image-rendering: pixelated;
    background-repeat: repeat;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
}