/* reference starting color: #00cca3
* https://www.color-hex.com/color/00cca3#shades-tints
*/

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400;600&display=swap');

:root{
    --font-family: Mona Sans, sans-serif;
    --font-weight-bold: 600;
    --font-weight-normal: 400;

    --icon-size: 60px;
    --container-max-width: 600px;
    --container-min-width: 300px;
    --background-color: #121212;
    --surface-color: #232323;
    --primary-color: #00a382;
    --primary-variant-color: #264741;
    --secondary-color: #C09A3F;
    --secondary-variant-color: #a35929;
    --text-color-on-background: #EBEBEB;
    --text-color-on-surface: #EBEBEB;
    --text-color-on-primary: #000000;
    --text-color-on-secondary: #000000;

    --border-radius-element: 8px;
    --surface-border-color: #333333;
    --tag-color: #676767;
    --primary-middle-color: #285c51;


    --main-container-horizontal-padding: 85px;
    --selection-circle-size: 22px;
    --section-icon-size: 30px;
    --section-icon-padding: 3px;
    --section-icon-margin: 12px;

    --box-shadow-default: 0 2px 6px rgba(0, 0, 0, 0.25);
    --box-glow-highlight-blur: 5px;
    --box-glow-opacity: 0.07;
    --box-glow-highlight:
            0  0 var(--box-glow-highlight-blur) 2px rgba(255, 179, 115, var(--box-glow-opacity)),
            0  0 var(--box-glow-highlight-blur) 2px rgba(255, 179, 115, var(--box-glow-opacity)) inset,
            0  0 var(--box-glow-highlight-blur) 1px rgba(241, 74, 0, var(--box-glow-opacity)),
            0  0 var(--box-glow-highlight-blur) 1px rgba(241, 74, 0, var(--box-glow-opacity)) inset;

    font-family: var(--font-family), sans-serif;
    font-weight: var(--font-weight-normal);
    color: var(--text-color-on-background);
}

body{
    background-color: var(--background-color);
}

body, header
{
    margin: 0;
}

h3{
    font-weight: normal;
    margin: 6px 0;
}

.header
{

    position:relative;
    text-align: center;
    /*background-color: var(--primary-variant-color);*/
    background-color: var(--primary-variant-color);
}

.header::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(
    to right,
    transparent 0%,
    #FFFFFF12 25%,
    #FFFFFF17 75%
    );
    pointer-events: none;
}

.header::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000000;
    opacity: 25%;
    pointer-events: none;
}

p{
    white-space: pre-wrap;
}

.header-pattern{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    height: 42px;
    max-width: var(--container-max-width);
    padding: 0 var(--main-container-horizontal-padding);
}

.header-pattern::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/SVGs/pattern_2_rep_hori_big.svg');

    mask-image: linear-gradient(to right,
        transparent 0%,
        black 25%,
        black 75%,
        transparent 100%
    );

    background-repeat: repeat-x;
    display:flex;
    margin: auto;
    opacity: 12%;
    pointer-events: none;
    z-index: 0;
}

#header-title{
    margin: 0;
    font-weight: var(--font-weight-bold);
    font-size: 2em;
    letter-spacing: 0.7em;
    color: var(--text-color-on-surface);
}

.header-contact{
    display: flex;
    margin: auto;
    align-content: center;
    justify-content: center;
    color: var(--text-color-on-surface);
    gap: 24px;
    opacity: 100%;
    z-index: 1;
}

.contact-element{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-element-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100%;*/
    --size: 32px;
    height: var(--size);
    width: var(--size);
    padding: 0;
    /*border: var(--surface-border-color) 1px solid;*/
    border-radius: var(--border-radius-element);
    fill: var(--background-color);
    box-shadow: var(--box-shadow-default);
}
.contact-element-icon:hover{
    border-color: transparent;
}

.section-header{
    font-size: 30px;
    padding-bottom: 12px;
    padding-top: 12px;
    color: #FFFFFF75;
    display: flex;
    align-items: center;

    /*Align to center of the parent's border*/
    translate: calc( -1*
    (var(--main-container-horizontal-padding)
     +   (var(--section-icon-size) + var(--section-icon-padding) + var(--section-icon-margin)/2) /2)
    );
    font-family: Consolas, monospace;
}

