:root {
    --background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3)), url("https://cbimg6.com/graphics/07/07/03/32668c.jpg");
    --color: rgb(61, 61, 61);
    --color-2: rgb(177, 0, 0);
    --color-3: rgb(255, 230, 0);
    --container-bg: rgb(230, 255, 245);
    --font: 10pt sans-serif;
    /* --font: 12pt "Bad Script"; */
    --font: 11pt "Playfair Display";
    --heading-font: "Splash";
    /* --heading-font: "Comforter Brush"; */
    /* --heading-font: "Lovers Quarrel"; */
    /* --heading-font: "Lavishly Yours"; */
}

body {
    background: var(--background);
    margin: 0;
    padding: 0;
    font: var(--font);
    line-height: 1.5;
    height: 100vh;
    width: 100vw;
    color: var(--color);
    overflow-x: hidden;
}

.columns {
    display: flex;
    width: 900px;
    margin: auto;
    /* gap: 1rem; */
}

.left {
    flex: 0 0 60%;
    margin: 0 10px;
}

.right {
    /* flex: 0 0 30%; */
    margin: 0 10px;
}

.left, .right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

container {
    background: white;
    border: 1px solid black;
    padding: 2rem;
}

/* #main, #sidebar, #last-articles {
    background: white;
    border: 1px solid black;
    padding: 2rem;
} */

#ibanez {
    /* margin: 50 auto; */
    margin: 10 25vw 0 auto;
    /* background: url("static/ibanez.png"); */
    /* background: url("https://i.pinimg.com/736x/e9/b7/53/e9b75375dcb540d542a7a8c42dc69b9c.jpg"); */
    background: url("static/mick\ gordon.png");
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: center;
    position: relative;
    /* width: 700px; */
    width: 500px;
    /* height: 200px; */
    height: 350px;
    /* top: 50px; */
}

#title {
    position: absolute;
    top: 10vh;
    left: 30%;
    width: 400px;
    font-size: 42px;
    font-family: "Comic Relief";
    animation: color-change 5s infinite;
}

@keyframes color-change {
    0% { color: red; }
    20% { color: rgb(255, 0, 234); }
    40% { color: rgb(17, 0, 255); }
    50% { color: rgb(0, 225, 255); }
    60% { color: rgb(30, 255, 0); }
    80% { color: rgb(238, 255, 0); }
    100% { color: red; }
}

.highlight {
    background-color: var(--color-3);
    color: var(--color-2);
}

h1 {
    color: var(--color-2);
    border-bottom: 1px var(--color-2) dotted;
    /* border-left: 1px var(--color-2) dashed; */
    padding: 0 0;
    margin: 0 ;
    text-align: right;
    font-family: var(--heading-font);
    font-size: 40;
}

h2 {
    padding: 0;
    margin: -10px 0 0 0;
}

#sidebar a {
    color: var(--color-2);
    padding: 2px 10px;
    line-height: 30px;
    border: 1px var(--color-2) dashed;
    white-space: nowrap;
}

#sidebar a:hover {
    color: var(--color-3);
    border: 1px var(--color-3) solid;
}

p {
    text-indent: 10px
}