/* Define custom colours */
:root {
    --background: #231034;
    --text: #ffffff;
    --linkedin: #0072b1;
    --github: #0d1117;
    --footer-background: #2d2131
}

div {
    color: var(--text);
    font-family: Martian Mono;
    font-weight: Regular;
    font-size: 20px;
    text-align: left;
}

/* Headers */

h1, h2, h5 {
    color: var(--text);
    font-family: Miriam Libre;
}

h1 {
    font-size: 40pt;
}

.subtitle {
    font-size: 12pt;
}

#header {
    font-size: 48pt;
}

.tool-header {
    font-family: Martian Mono;
    text-align: center;
    font-size: 20pt;
}

.bg {
    background-color: var(--background);
}

/* Tool images */

.tool-image img {
    max-width: 80px;
    max-height: 80px;
    text-align: center;
}

/* Bio paragraph */

#bio {
    font-size: 12pt;
    text-align: justify;
}

/* Projects */

ul {
    list-style-type: "> ";
    font-size: 12pt;
}

.repo-link {
    font-family: Martian Mono;
    color: var(--text);
}

.repo-link:hover {
    color: var(--text)
}

.repo-div {
    border-top-left-radius: 50vh;
    border-bottom-left-radius: 50vh;
    width: 500px;
    height: 100px;
    transition: background-image .15s ease;
}

.repo-div img {
    height: 100px;
    width: 100px;
    padding: 15px;
}

#cocktail {
    background-image: url("./images/background-cocktail.png");
    background-size: 500px 333px;
    background-position: 50% 50%;
}

#cocktail:hover {
    background-image: url("https://singlecolorimage.com/get/0d1117/100x100");
}

#currency {
    background-image: url("./images/background-currency.png");
    background-size: 500px 333px;
    background-position: 50% 60%;
}

#currency:hover {
    background-image: url("https://singlecolorimage.com/get/0d1117/100x100");
}

#projectile {
    background-image: url("./images/background-projectile.png");
    background-size: 500px 333px;
    background-position: 0% 13%;
}

#projectile:hover {
    background-image: url("https://singlecolorimage.com/get/0d1117/100x100");
}