@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');

html,
body {
    height: 100%;
}

body {
    background: url("../img/zebra.png") no-repeat;
    background-size: 20%;
    background-position: right+8px bottom+24px;
}

header,
main,
footer {
    padding: 0 10px;
}

header {
    padding-top: 24px;
}

h1 {
    font-size: 24pt;
    font-weight: 600;
    padding-bottom: 24px;
}

hr {
    margin-top: 16px;
    border: none;
    background: linear-gradient(to right, silver, white);
    height: 1px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 4px;
    box-sizing: border-box;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

p {
    line-height: 18px;
    cursor: default;
}

.author_link {
    color: black;
    text-decoration: none;
}

.author_link::after {
    content: '';
    display: inline-block;
    position: relative;
    left: 6px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    background: url(https://github.githubassets.com/pinned-octocat.svg);
}

.author_link:hover {
    text-decoration: underline;
}

.version {
}

.source {
    margin: 0 4px;
    text-decoration: none;
    font-size: 13pt;
    font-weight: 400;
    color: silver;
}

.source:hover {
    text-decoration: underline;
}

.projectLink {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin-bottom: 16px;
}

.projectLink_link {
    color: black;
}

.projectLink_favicon {
    height: 16px;
    min-width: 16px;
    margin-right: 4px;
}

.projectLink_description {
    min-width: 210px;
    text-align: right;
    flex: 1;
    color: #555;
}

::selection {
    color: white;
    background-color: silver;
}

.pl-codetasks {
    padding: 1rem 0;
}


/* Code Tasks */
.pl-codetasks .projectLink_favicon {
    height: 2rem;
}

.pl-codetasks .projectLink_link {
    font-family: Rubik, Arial, Helvetica, sans-serif;
    font-size: 2rem;
    text-decoration: none;
    color: #555;

    transition: color 0.15s ease;
}

.pl-codetasks .projectLink_link:hover {
    color: #0D6EfD;
    transition: color 0.15s ease;
}

.pl-codetasks .source {
    font-family: Rubik, Arial, Helvetica, sans-serif;
    font-weight: 300;
}

.pl-codetasks .projectLink_description {
    align-self: center;

    font-family: Rubik, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
}

.pl-hackathon .projectLink_link {
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 4px;
    color: white;
    background: rgb(209,13,253);
    background: linear-gradient(90deg, rgba(209,13,253,1) 0%, rgba(82,186,247,1) 76%, rgba(173,225,238,1) 100%);
    transition: opacity 0.3s ease;
}

.pl-hackathon .projectLink_link:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}