.section-icon{
    position: relative;
    /*padding-right: 12px;*/
    padding: var(--section-icon-padding);
    margin-right:var(--section-icon-margin);
    width: var(--section-icon-size);
    height: var(--section-icon-size);

    background-color: var(--primary-color);
    border-radius: var(--border-radius-element);
    border: 2px solid #FFFFFF50;
    box-shadow: var(--box-shadow-default);

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    clip-path: polygon(
            0 0, 15% 0, 50% 0, 85% 0,
            100% 0, 100% 15%, 100% 50%, 100% 85%,
            100% 100%, 85% 100%, 50% 100%, 15% 100%,
            0 100%, 0 85%, 0 50%, 0 15%);

    transition: clip-path 0.5s ease;
}

.section-icon::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(4px);
    background-image: conic-gradient(from var(--deg), #FFFFFF var(--stop-1), #000000 var(--stop-2));
    opacity: 25%;
    mix-blend-mode: overlay;
    animation: small-rotation 8s ease-in-out infinite,
    moving-stop-points 4s ease-in-out infinite;
}

.section-icon:hover{
    --indent: 2%;

    clip-path: polygon(
        0 0, 15% 0, 50% var(--indent), 85% 0,
        100% 0, 100% 15%, calc(100% - var(--indent)) 50%, 100% 85%,
        100% 100%, 85% 100%, 50% calc(100% - var(--indent)), 15% 100%,
        0 100%, 0 85%, var(--indent) 50%, 0 15%);
}

.section-icon img{
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    display: block;
}

.section-highlight{
    color: var(--text-color-on-background);
    background-color: var(--primary-variant-color);
}


/* ________ ANIMATIONS ________ */
@property --deg {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --stop-1{
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@property --stop-2{
    syntax: '<percentage>';
    initial-value: 60%;
    inherits: false;
}

@keyframes rotating-border {
    to{
        --deg: 1turn;
    }
}

@keyframes small-rotation{
    0%{
        --deg: 0deg;
    }

    50%{
        --deg: 45deg;
    }

    100%{
        --deg: 0deg;
    }
}

@keyframes moving-stop-points{
    0%{
        --stop-1: 0%;
        --stop-2: 60%;
    }

    50% {
        --stop-1: 30%;
        --stop-2: 60%;
    }
    100%{
        --stop-1: 0%;
        --stop-2: 60%;
    }
}

.main-container
{
    margin: 0 auto;
    padding-top: 25px;
    padding-left: var(--main-container-horizontal-padding);
    padding-right: var(--main-container-horizontal-padding);
    /*border-radius: 25px;*/
    min-width: var(--container-min-width);
    max-width: var(--container-max-width);
    background-color: var(--background-color);
    border: 2px dashed #FFFFFF12;
    border-top: transparent;
    border-bottom: transparent;
    align-content: center;
}

/* TODO: Rename */
.element
{
    position: relative;
    display: flex;
    color: var(--text-color-on-background);
    justify-content: space-between;
    align-items: stretch;
    background-color: var(--background-color);
    /*padding: 25px;*/
    /*border-radius: 25px;*/
    border-width: medium;
    margin-bottom: 80px;
    box-shadow: var(--box-shadow-default);

}

/* ______DESC ELEMENTS______ */

.description-element {
    display: flex;
    z-index: 1;
    background-color: var(--surface-color);
}

.description-element-sidebar{
     min-width: 12px;
 }

.description-container
{
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 25px;
}

.description
{
    min-height: 38px;
    flex-grow: 1;
    margin-bottom: 6px;
}

.description-title
{
    width: max-content;
    position: relative;
    letter-spacing: 2px;
    margin: 12px 0 6px;
    font-size: 24px;
    flex-grow: 1;
}

.description-title::before {
    content: "";
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    max-width: 40px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    opacity: 50%;
}



.striped-background{
    background-image: repeating-linear-gradient(45deg,
    var(--text-color-on-surface) 0,
    var(--text-color-on-surface) 1px,
    var(--background-color) 1px,
    var(--background-color) 5px);
    opacity: 12%;
}

.tag-container{
    margin-top: 6px;
    display: flex;
    gap: 6px;
}

.tag{
    background-color: var(--surface-border-color);
    color: var(--tag-color);
    border: 1px solid var(--tag-color);
    padding: 2px 4px;
    border-radius: var(--border-radius-element);
    font-size: 14px;
}



/* ______READ MORE______*/
.read-more::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 5%);
    pointer-events: none;
}
.read-more{
    border-radius: var(--border-radius-element);
    position: relative;
    text-align: justify;
    padding: 1px 24px; /* <p> element has top/bot margin of 16px*/
    margin: 12px 0;
    box-shadow: var(--box-shadow-default);
}

/* BUTTON ELEMENTS */
.button-container
{
    display: flex;
    gap: 12px;
}

