@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto+Condensed&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300&display=swap');
/* font-family: 'Roboto Flex', sans-serif; */

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300&display=swap');
/* font-family: 'Jura', sans-serif; */

body {
	font-size: 100%;
	font: inherit;
    padding: 0px !important;
    margin: 0px !important;
    /* background-color: #f7f6f5; */
    /* background-color: #777777; */
}


/* ---------------------------------------- LINKS */
a {
    text-decoration: none;
    color: var(--link-text);
}

a:hover {
    border-bottom-color: transparent;
}

a > h2 {color: black;}


/* ---------------------------------------- HEADINGS */
h1, h2, h3, h4, h5, h6 {
	text-decoration: none;
    font-weight: lighter;

    margin-top: 80px;
    margin-bottom: 20px;
}

h1 {
    font-size: 3.2em;
    text-align: center;
    font-family: 'Roboto Flex', sans-serif;
    letter-spacing: 0.1em;
    line-height: 1.3em;
    color: #ffffff;
    max-width: 740px;
    margin: 0px;
    margin-top: 20px;
    text-shadow: 1px 1px 10px #000;

}

h2 {
    font-size: 2em;
    font-family: 'Jura', sans-serif;
}
h3 {
    font-size: 1.4em;
    font-family: 'Jura', sans-serif;
}
h4 {
    font-size: 1.2em;
    font-family: 'Jura', sans-serif;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0px;
}

/* ------------------------------------- LISTS */
main li, main p, text {
	text-align: justify;
	margin: 0 0 1rem 0;
    line-height: 1.7em;
    font-family: 'Roboto Flex', sans-serif;
}
main li {
	margin-left: 5px;
}
main ul.numbers {
    list-style-type: decimal;
    margin-bottom: 10px;
}
main ul {
    padding-inline-start: 10px;
}
main ul.numbers-big {
    list-style-type: decimal;
}
main ul.numbers-big li::marker {
    font-size:24px;
}




.arrow {
    font-size: 24px;
}


/* ------------------------------------ HEADER */
#header {
    background-image: url("./atheism.jpg");
    background-position: top center;
    background-repeat:no-repeat;
    background-size:cover;
    height: 740px;
    width: 100%;
    max-height: 90vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}





.index {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-bottom: 40px;
    font-size: 1.2em;
    /* background-color: hsl(50, 15%, 92%); */
    width: 100%;
    font-size: 1.4em;
    font-family: 'Jura', sans-serif;
}

.index ul {
    list-style-type: decimal;
    list-style-position: outside;
    margin-bottom: 10px;
}

.index li, p {
	text-align: justify;
	margin: 0 0 1rem 0;
    line-height: 1.4em;
    /* font-family: 'Roboto Flex', sans-serif; */
}


/* ------------------------------------- Moral Table */

