@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    /* || Color */
    --primary-color: #0A0F0D;
    --primary-color-2: hsl(60, 20%, 9%);
    --primary-color-3: #434d0f;
    --secondary-color: #FF934F;
    --accent-color: #CABD77;
    --light-color: #f7f7f7;
    --dark-color: #141313;
    --accent-color-gradient: hsla(51, 44%, 63%, 0.39);

    /* || font*/
    --font-size: clamp(1.2rem, 1vw + 1vh, 1.7rem);
}

/* || global properties */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    /* || 1rem = 10px */
}

body {
    max-width: 100%;
    min-height: 100%;

    font-size: clamp(1.2rem, 1vw + 1vh, 1.7rem);
    font-family: 'open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08ch;
    line-height: calc(var(--font-size) + 0.8em);

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

h2 {
    position: relative;
    padding-bottom: 0.5em;
    margin: 0 auto 0.2em auto;

    text-align: center;
    text-indent: 0;

    font-size: clamp(2rem, 2vh + 3vw, 4rem);
    font-family: 'Arvo', 'Open Sans', sans-serif;
    color: var(--accent-color);

}

h2::before {
    content: '↼ ';
}

h2::after {
    content: ' ⇁';
}

.blockquote__quote {
    text-align: center;
}

img {
    width: 100%;
    max-width: 400px;
    height: auto;

    padding: 5px;
    border-radius: 5px;
    background: linear-gradient(to bottom right, var(--primary-color), var(--accent-color));
}


.hightlight {
    color: var(--accent-color);
    font-style: normal;
}

figcaption {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    font-style: italic;
}

/* || header block */
.header {
    min-height: 100vh;
    width: 100%;
    padding-bottom: 5em;
    line-height: normal;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;

    background-image: linear-gradient(to top, rgb(10, 9, 9), var(--accent-color-gradient) 98%, var(--primary-color)), url(images/banner.png);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.header * {
    /* || Stacking header block */
    grid-area: 1;
}

.header__title {
    text-align: center;
    padding-bottom: 0.1em;

    font-family: 'Protest Revolution', sans-serif;
    font-size: clamp(2rem, calc(4vh + 4vw), 20rem);

    color: transparent;

    background: linear-gradient(to right bottom, var(--accent-color) 60%, var(--primary-color));

    -webkit-background-clip: text;
    /* || clip on live preview doesn't work without this */
    background-clip: text;
}

.header__description {
    color: transparent;
    font-family: 'Protest Revolution', 'Open Sans', sans-serif;
    text-align: right;
    font-size: clamp(2rem, 1vh + 1vw, 4rem);

    background: linear-gradient(to right, var(--accent-color)70%, var(--accent-color-gradient));

    /* || background clip on live preview doesn't work without this */
    -webkit-background-clip: text;
    background-clip: text;
}

/* || subject block */

.subject {
    min-height: 100vh;
    max-width: 100%;
    position: relative;

    display: flex;
    flex-flow: column;
    place-content: space-between center;

    padding: 1em;

    text-align: center;
    background: linear-gradient(to bottom, #141414e5, var(--primary-color)), url(images/background.jpeg) 60%;
}


.subject__info {
    padding: 3em 0;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--accent-color);
}

/* || tribute container */
.article {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    margin: 0 auto;

    text-align: left;
    width: 95%;
}

/* || section block */

.section {
    display: flex;
    flex-flow: column-reverse wrap;
    row-gap: 2rem;
    max-width: 80rem;

    padding: 2em 1.5em;

    border-radius: 0.2em;
    border:1px solid var(--primary-color-3);
    background-color: var(--primary-color-2);
}

.section__figure {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.section__image {
    padding: 0;
}

.section__article {
    padding-bottom: 1em;
    border-bottom: 1px solid var(--accent-color);
}

.section__figure {
    padding-top: 1em;
}

/* || start of section with multiple picture */
.section:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-column-gap: 3px;
    grid-row-gap: 10px;
}

.section:nth-child(3) .section__figure {
    order: 2;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 1em;
}

.section:nth-child(3) .section__image {
    width: 40%;
    height: auto;
}


/* || last picture positioning */
.section:nth-child(3) .section__caption {
    width: 100%;
}
/* || end of section with multiple picture */

blockquote {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;

    width: 80%;
    max-width: 80rem;
    min-height: 15rem;
    padding: 1em;

    font-style: italic;

    background-color: var(--dark-color);
    border: 1px solid var(--primary-color-3);
    border-left: 0.5rem solid var(--accent-color);
    border-radius: 2px;
}
.blockquote__quote {
    font-size: calc(var(--font-size) + 0.5em);
}
.links {
    width: 85%;
    max-width: 80rem;
    margin : 3em auto;
}
.links__li {
    list-style-position: inside;
}
a:any-link {
    display: inline-block;
    padding-left: -10px;
    
    text-decoration: none;
    text-indent: 0;
    line-height: normal;

    color: var(--light-color);
    background-image: linear-gradient(90deg, var(--accent-color), var(--accent-color));
    background-size: 100% 0;
    background-position: bottom;
    background-repeat: no-repeat;
    border-bottom: 0.1em solid var(--accent-color);

    transition: all 0.25s;
}
a:hover,
a:focus {
    background-size: 100% 100%;
    color: var(--primary-color);
}

.custom-shape-divider-top-1707890958 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1707890958 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 41px;
}

.custom-shape-divider-top-1707890958 .shape-fill {
    fill: #030000;
}