@import url('reset.css');
@import url('fonts.css');

:root {
    --color-primary: #6eb92d;
    --color-primary-shade: #4E8320;
    --color-primary-teint: #9FDB6B;

    --color-secondary: #1c1c1c;
    --color-secondary-rgb: 28, 28, 28;
    --color-secondary-shade: #0A0A0A;
    --color-secondary-teint: #474747;

    --color-tertiary: #E36414;
    --color-tertiary-rgb: 227, 100, 20;
    --color-tertiary-shade: #96420D;
    --color-tertiary-teint: #F09156;

    --color-light: #F5F5F5;
    --color-mid: #959595;
    --color-dark: #1c1c1c;

    --border-radius: 0.5rem;
    --border-width: 2px;

    --padding-lg: 1.00rem;
    --padding-md: 0.75rem;
    --padding-sm: 0.50rem;
    --padding-xs: 0.25rem;
}

*,
html {
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 22px;
}

html,
body {
    height: 100%;

    color: var(--color-light);
    background-color: var(--color-dark);
}

body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

header,
nav,
main,
footer {
    position: relative;
}

header,
header>.inner {
    min-height: 92px;
}

footer {
    min-height: 128px;
}

main {
    flex-grow: 1;
}

main>section,
div.inner {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width:1280px) {

    main>section,
    div.inner {
        margin: 0 40px;
    }
}

header>.inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width:480px) {
    header>.inner {
        flex-direction: column;
    }
}

#dynamic-menu-main>ul {
    display: flex;
    gap: var(--padding-md);
}

#dynamic-menu-main>ul>li {}

#dynamic-menu-main>ul>li>a {
    display: block;
    color: var(--color-tertiary);
    text-decoration: none;
    transition: .4s;
}

#dynamic-menu-main>ul>li>a:hover {
    color: var(--color-tertiary-teint);
}

#dynamic-menu-main>ul>li>a:active {
    color: var(--color-tertiary-shade);
}

#title {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

#title>.title-logo>img {
    width: 64px;
}

#title>.title-text>div {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
}

#title:hover>.title-text>div {
    font-weight: normal;
    animation: glitch 1s linear infinite;
}

@keyframes glitch {

    2%,
    64% {
        transform: translate(2px, 0) skew(0deg);
    }

    4%,
    60% {
        transform: translate(-2px, 0) skew(0deg);
    }

    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

#title:hover>.title-text>div:before,
#title:hover>.title-text>div:after {
    content: attr(title);
    position: absolute;
    left: 0;
}

#title:hover>.title-text>div:before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {

    2%,
    64% {
        transform: translate(2px, -2px);
    }

    4%,
    60% {
        transform: translate(-2px, 2px);
    }

    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

#title:hover>.title-text>div:after {
    animation: glitchBottom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBottom {

    2%,
    64% {
        transform: translate(-2px, 0);
    }

    4%,
    60% {
        transform: translate(-2px, 0);
    }

    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}

#title>.title-text>small {
    display: block;
    font-size: 0.8rem;
}

#image-photo {
    width: calc(100% - var(--padding-md));
    margin: var(--padding-sm) 0 var(--padding-sm) var(--padding-md);
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-tertiary);
    border-radius: var(--border-radius);
}

/**
 * FOOTER + NAV
 */
footer {
    height: 92px;
    background-color: var(--color-tertiary);
}

footer>.inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

footer #dynamic-menu-footer>ul {
    display: flex;
    gap: var(--padding-md);
}

footer #dynamic-menu-footer a {
    color: var(--color-light);
    text-decoration: none;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: calc(var(--padding-sm) * -1);
    box-sizing: border-box;
}

.container>div {
    padding: var(--padding-sm);
    box-sizing: border-box;
}

.container.c-center {
    justify-content: center;
}

.container>.ci-size-1 {
    width: calc((1/12) * 100%);
}

.container>.ci-size-2 {
    width: calc((2/12) * 100%);
}

.container>.ci-size-3 {
    width: calc((3/12) * 100%);
}

.container>.ci-size-4 {
    width: calc((4/12) * 100%);
}

.container>.ci-size-5 {
    width: calc((5/12) * 100%);
}

.container>.ci-size-6 {
    width: calc((6/12) * 100%);
}

.container>.ci-size-7 {
    width: calc((7/12) * 100%);
}

.container>.ci-size-8 {
    width: calc((8/12) * 100%);
}

.container>.ci-size-9 {
    width: calc((9/12) * 100%);
}

.container>.ci-size-10 {
    width: calc((10/12) * 100%);
}

.container>.ci-size-11 {
    width: calc((11/12) * 100%);
}

.container>.ci-size-12 {
    width: calc((12/12) * 100%);
}