.moralTable {
    /* display: table; */
	font-family: monospace; 
	margin: 20px 0px;
}
.moralTable thead .tableHeader {display: flex; flex-direction: row;}
.moralTable thead .description {align-self: center; width: 100%;}
.moralTable thead .age { text-align: end;}
.moralTable thead h4 { padding: 20px 10px;}
.moralTable tbody td.level_6 { background: #d5d5d0; }
.moralTable tbody td.level_5 { background: #c5c4c0; }
.moralTable tbody td.level_4 { background: #a3a29d; }
.moralTable tbody td.level_3 { background: #7b7a74; }
.moralTable tbody td.level_2 { background: #4c4a47; }
.moralTable tbody td.level_1 { background: #000000; }
/* .moralTable tbody td.level_6 { background: #d0d0d0; } */
/* .moralTable tbody td.level_5 { background: #c0c0c0; } */
/* .moralTable tbody td.level_4 { background: #989898; } */
/* .moralTable tbody td.level_3 { background: #747474; } */
/* .moralTable tbody td.level_2 { background: #474747; } */
/* .moralTable tbody td.level_1 { background: #000000; } */
.moralTable tbody td.level   { 
	padding: 10px 10px;
	color: white;
	vertical-align: middle;
	text-align: center;
	margin-right: 20px;
    font-size: 24px;
}
.moralTable tbody .header {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	margin-left: 20px;
}
.moralTable tbody .header .title {
	font-weight: bolder;
}
.moralTable tbody .header .age {
	color: #999999;
}
.moralTable tbody .content {
	margin-bottom: 20px;
	margin-left: 20px;
}

















/* ---------------- ARTICLE LAYOUT ---------------*/
.top {
    position: fixed;
    bottom:15px;
    right: 15px;
    /* padding: 5px; */
}

.top-inner {
    position: relative;
    background: black;
    background-color: rgb(0, 0, 0, 1);
    color: white;
    border-radius: 50%;
    width: 31px;
    height: 31px;
    text-align: center;
    vertical-align: middle;
    font-size: 31px;
}

main {
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    padding-right: 15px;
}

main .page {
    max-width: 800px;
    display: flex;
    flex-direction: column;
}

.article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article > .title {
    max-width: 800px;
    text-align: center;
    width: 100%;
    margin-top: 60px;
}

.article > .body {
    max-width: 800px;
    padding: 10px;
}






.center {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

h4.center {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: flex-start;
    color: #777777;
}


.icon-atom {
    background-image: url('./atom.png');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 60px;    
}

.icon-cross {
    background-image: url('./cross.png');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 60px;    
}

.centered {
    text-align: center;
    background-image: url('./atom.png');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 10%;
    padding-right: 10%;
}








/* ----------------------------- COLORS */
.red {
    color: #cc0044;
}

.brown {
    color: var(--brown);
}

.white {
    color: #ffffff;
}

.blue {
    color: var(--blue);
}

.black {
    color: #000000;
}


.marked {
    background: var(--marked-bg);
    color: var(--marked-text);
    padding-left: 4px;
    padding-right: 4px;
}

.bg-black {
    background: #000000;
}
.bg-white {
    background: #ffffff;
}
.bg-red {
    background: #ae345d;
}

.bg-green {
    background: #008866;
}

.bg-blue {
    background: #3656b6;
}

.bg-brown {
    background: #aa4400;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
	/* color: #225588 */
}

.side {
    margin-top: 20px;
    padding-left: 45px;
    background-position: left top;
    background-repeat: no-repeat;
}

.cross {
    background-image: url('./cross.png');
}

.atom {
    background-image: url('./atom.png');
}

blockquote,
.quote {
    margin: 20px 0px;
    padding: 20px 40px;
    /* line-height: 1.7em; */
    background: var(--quote-bg);
    border-left: 4px solid #000000;
    font-style: italic;
    font-size: 0.95em;
    color: var(--quote-text);
}

.quote > p {
    margin-top: 20px;
}

.p10 { padding: 10px }
.pt10 { padding-top: 10px }
.pb10 { padding-bottom: 10px }
.pb20 { padding-bottom: 20px }

.m10 { margin: 10px }
.mt10 { margin-top: 10px }
.mb10 { margin-bottom: 10px }
.mb20 { margin-bottom: 20px }






/* ---------------------------- FOOTER */

#footer {
    margin-top: 40px;
	background-color: #1a1a1a;
	color: #ffffff;
	display: flex;
    flex-direction: column;
	justify-content: center;
	width: 100%;
    align-items: center;
	padding: 40px 0px;
}
#footer .inner {
    padding: 20px;
	max-width: 1024px;
    width: 75%;

}
#footer .inner p {
    text-align: center;
}

#footer .inner li {
	margin-bottom: 20px;;
}

#footer .inner h2,
#footer .inner h3 {
	margin-bottom: 40px;
    color: #ffffff;
}
#footer .inner li {
    font-size: 1.2em;
}





/* ------------------------------------- BOTTOM */
#bottom {
	background-color: #000000;
	color: #ffffff;
	padding: 60px 0px;
    width: 100%;
}

#bottom p {
    padding: 10px;
    text-align: center;
    font-size: 0.8em;
    margin: 0px;
}





/* ----------------------------------- COMMENTS */

#graphcomment {
    background-color: hsl(50, 15%, 82%);
    width: 100%;
    padding: 40px 0px;
}

.graphcomment-inner {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40px 0px;
}

.graphcomment-inner h2 {
margin: 0px;
}

.graphcomment-inner .comment-description {
    color: #a8a69b;
}


