:root {
    /* colors */
    --text-color: #848484;
    --text-color-400: #2f2e2e;
    --accent-color: hsl(22, 61%, 52%);
    --accent-color-100: hsl(22, 92%, 75%);
    --light-color: hsl(0, 0%, 100%);
    --bkgrd-color: hsl(0, 0%, 20%);
    --bkgrd-color-400: hsl(0, 0%, 40%);
    --bkgrd-author: hsl(4, 5%, 40%);
    /* spacing */
    --padding-base: 1rem;
    --padding-nav: .67rem;
    --padding-button: .5rem .8rem;
    --margin-base: 2rem;
    --margin-heading: 1.5rem 0 0;
    --above-main: 50px;
    --gap-base: 2rem;
    /* typography */
    --font-size: 1.23rem;
    --heading-font: 'Raleway', sans-serif;
    --large-heading: 2.75rem;
    --body-font: 'Lato', sans-serif;
    --large-fontsize: 1.6rem;
    --small-fontsize: .8rem;
    /* styling */
    --radius-base: 6px;
 --accent-gradient: linear-gradient(90deg, #FF86CD, #9FD6FD);

--theme0: #FF86CD;
--theme1: #8c9cdc;
--theme2: #faa98c;
--theme3: #7b9dec;
--theme4: #e69bb4;
--theme5: #73b86a;
--theme6: #86bce4;
--theme7: #5e9dab;

--theme0a: #9FD6FD;
--theme1a: #9eeeab;
--theme2a: #7be6ea;
--theme3a: #89edf0;
--theme4a: #f0e696;
--theme5a: #f6ce91;
--theme6a: #eda5ca;
--theme7a: #8befa2;

--t0-gradient: linear-gradient(90deg, var(--theme0), var(--theme0a));
--t1-gradient: linear-gradient(90deg, var(--theme1), var(--theme1a));
--t2-gradient: linear-gradient(90deg, var(--theme2), var(--theme2a));
--t3-gradient: linear-gradient(90deg, var(--theme3), var(--theme3a));
--t4-gradient: linear-gradient(90deg, var(--theme4), var(--theme4a));
--t5-gradient: linear-gradient(90deg, var(--theme5), var(--theme5a));
--t6-gradient: linear-gradient(90deg, var(--theme6), var(--theme6a));
--t7-gradient: linear-gradient(90deg, var(--theme7), var(--theme7a));

    --box-shadow: 0 0 4px 2px rgba(153, 153, 153, 0.131);

}


/* reset */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* Base */

body {
    font-family: var(--body-font);
    line-height: 1.2;
    font-size: var(--font-size);
}

.president .green h2 {
    color: var(--text-color);
}



h1, .large-title {

 font-size: var(--large-heading);
    margin: var(--margin-heading); 
    font-size: var(--large-heading);
    margin: var(--margin-heading);
    line-height: 1;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}



h2 {
    margin: var(--margin-heading);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}




.themeOne h1, .themeOne h2, .themeOne h3, .themeOne h4, .themeOne h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t1-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeTwo h1, .themeTwo h2, .themeTwo h3, .themeTwo h4, .themeTwo h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t2-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeThree h1, .themeThree h2, .themeThree h3, .themeThree h4, .themeThree h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t3-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeFour h1, .themeFour h2, .themeFour h3, .themeFour h4, .themeFour h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t4-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeFive h1, .themeFive h2, .themeFive h3, .themeFive h4, .themeFive h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t5-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeSix h1, .themeSix h2, .themeSix h3, .themeSix h4, .themeSix h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t6-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeSeven h1, .themeSeven h2, .themeSeven h3, .themeSeven h4, .themeSeven h5 {
    font-family: var(--heading-font);
    padding: .35rem 0 .25rem;
    background: var(--t7-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}









.article h3, .article h4 {
    margin-top: 1rem;
}

.posth4 {
    padding-top:0;
}

p,
em,
a
 {
    margin-top: 1ch;
    color: #848484;
}


/* lists */

ul {
    padding: 1rem 0;
    /* margin-block-start: 0; */
    margin-inline-start: 2rem;
}

ol {
    padding: 1rem 0;
    margin-inline-start: 2rem;
}

ol li {
    margin-top: .3rem;
    padding-left: .5rem;
}

ul li:not(.references ul li) {
    margin-top: .3rem;
}

.article h2:last-of-type {
margin-bottom:.5rem;
}


.themeZero ul li::marker,
.themeZero ol li::marker {
    color: #FF86CD;
    font-size: 20px;
}

.themeOne ul li::marker,
.themeOne ol li::marker {
    color: var(--theme1);
}

.themeTwo ul li::marker,
.themeTwo ol li::marker {
    color: var(--theme2);
}

.themeThree ul li::marker,
.themeThree ol li::marker {
    color: var(--theme3);
}

.themeFour ul li::marker,
.themeFour ol li::marker {
    color: var(--theme4);
}

.themeFive ul li::marker,
.themeFive ol li::marker {
    color: var(--theme5);
}

.themeSix ul li::marker,
.themeSix ol li::marker {
    color: var(--theme6);
}

.themeSeven ul li::marker,
.themeSeven ol li::marker {
    color: var(--theme7);
}



li,
li a {
    color: #848484;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table,
th,
td {
    border: 1px solid #ddd;
}

th,
td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
}


/* Navigation */

.nav {
    position: fixed;
    width: 100%;
    height: var(--above-main);
    top: 0;
    left: 0;
    background-color: var(--bkgrd-color);
    color: var(--light-color);
    padding: var(--padding-nav);
    text-align: center;
    transition: top 0.3s;
    z-index: 1000;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    max-width: 1024px;
    margin: auto;
    padding: 0 1rem 0 0;
}

.themeZero .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeOne .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t1-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeTwo .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t2-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeThree .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t3-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeFour .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t4-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeFive .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t5-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeSix .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t6-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.themeSeven .nav-buttons button {
    display: flex;
    padding: var(--padding-button);
    background-color: var(--background-color);
    color: var(--light-color);
    border: none;
    cursor: pointer;
    background: var(--t7-gradient);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}




.themeZero .nav-buttons, .themeOne .nav-buttons, .themeTwo .nav-buttons, .themeThree .nav-buttons, .themeFour .nav-buttons, .themeFive .nav-buttons, .themeSix .nav-buttons, .themeSeven .nav-buttons {
    padding: 0 1rem 0 .5rem;
}


.nav-buttons button:disabled {
    background-color: var(--bkgrd-color-400);
    cursor: not-allowed;
}

.button-group {
    display: flex;
    width: max-content;
}

.nav-caret {
    padding: 0 .25rem;
}

.contents {
    padding-left: 0;
}

.contents::after {
    content: 'Contents';
    margin-left: .3rem;
}

.next::before {
    content: 'Next';
}

.previous::after {
    content: 'Prev';
}

.pageNo {
    width: 35px;
    height: 32px;
    background: linear-gradient(90deg, #FF86CD, #9FD6FD);
    padding: 0.2rem .4rem;
    text-align: center;
    border-radius: 50%;
    color: var(--text-color-400);
}

.themeZero .pageNo {
    background: var(--t0-gradient);
}
.themeOne .pageNo {
    background: var(--t1-gradient);
}

.themeTwo .pageNo {
    background: var(--t2-gradient);
}

.themeThree .pageNo {
    background: var(--t3-gradient);
}

.themeFour .pageNo {
    background: var(--t4-gradient);
}
.themeFive .pageNo {
    background: var(--t5-gradient);
}
.themeSix .pageNo {
    background: var(--t6-gradient);
}

.themeSeven .pageNo {
    background: var(--t7-gradient);
}


.logo span {
    display:none;
}


@media (min-width: 600px) {
    .logo span {
    display:inline;
}
}

/* body */

main {
    padding: var(--padding-base);
    max-width: 1024px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 2rem;
}


/*  authors */

.author-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    border-radius: var(--radius-base);
}

.author-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: .5rem;
    max-width: 30ch;
    background: linear-gradient(90deg, #FF86CD, #9FD6FD);
}

.themeZero .author-group {
    background: var(--t0-gradient);
}

.themeOne .author-group {
    background: var(--t1-gradient);
}

.themeTwo .author-group {
    background: var(--t2-gradient);
}

.themeThree .author-group {
    background: var(--t3-gradient);
}

.themeFour .author-group {
    background: var(--t4-gradient);
}

.themeFive .author-group {
    background: var(--t5-gradient);
}

.themeSix .author-group {
    background: var(--t6-gradient);
}

.themeSeven .author-group {
    background: var(--t7-gradient);
}

.ch20 {
    max-width: 20ch;
}

.ch25 {
    max-width: 25ch;
}

.ch30 {
    max-width: 30ch;
}

.ch35 {
    max-width: 35ch;
}

.ch40 {
    max-width: 40ch;
}

.ch45 {
    max-width: 45ch;
}

.ch50 {
    max-width: 50ch;
}

.author {
    display: flex;
    align-items: center;
    font-size: var(--small-fontsize);
    color: var(--text-color-400);
}

.author-image {
    width: 54px;
    height: 66px;
    margin-right: .5rem;
}

.author-image img {
    display: flex;
    width: 54px;
    height: 66px;
    margin-right: .5rem;
}


/* images */

.image {
    width: 100%;
    height:auto;
    max-height: 480px;
    overflow: hidden;
    display: flex;
    position: relative;
}

video {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.image img {
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}


.credit {
    position: absolute;
    bottom: 12px;
    right: 1rem;
    padding: .35rem;
  font-size: 12px;
  color:#fff;
}

.credit a {
    color:white;
}

.overlay {
    position: absolute;   
    left:1rem;
    bottom:12px;
}

.overlay img {
    width: 100%;
  height:auto;
}


/* main article content */

.article p:first-of-type:not(.column p, .tall-video *, .card p) {
    font-size: var(--large-fontsize);
    font-family: var(--heading-font);
    margin-bottom: 1rem;
}



.tall-video .column .image {
    display:flex;
    object-position: center;
    max-height:780px;
    /* max-height:100%; */
}



@media (min-width: 800px) {
    .tall-video .column .image {
        max-height:700px;
    }
}

@media (min-width: 1000px) {
    .tall-video .column .image {
        max-height:600px;
    }
}



.tall-video .column > p:first-of-type {
    font-size: var(--large-fontsize);
    font-family: var(--heading-font);
    margin-bottom: 1rem;
}

.tall-video > * .column h1 {
    margin-top:0;
    padding-top: 0;
    margin-bottom: 1rem;;
}

.tall-video .author-container {
    margin-bottom: 2rem;
}

.tall-video .column-container {
    margin-top:0;
}


.tall {
    margin-bottom:2rem;
}

/* blockquotes */

blockquote {
    font-family: var(--heading-font);
    font-style: italic;
    color: #555;
    padding: 1.5em 48px 1.5em 75px;
    margin: 20px auto;
    position: relative;
}

blockquote::before {
    content: "“";
    font-size: 100px;
    font-weight: bold;
    color: #ccc;
    position: absolute;
    left: 0;
    top: 25px;
    line-height: 0.7;
    font-family: Georgia, serif;
}



blockquote::after {
    content: "”";
    font-size: 100px;
    font-weight: bold;
    color: #ccc;
    position: absolute;
    right: 10px;
    bottom: 20px;
    line-height: 0.7;
    font-family: Georgia, serif;
}

.themeOne blockquote::before, .themeOne blockquote::after {
    color: var(--theme1);
}

.themeTwo blockquote::before, .themeTwo blockquote::after {
    color: var(--theme2);
}

.themeThree blockquote::before, .themeThree blockquote::after {
    color: var(--theme3);
}

.themeFour blockquote::before, .themeFour blockquote::after {
    color: var(--theme4);
}

.themeFive blockquote::before, .themeFive blockquote::after {
    color: var(--theme5);
}

.themeSix blockquote::before, .themeSix blockquote::after {
    color: var(--theme6);
}










blockquote p {
    margin: 0;
    line-height: 1.3;
    font-size: var(--large-fontsize);
}


/* Columns */

.column-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0 2rem;
    margin-top: 1rem;
}

.embed {
    margin-top:1ch;
}

@media (min-width: 1124px) {
    .column-container {
        width: calc(100% + 200px);
        position: relative;
        left: -100px;
        padding: 0 1rem;
    }

    .inbody {
        width: 100%;
        max-width: 1024px;
        left:0;
        padding:0;
    
    }

}

@media (min-width: 768px) {
    .column-container {
        flex-direction: row;
    }
    .column {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

.column .image {
    display: flex;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}

.column img {
    object-fit: cover;
    object-position: center;
}

.column-container h2, .card-container h2 {
    margin-top: 0;
}

.card-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top:2rem;

}

@media (min-width:800px) {
    .card-container {
        grid-template-columns: 1fr 1fr;
    }
}

.fullwidth {
    margin-top:1rem;
    grid-template-columns: 1fr;
}

.card {
   padding:1rem 1rem 2rem;
   background: #f3f3f3;
   border-radius: var(--radius-base);
 
}



.green h2 {
    margin-top: 1rem;
}

.card img {
    width: 100%;
    border-radius: 3px;
}


/* reference */

.references {
    font-size: .7rem;
}

.references ul {
    list-style-type: none;
    padding: .5rem 0;
    margin-inline-start: 0;
}

.references ul li {
    margin: 0 0 .3rem;
}

/* contents */