/**
 * BREAKPOINTS
 */
@media screen and (max-width:1200px) {
    /* XL */
}

@media screen and (max-width:768px) {

    /* MD */
    .container>.ci-size-md-1 {
        width: calc((1/12) * 100%);
    }

    .container>.ci-size-md-2 {
        width: calc((2/12) * 100%);
    }

    .container>.ci-size-md-3 {
        width: calc((3/12) * 100%);
    }

    .container>.ci-size-md-4 {
        width: calc((4/12) * 100%);
    }

    .container>.ci-size-md-5 {
        width: calc((5/12) * 100%);
    }

    .container>.ci-size-md-6 {
        width: calc((6/12) * 100%);
    }

    .container>.ci-size-md-7 {
        width: calc((7/12) * 100%);
    }

    .container>.ci-size-md-8 {
        width: calc((8/12) * 100%);
    }

    .container>.ci-size-md-9 {
        width: calc((9/12) * 100%);
    }

    .container>.ci-size-md-10 {
        width: calc((10/12) * 100%);
    }

    .container>.ci-size-md-11 {
        width: calc((11/12) * 100%);
    }

    .container>.ci-size-md-12 {
        width: calc((12/12) * 100%);
    }
}

@media screen and (max-width:480px) {

    /* SM */
    .container>.ci-size-sm-1 {
        width: calc((1/12) * 100%);
    }

    .container>.ci-size-sm-2 {
        width: calc((2/12) * 100%);
    }

    .container>.ci-size-sm-3 {
        width: calc((3/12) * 100%);
    }

    .container>.ci-size-sm-4 {
        width: calc((4/12) * 100%);
    }

    .container>.ci-size-sm-5 {
        width: calc((5/12) * 100%);
    }

    .container>.ci-size-sm-6 {
        width: calc((6/12) * 100%);
    }

    .container>.ci-size-sm-7 {
        width: calc((7/12) * 100%);
    }

    .container>.ci-size-sm-8 {
        width: calc((8/12) * 100%);
    }

    .container>.ci-size-sm-9 {
        width: calc((9/12) * 100%);
    }

    .container>.ci-size-sm-10 {
        width: calc((10/12) * 100%);
    }

    .container>.ci-size-sm-11 {
        width: calc((11/12) * 100%);
    }

    .container>.ci-size-sm-12 {
        width: calc((12/12) * 100%);
    }
}

/**
 * STANDARD STYLES
 */
main h1 {
    font-size: 1.5rem;
    margin: var(--padding-sm) 0 var(--padding-lg) 0;
}

main h2 {
    color: var(--color-tertiary);
    font-size: 1.25rem;
    margin: var(--padding-sm) 0 var(--padding-md) 0;
}

main h3 {
    color: var(--color-tertiary-teint);
    font-size: 1.1rem;
    margin: var(--padding-sm) 0 var(--padding-sm) 0;
}

main p {
    margin: var(--padding-sm) 0 var(--padding-sm) 0;
    text-align: justify;
}

main ul.list-steps {
    list-style-type: decimal;
    padding-left: 32px;
}

main ul.list-steps>li {
    margin: var(--padding-sm) 0 var(--padding-sm) 0;
    text-align: justify;
}

#cookie-consent a,
main a {
    color: var(--color-tertiary);
    text-decoration: none;
    transition: .4s;
}

main a.button {
    display: inline-block;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    padding: var(--padding-xs) var(--padding-md);
    cursor: pointer;
    color: var(--color-light);
    text-transform: uppercase;
    background-color: var(--color-tertiary);
    background-image: linear-gradient(20deg, var(--color-tertiary), var(--color-tertiary-teint));
}

main a.button:hover {
    color: var(--color-secondary);
}

#cookie-consent a:hover,
main a:hover {
    color: var(--color-tertiary-teint);
}

#cookie-consent a:active,
main a:active {
    color: var(--color-tertiary-shade);
}

table.style-1 {
    width: 100%;
}

table.style-1 th,
table.style-1 td {
    padding: var(--padding-sm);
}

table.style-1>tbody>tr>th {
    color: var(--color-tertiary-teint);
    background-color: var(--color-secondary-teint);
}

/**
 * FORM STYLES
 */
form.stretch {
    width: 100%;
}