.footer {
    /* background-color: #f7f7f7; */
    background-color: hsl(50, 15%, 92%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
}

.footer h2 {
    margin-top: 0px;
}
.footer-content {
    max-width: 800px;
    padding-left: 15px;
    padding-right: 15px;
}

.footer-content  p {
	text-align: justify;
	margin: 0 0 1rem 0;
    line-height: 1.7em;
    font-family: 'Roboto Flex', sans-serif;
}

.footer-content li {
	text-align: justify;
	margin: 0 0 1rem 0;
    line-height: 1.7em;
    font-family: 'Roboto Flex', sans-serif;
}
.footer-content li {
	margin-left: 5px;
}
.footer-content ul.numbers {
    list-style-type: decimal;
    margin-bottom: 10px;
}
.footer-content ul {
    padding-inline-start: 10px;
}
.footer-content ul.numbers-big {
    list-style-type: decimal;
}
.footer-content ul.numbers-big li::marker {
    font-size:24px;
}



.readings {
    display: flex;
    flex-direction: column;
    align-items: center
}


.readings .books {
    margin-bottom: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.readings .book {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
}

.readings .description {
    color: #999999;
    line-height: 2.7em;
}

.readings img {
    /* height: 200px; */
    /* width: 120px; */
    width: 100%;
    margin-bottom: 10px;
}

.readings .book-arrow {
    font-size: 2em;
    align-items: top;
    display: flex;
    color: #999999;
}
.readings p {
    text-align: left;
    font-size: 0.8em;
}















:root {
    --bg: hsl(0, 0%, 100%);
    --text: hsl(0, 0%, 25%);
    --accent: hsl(46, 9%, 90%);
    --marked-bg: #000000;
    --marked-text: #ffffff;
    --link-text: #2ca9b4;
    --quote-bg: hsl(51, 10%, 92%);
    --quote-text: #000000;
    --brown: hsl(21, 60%, 43%);
    --blue:  hsl(216, 50%, 39%);
    --strong-text-color: hsl(0, 0%, 0%);
  }

  strong {
    color: var(--strong-text-color);
  }

  .max-width {
      max-width: 800px;
  }
  /* Use CSS variables for theme colors */
  .page {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 3rem;
    transition: background 0.25s ease, color 0.25s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

@media (max-width: 480px) {
    .page {
        padding: 1rem;
    }
}

#themeToggle {
    position: fixed;       /* keeps it always in view → no scrolling */
    top: 0;
    left: 0;
    opacity: 0;            /* make it invisible */
    pointer-events: none;  /* ignore clicks, label will toggle it */
  }

  /* --- THE VISIBLE BUTTON (LABEL) --- */
  .btn {
    position: fixed;
    padding: 8px;
    background: var(--accent);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.6s ease;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

.btn img {
    margin-right: 7px;
    height: 16px;
    width: 16px;
}
.btn.theme {
    top: 16px;
    right: 16px;
}


.btn.language {
    top: 64px;
    right: 16px;
}

.btn.language {
    color: var(--text)
}
  /* .theme-btn .icon {
    box-shadow: 1px 1px 0px #000;
  } */

  /* Button style in dark mode */
  #themeToggle:checked + .btn {
    background: #444;
    color: #fff;
  }

  /* --- APPLY DARK THEME WHEN CHECKED --- */
  #themeToggle:checked ~ .page {
    --bg: hsl(0 1% 17% / 1);
    --text: hsl(38, 13%, 70%);
    --accent: #444444;
    --marked-bg: hsl(26, 11%, 75%);
    --marked-text: hsl(0 1% 18% / 1);
    --quote-bg: #3f3c3c;
    --quote-text: #bab3b3;
    --brown: hsl(21, 48%, 57%);
    --blue:  hsl(216, 70%, 70%);
    --strong-text-color: hsl(38, 13%, 90%);
  };

  /* Layout content for demo */
  h1 { margin-top: 0; }
  .card {
    border-radius: 8px;
    padding: 16px;
    margin-top: 1rem;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    max-width: 720px;
  }

  /* small responsive tweak */
  @media (prefers-color-scheme: dark) {
    /* keep this optional — checkbox manual toggle has precedence when used */
  }