.button {
    /* Layout */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 0;
    flex-grow: 1;
    min-height: 42px;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;

    /* Visual */
    background-color: var(--background-color);
    border-radius: var(--border-radius-element);
    border-color: var(--surface-border-color);
    color: var(--secondary-color);
    box-shadow: var(--box-shadow-default);

    /* Typography */
    font-family: Consolas, monospace;
    font-size: 18px;
    font-weight: var(--font-weight-bold);

    /* Transitions */
    transition: 0.5s ease-in-out;
}

.custom-hover::before{
    position: absolute;
    content: '';
    height: calc(100% + 6px);
    width: calc(100% + 6px);
    border-radius: var(--border-radius-element);
    background-image: conic-gradient(from var(--deg), var(--secondary-color), var(--primary-color));

    z-index: -1;
    opacity: 0;

    transition: opacity 0.3s ease-in-out;
    animation: rotating-border 6s ease-out infinite;
}

.custom-hover:hover::before
{
   opacity: 100%;
}

.button:hover{
    border-color: transparent;
}


.button.github
{
    background-color: var(--surface-color);
    color: var(--secondary-color);
}

.github-icon-container{
    height: 100%;
    padding: 2px;
    margin-right: 4px;
    max-height: 24px;
}

#repository_icon circle,
#repository_icon path {
    stroke: var(--secondary-color) !important; /* change to desired color */
}


.is-active-button
{
    background-color: var(--secondary-color);
    color: var(--surface-color);
    border-color:transparent;
}

.is-active-button::after{
    position: absolute;
    content: '';
    height: 75%;
    width: 90%;
    background-image: conic-gradient(from var(--deg), var(--secondary-color), var(--secondary-variant-color));
    filter: blur( 8px);
    z-index: -10;
}

.is-active-button::before
{
    position: absolute;
    content: '';
    height: 114%;
    width: 104%;
    border-radius: var(--border-radius-element);
    background-image: conic-gradient(from var(--deg), var(--secondary-variant-color), var(--primary-middle-color));
    /*mix-blend-mode: lighten;*/
    z-index: -1;
    opacity: 0;

    transition: opacity 0.3s ease-in-out;
    animation: rotating-border 6s ease-out infinite;
}
/* ______MISC ELEMENTS______ */
.hidden-element{
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out;
}

.selection-sidebar{
    opacity: 5%;
    background-color: var(--surface-color);
}

.selection-element{
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selection-diamond {
    position:absolute;

    left: calc(-1 *
    (
    var(--main-container-horizontal-padding)
    + var(--icon-size)/2
    + 2px
    )); /*2xp for border width offset*/

    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    border: 2px solid var(--surface-color);
    /*opacity: 7%;*/
    transform: translateY(-50%) rotate(45deg);

    display: flex;
    justify-content: center;
    align-items: center;
    /*rotate: 45deg;*/
}

.selection-circle{
    position:absolute;

    width: var(--selection-circle-size);
    height: var(--selection-circle-size);

    left: calc(-1 *
    (
    var(--main-container-horizontal-padding)
    + var(--selection-circle-size)/2
    + 2px
    )); /*2xp for border width offset*/

    border: 2px solid;
    border-color: var(--surface-color);
    border-radius: 50%;
    transform: translateY(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 7%;*/
}

.selection-line{
    position: absolute;
    color: var(--surface-color);
    left: 100%;
    border: 1px solid;
    width: calc(var(--main-container-horizontal-padding) - (var(--selection-circle-size)/2));
    transform-origin: center center;
    z-index: -10;
    /*transform: translate(-50%, -50%) rotate(-45deg);*/
}

.selection-animation-active{
    transition: border-color
        0.5s ease-in-out,
        background-color 0.5s ease-in-out,
        box-shadow 0.5s ease-in-out,
        opacity 0.5s ease-in-out;
}
.selection-animation-inactive{
    transition: border-color 0.7s ease-in-out,
    background-color 0.7s ease-in-out,
    box-shadow 0.7s ease-in-out,
    opacity 0.5s ease-in-out;
}

.selection-highlight{
    background-color: var(--secondary-color);
    box-shadow: var(--box-glow-highlight);
    opacity: var(--opacity-value);
    animation: opacity-pulse 6s ease-in-out infinite;

}

.selection-highlight-border{
    border-color: var(--secondary-color);
    box-shadow: var(--box-glow-highlight);
    opacity: var(--opacity-value);
    animation: opacity-pulse 6s ease-in-out infinite;
}

@property --opacity-value {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}


@keyframes opacity-pulse {
    0%{
        --opacity-value: 100%;
    }
    50%{
        --opacity-value: 85%;
    }
    100%{
        --opacity-value: 100%;
    }
}