form label,
form input,
form button {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

form label {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin: var(--padding-sm) 0 0 0;
    color: var(--color-mid)
}

form input,
form button {
    margin: 0 0 var(--padding-sm) 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    line-height: 1.5rem;
}

form button:focus,
form input:focus {
    outline: none;
    border: 2px solid var(--color-tertiary);
}

form input[type="submit"],
form button {
    cursor: pointer;
    color: var(--color-light);
    text-transform: uppercase;
    background-color: var(--color-tertiary);
    background-image: linear-gradient(20deg, var(--color-tertiary), var(--color-tertiary-teint));
}

/**
 * FRONT PAGE
 */
main .special-h {
    display: flex;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    margin: var(--padding-sm) 0 var(--padding-lg) 0;
}

main .special-h h1 {
    margin: 0;
    padding: 0 var(--padding-lg);
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0px 0px 50vw 15vw rgba(var(--color-tertiary-rgb), .5);
}

/**
 * LOGIN PAGE
 */
main#login-page {
    display: flex;
    justify-content: center;
    align-items: center;
}

main#login-page>form {
    box-sizing: border-box;
    width: 40vw;
    min-width: 200px;
    border-radius: var(--border-radius);
    background-color: var(--color-secondary-teint);
    padding: var(--padding-sm);
}

/**
 * SKILL BLOCK
 */
.skill-container>div {
    display: flex;
}

.skill-block {
    margin: var(--padding-sm) auto;
    height: 100%;
    min-height: 192px;
    width: 240px;
}

.skill-block .skill-title {
    color: var(--color-tertiary);
    text-align: center;
}

.skill-block .skill-title h2 {
    margin: var(--padding-sm) 0;
}

.skill-block .skill-divider {
    height: 2px;
    margin: 0 auto;
    width: 0px;
    background-color: transparent;
    border-left: none;
    border-right: none;

    transition: background-color 250ms, width 500ms, border-left 500ms, border-right 500ms;
}

.skill-block .skill-content {
    padding: var(--padding-sm);
}

.skill-block:hover {
    /*background-color: rgba(var(--color-tertiary-rgb), .1);*/
}

.skill-block:hover .skill-divider {
    width: 75%;
    background-color: var(--color-tertiary);
    border-left: 16px solid var(--color-light);
    border-right: 16px solid var(--color-light);

    box-shadow: 0px 0px 48px 8px rgba(var(--color-tertiary-rgb), .5);
}

/**
 * CODE BLOCKS
 */
pre.code-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: stretch;
    justify-content: space-between;
    padding: var(--padding-md);
    border-radius: var(--border-radius);
    background-color: var(--color-secondary-teint);
}

pre.code-box>.box-title {
    width: 75%;
}

pre.code-box>.box-title>h3 {
    margin: 0;
    color: var(--color-mid);
    font-size: 1rem;
}

pre.code-box>.box-ctrl {
    width: 25%;
    text-align: right;
}

pre.code-box>.box-ctrl>button {
    display: none;
    color: var(--color-light);
    cursor: pointer;
    outline: none;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    background-color: var(--color-tertiary);
    background-image: linear-gradient(20deg, var(--color-tertiary), var(--color-tertiary-teint));
}

pre.code-box>code {
    overflow-x: auto;
    margin-top: var(--padding-sm);
    width: 100%;
    padding: var(--padding-sm);
    background-color: var(--color-secondary);
    font-size: 0.9rem;
}

pre.code-box>code::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--color-mid);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

pre.code-box>code::-webkit-scrollbar {
    height: 10px;
    background-color: var(--color-secondary-teint);
}

pre.code-box>code::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--color-tertiary);
    background-image: linear-gradient(0deg, var(--color-tertiary), var(--color-tertiary-teint));
}

/**
 * COOKIE CONSENT
 */
#cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 800px;
    margin: 0 auto;
    border: var(--border-width) solid var(--color-tertiary);
    background-color: rgba(var(--color-secondary-rgb), 0.9);
    filter: drop-shadow(0 0 0.75rem var(--color-dark));
}

#cookie-consent>.cookie-consent-title {
    padding: var(--padding-md);
    background-color: var(--color-tertiary);
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
}

#cookie-consent>.cookie-consent-info {
    margin: var(--padding-md);
    text-align: center;
}

#cookie-consent .cookie-consent-categories {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--padding-lg);
    text-align: center;
    margin: var(--padding-sm) 0;
}

#cookie-consent .cookie-consent-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

#cookie-consent .cookie-consent-toggle {
    display: flex;
    align-items: flex-start;
}

#cookie-consent .cookie-consent-toggle>input {
    opacity: 0;
    position: absolute;
    left: -10000px;
}

#cookie-consent .cookie-consent-toggle>input+label {
    background-color: var(--color-secondary-teint);
    color: var(--color-mid);

    transition: all .2s;
    display: inline-block;
    margin-right: 15px;
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    width: 75px;
}

#cookie-consent .cookie-consent-toggle>input:checked+label {
    background-color: var(--color-primary);
    color: var(--color-dark);
}