/* ============= general page modifiers ============= */
body
{
    height: auto;
    width: 100%;
    font-family: 'immortalregular', Fallback, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

ul {
    list-style-type: none;
}

/* ============= common styles ============= */

.card_block {
    display: flex;
    flex-direction: column;
    /* text-shadow: 1px 1px 2px grey; */
    margin: 0px 30px 0px 0px;
}

.card_img {
    border-radius: 10px;
    width: 200px;
    height: 200px;
}

.card_img_reverse {
    border-radius: 10px;
    width: 200px;
    height: 200px;
}


/* ============= nav bar at the top of each page ============= */
.nav_container {
  	width: 100%;
	  display: flex;
	  align-items: center;
    position: fixed;

	  font-size: 2rem;

    background-size: contain;
    background-image: linear-gradient(to right, rgba(255,255,255,1), transparent 80%), url("images/banner_m.png");
    background-position: top;
    background-attachment: fixed;
    background-repeat: no-repeat;
	}

.nav_container :first-child {
  align-self: center;
}

.nav_container :second-child {
  align-self: center;
}

.nav_container :third-child {
  align-self: end;
}

.nav_logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav_logo img {
    width: 125px;
    height: 125px;
	  text-align: center;
	  align-self: center;
	  padding-top: 1rem;
}

.nav_menu {
	  display: flex;
	  align-items: center;
    justify-content: space-evenly;
    font-size: 2rem;
}

    .nav_menu p a {
        display: flex;
        width: 100%;
	      text-decoration: none;
        color: #141414;
        padding: 1rem;
    }

.nav_menu_classes {
	  display: flex;
	  align-items: center;
    justify-content: space-evenly;
    font-size: 2rem;
}

    .nav_menu_classes p a {
        display: flex;
        width: 100%;
	      text-decoration: none;
        color: #141414;
        padding: 1rem;
    }


.nav_text {
    width: 100%;
	  padding: 1rem;
	  text-align: center;
	  align-self: center;
    font-size: 2rem;	  
}

    .nav_text p a {
        width: 100%;
	      text-decoration: none;
        color: black;
        padding: 1rem;
        align-self: end;
    }
   
 
/*  ============= game stats area ============= */

.gamestats_container {
    display: flex;
    align-items: flex-end;
}

.game_stats {
    color: #f3a30b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

    .game_stats p {
        padding-top: 0px;
        margin-top: 0rem;
    }

/*  ============= index.html welcome and intro area ============= */
#welcome {
    scroll-margin-top: 200px;
}

.g_welcome_frame {
    width: 100%;
    height: 500px;
    display: flex;
    background-image: linear-gradient(0deg, #141414 40%, transparent 80%), url("images/makilor_a_narrow.png");
    background-position: top;
    background-attachment: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 140px;
}

.g_welcome_intro {
    text-align: center;
    font-size: 3.5rem;
    justify-content: center;
    align-items: center;
    max-width: 60%;
    color:white;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    margin-left: 30px;
    margin-right: 30px;
}

.g_welcome_name {
    font-size: 3rem;
    justify-content: center;
    color:white;
    text-align: center;
}	

.g_welcome_summary {
    font-size: 1.7rem;
    justify-content: center;
    margin-bottom: 0px;
    margin-left: 20px;
    color:white;
}

.g_welcome_box {
	width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
   
  margin: 20px;
  padding: 10px;
  padding-right: 30px;
}

.g_welcome_enter {
	width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

    .g_welcome_enter h2 {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
        color: white;
        font-size: 2rem;
    }

    .g_welcome_enter h4 {
        display: block-inline;
        justify-content: center;
        text-decoration: none;

    }

    .g_welcome_enter a {
        text-decoration: none;
        color:white;
        text-shadow: 1px 1px 2px darkred;
        text-align:center;
    }

    .g_welcome_enter img {
        border-radius: 10px;
    }

.g_need_client h4 {
    display: block-inline;
    justify-content: center;
    text-decoration: none;
}

.g_need_client a {
    text-decoration: none;
    color:white;
    text-shadow: 1px 1px 2px darkred;
    text-align:center;
}

/*  ============= social media link area ============= */
#social {
    display: flex;
    background-color: #141414;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 30px;
    padding-top: 20px;
    scroll-margin-top: 100px;
}

    #social #discord a {
        padding-top: 0.5px;
    }

    .social_spacer {
        width: 10%;
    }


/*  ============= game details tile area on index.html ============= */

#game_details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #141414;
    color: #141414;
    align-items: stretch;
    height: 100%;
    scroll-margin-top: 175px;
}

.content {
    background-color: black;
}

.g_info_image {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    margin-right: 20px;
}

.g_info_block {
    display: flex;
    background-color: white;
    width:43%;
    min-width: 43%;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
    padding-right: 30px;
}

.g_info_b_new {
    column-count: 2;
    display: flex;
    background-color: #E5E7E9;
    box-shadow: 0 0 5px 10px #E5E7E9;
    width:43%;
    min-width: 43%;
    height: 100%;
    border-radius: 10px;
    border-style: none;
    text-align: center;
    margin: 20px;
    padding: 10px;
    padding-right: 30px;
}

.g_info_b_new :first-child {
    align-self: center;
}

.g_info_desc {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 20px;
}

.g_info_desc a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #141414;
}

.g_info_title {
    font-size: 2.5rem;
    padding: 10px;
    border-bottom-style: solid;
    border-bottom-color: #808080;
    border-bottom-width: 1px;
    justify-content: flex-end;
    height: 100%;
}

.g_info_text {
    font-size: 2rem;
    margin: 0px;
    height: 100%;
    padding-bottom: 20px;
}

.game_info_label {
    display: flex;
    justify-content: flex-start;
    border-bottom-style: solid;
    border-bottom-color: #141414;
    border-bottom-width: 2px;
    font-size: 2rem;
    font-weight: bold;
    margin-right: 30px;
}

.game_info_label_reverse {
    display: flex;
    justify-content: flex-end;
    border-bottom-style: solid;
    border-bottom-color: #141414;
    border-bottom-width: 2px;
    font-size: 2rem;
    padding-right: 40px;
    font-weight: bold;
}

.game_info_desc {
    color: #141414;
    font-size: 1.5rem;
    margin-top:10px;
}

#game_info #pantheon {
    text-decoration: none;
    color:burlywood;
    width: 40%;
    display: flex;
    justify-content: space-around;
    
}

#game_info #rules {
    text-decoration: none;
    color:burlywood;
    width: 40%;
    display: flex;
    justify-content: space-around;
    padding-bottom: 60px;
}

#game_info #classes {
    text-decoration: none;
    color:burlywood;
    width: 40%;
    display: flex;
    justify-content: space-around;
}


/* ================= races.html css ==================*/

#human, #dwarf, #tarr, #half-giant, #half-orc, #gorboc, #wep, #gorboc, #mirlad, #elf, #halfling, #half-elf, #giant, #ogre, #orc, #gralner {
    scroll-margin-top: 150px;
}

#races_play_list, #races_noplay_list {
    scroll-margin-top: 150px;
}

#races_info {
    width: 100%;
    margin-top: 110px;
    display: inline-block;
}

.raceinfo_label {
	  display: flex;
    padding: 20px;
    background-color: #141414;
    color: orange;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    /* text-shadow: 1px 1px 2px grey; */
}

.raceinfo_label a {
    display: flex;
    padding: 10px;
    background-color: #141414;
    color: #808080;
    font-size: 1.5rem;
    font-weight: bold;
    justify-content: center;
    margin-top: 0px;
    text-decoration: none;
}

.raceinfo_label ul {
    margin: 0px;
    display:flex;
    background-color: #141414;
    color: #808080;
    padding: 0px;
}

.raceinfo_label p {
    border-bottom-color: #808080;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.raceinfo_desc {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    /* text-shadow: 1px 1px 1px grey; */
}

.races_card {
    display: flex-start;
    justify-content: center;
    padding: 0px 30px 0px 30px;
}

.races_card_img {
    justify-content: center;
    align-items: center;
}

.races_card img {
    border-radius: 10px;
    width: 200px;
    height:200px;
}

.g_races_play_list {
	  display: flex;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    /* text-shadow: 1px 1px 2px grey; */
    margin-bottom: 30px;
}

.g_races_play_list p {
    color: orange;
    margin: 0;
    font-size: 1.5rem;
}

.g_races_play_list p a {
    color: orange;
    text-decoration: none;
    padding: 0 1rem 0 1rem;
    width: auto;
    box-sizing: content-box;
}

.races_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin: 0 auto;
    padding-top: 10px;
}

.races_block_evens {
    background-color: #141414;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin: 0 auto;
    padding-top: 20px;
}

.races_label_evens {
    border-bottom-style: solid;
    border-bottom-color: #808080;
    border-bottom-width: 1px;
    color: white;
    /* text-shadow: 1px 1px 2px grey; */
}

.races_desc_evens {
    color: white;
    /* text-shadow: 1px 1px 2px grey; */
}

#races_bottom_margin {
    margin-bottom: 0px;
    padding-bottom: 80px;
}

.fixed_anchors {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 100px;
    right: 0px;
    
    border-radius: 10px;
    background-color: #141414;
}

.fixed_anchors a {
    padding:10px;
    background-color: white;
    text-decoration: none;
    color: black;
    border-radius: 10px;
    margin:20px;
}


/* ================= classes.html css ==================*/

#warrior, #monk, #cleric, #mage, #druid, #thief {
    scroll-margin-top: 200px;
}

#classes_info {
    background-color: #E5E7E9;
    display: inline-block;
    padding-top: 110px;
}

.classinfo_label {
    display: flex;
    justify-content: center;

    background-color: #141414;

    color: orange;
    font-size: 2rem;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px grey; */

    padding: 20px;
}

.classinfo_desc {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    padding: 20px;
    /* text-shadow: 1px 1px 1px grey; */
}

.classes_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin: 0 auto;
}

.classes_block_reverse {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin: 0px 0px 0px 30px;;
}

.classes_card {
    display: flex-start;
    justify-content: center;
    padding: 0px 30px 0px 30px;
}

.classes_card_img {
    justify-content: center;
    align-items: center;
}

.classes_card img {
    border-radius: 10px;
    width: 200px;
    height:200px;
}

.classes_card_reverse {
    display: flex-start;
    justify-content: center;
    padding: 0px 30px 0px 0px;
    margin: 15px 30px 15px 0px;
}

.classes_card_img_reverse {
    justify-content: center;
    align-items: center;
}

.classes_card_reverse img {
    border-radius: 10px;
    width: 200px;
    height:200px;
}

.skills_block_reverse {
    padding-left: 30px;
    width:100%;
    column-gap: 40px;
}


/* ================= history.html css ==================*/
#history {
    padding-top: 150px;
}

#history :first-child {
  padding-top: 0px;
}

.hist_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: grey;
    padding-bottom: 10px;
}

.hist_label {
    font-size: 2rem;
    align-self: center;
    font-weight: bold;
    margin-top: 30px;
}

.hist_label p {
    color: white;
    text-shadow: 1px 1px 2px black;
    margin: 0;
}

.hist_label_evens {
    font-size: 2rem;
    align-self: center;
}

.hist_label_evens p {
    color: white;
    /* text-shadow: 1px 1px 2px grey; */
}

.hist_info_block {
    width: 95%;
    display: flex;
    font-size: 1.5rem;
    padding-left: 30px;
}

.hist_info_block p {
    margin-left: 2%;
    color: white;
    /* text-shadow: 1px 1px 2px grey; */
}

.hist_block_evens {
    background-color: #141414;
}

.hist_info_b_evens {
    width: 95%;
    display: flex;
    font-size: 1.5rem;
    padding-left: 30px;
}

.hist_info_b_evens p {
    margin-left: 2%;
    color: white;
    /* text-shadow: 1px 1px 2px grey; */
}

.float_right {
    display: block;
    float: right;
    width: 200px;
    height: 200px;
    margin: 5px;
    border-radius: 10px;
}

.float_left {
    display: block;
    float: left;
    width: 200px;
    height: 200px;
    margin: 5px;
    border-radius: 10px;
}


/* ================= gods.html css ==================*/
#oldgods, #theascended {
    scroll-margin-top: 150px;
}

#gods {
    padding-top: 140px;
}

.gods_label {
    display: flex;
    background-color: #141414;
    color: orange;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    /* text-shadow: 1px 1px 2px grey; */
}

.gods_desc {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    padding: 30px;
    /* text-shadow: 1px 1px 1px grey; */
}

.gods_block {
    display: flex;
    flex-direction: row;
    margin: 30px;
}

.gods_card {
    display: flex-start;
    justify-content: center;
    padding: 0px 30px 0px 30px;
}

.gods_card_img {
    justify-content: center;
    align-items: center;
}

.gods_card img {
    border-radius: 10px;
    width: 200px;
    height:200px;
}

.gods_block_reverse {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
}

#gods_lost p {
    text-align: center;    
    font-size: 1.5rem;
    /* text-shadow: 1px 1px 2px grey; */
    
    padding: 10px 30px 10px 30px;    
}

.gods_lost_list {
    margin: 10px 0px 10px 0px;
}

.gods_lost_list p {
    text-align: center;    
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px grey; */
    
    padding: 10px 0px 10px 0px;    
}


/* ============== rules.html ============= */

#jumphere {
    scroll-margin-top: 150px;
}

#gamerules {
    background-color: #E5E7E9;
    padding-top: 150px;
}

.rules_label {
    display: flex;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
}


.rules_desc {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    padding: 30px;
    margin-left: 60px;
    margin-right: 60px;
    /* text-shadow: 1px 1px 1px grey; */
}

.rules_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    border-radius: 10px;
}

    .rules_block p {
        color:#141414;
        /* text-shadow: 1px 1px 1px grey; */
        margin-right: 30px;
    }

.rules_card_block {
    display: flex-start;
    flex-direction: column;
    /* text-shadow: 1px 1px 2px grey; */
    padding: 10px 30px 10px 30px;
    width: 100%;
}

.rules_info_label {
    display: flex;
    justify-content: flex-start;
    border-bottom-style: solid;
    border-bottom-color: #141414;
    border-bottom-width: 2px;
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 5px; 
    color:#141414;
    /* text-shadow: 1px 1px 1px grey; */
}

.rules_info_desc {
    color: #141414;
    font-size: 1.5rem;
}

.rules_info_desc p {
	  text-align: left;
    color: #141414;
    font-size: 1.5rem;
}


/* ============== maps.html ============= */

#maps {
    background-color: #E5E7E9;
    padding-bottom: 30px;
    padding-top: 140px;
}

#balric {
    border-radius: 10px;
}

.mapsinfo_label {
	  display: flex;
    background-color: #141414;
    color: orange;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    /* text-shadow: 1px 1px 2px grey; */
}

.balric_container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
}

.entia_container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 60px;
}

/* ============== faq.html ============= */

#faq {
    background-color: #E5E7E9;
    padding-top: 150px;
}

.faq_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    border-radius: 10px;
}

    .faq_block p {
        color:#141414;
        /* text-shadow: 1px 1px 1px grey; */
    }

.faq_card_block {
    display: flex-start;
    flex-direction: column;
    /* text-shadow: 1px 1px 2px grey; */
    padding: 10px 30px 10px 30px;
    width: 100%;
}

.faq_info_label {
    display: flex;
    justify-content: flex-start;
    border-bottom-style: solid;
    border-bottom-color: #141414;
    border-bottom-width: 2px;
    padding-bottom: 5px; 
    font-weight: bold;
    color:#141414;
    /* text-shadow: 1px 1px 1px grey; */
}

.faq_info_label p {
    font-size: 1.7rem;
    margin: 0;
}

.faq_info_desc {
    color: #141414;
}

.faq_info_desc p {
    font-size: 1.5rem;
}

/* ================= resources.html css ==================*/
#resources {
    background-color: #E5E7E9;
    padding-bottom: 20px;
    padding-top: 150px;
}

.resources_label {
    display: flex;
    background-color: #141414;
    color: orange;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    /* text-shadow: 1px 1px 2px grey; */
}

.resources_desc {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    padding: 30px;
    /* text-shadow: 1px 1px 1px grey; */
}

.resources_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-right: 30px;
    margin-top: 30px;
}

.resources_card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.resources_card_img {
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    object-fit: none;
}

/* ============== role-playing.html ============= */

#rp_guide {
    background-color: #E5E7E9;
    padding-top: 150px;
}

.rp_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-between;
    justify-content: space-around;
    border-radius: 10px;
}

    .rp_block p {
        color:#141414;
        /* text-shadow: 1px 1px 1px grey; */
    }

.rp_card_block {
    display: flex-start;
    flex-direction: column;
    /* text-shadow: 1px 1px 2px grey; */
    padding: 10px 30px 10px 30px;
    width: 100%;
}

.rp_info_label {
    display: flex;
    justify-content: flex-start;
    border-bottom-style: solid;
    border-bottom-color: #141414;
    border-bottom-width: 2px;
    padding-bottom: 5px; 
    font-weight: bold;
    color:#141414;
    /* text-shadow: 1px 1px 1px grey; */
}

.rp_info_label p {
    font-size: 1.7rem;
    margin: 0;
}

.rp_info_desc {
    color: #141414;
}

.rp_info_desc p {
    font-size: 1.5rem;
}

/* ============== news.html ============= */

#news {
    background-color: #141414;
    padding-top: 150px;
    padding-bottom: 60px;
}

/* Archive index */
#news_archive {
    scroll-margin-top: 150px;
    max-width: 900px;
    margin: 0 auto 40px auto;
    padding: 0 30px;
}

.news_archive_container {
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 20px 30px;
}

.news_archive_label {
    color: orange;
    font-size: 1.5rem;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px grey; */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.news_archive_list {
    display: flex;
    flex-direction: column;
}

.news_archive_item {
    display: flex;
    align-items: baseline;
    padding: 8px 10px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.news_archive_item:hover {
    background-color: #2a2a2a;
}

.news_archive_date {
    color: #808080;
    font-size: 1rem;
    min-width: 140px;
    flex-shrink: 0;
}

.news_archive_title {
    color: #f3a30b;
    font-size: 1.2rem;
}

/* Article cards */
#news_articles {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
}

.news_article {
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 30px 40px 40px 40px;
    margin-bottom: 40px;
    scroll-margin-top: 150px;
}

.news_article_header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.news_article_date {
    color: #808080;
    font-size: 1.1rem;
}

.news_latest_badge {
    scroll-margin-top: 150px;
    background-color: #f3a30b;
    color: #141414;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news_article_title {
    color: orange;
    font-size: 2rem;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px grey; */
    margin: 5px 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.news_article_body {
    color: #d0d0d0;
    font-size: 1.3rem;
    line-height: 1.6;
}

.news_article_body p {
    margin: 0 0 15px 0;
}

.news_article_body a {
    color: #f3a30b;
    text-decoration: none;
}

.news_article_body a:hover {
    text-decoration: underline;
}

.news_subheading {
    color: goldenrod;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 30px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #2a2a2a;
    scroll-margin-top: 160px;
}

/* Table of contents */
.news_toc {
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 20px 0 30px 0;
}

.news_toc_label {
    color: orange;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.news_toc_list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 30px;
}

.news_toc_list li {
    padding: 5px 0;
    break-inside: avoid;
}

.news_toc_list li a {
    color: #d0d0d0;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.news_toc_list li a:hover {
    color: #f3a30b;
}

/* Feature card (skill/system callout) */
.news_feature_card {
    background-color: #252525;
    border-left: 3px solid #f3a30b;
    border-radius: 0 8px 8px 0;
    padding: 15px 20px;
    margin: 15px 0 20px 0;
}

.news_feature_header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.news_feature_tag {
    background-color: #f3a30b;
    color: #141414;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news_feature_name {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.news_feature_note {
    color: #b0b0b0;
    font-size: 1.1rem;
    margin: 0;
}

.news_article_body code {
    background-color: #252525;
    color: #f3a30b;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

/* Terminal output blocks */
.news_terminal {
    background-color: #0a0a0a;
    border: 1px solid #333;
    border-left: 3px solid #555;
    border-radius: 0 6px 6px 0;
    padding: 15px 20px;
    margin: 10px 0 15px 0;
    font-family: Consolas, 'Courier New', monospace;
}

.news_terminal p {
    color: #a0a0a0;
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.5;
}

.news_terminal_bright {
    color: #ffffff !important;
}

.news_terminal_dim {
    color: #606060 !important;
    font-style: italic;
}

.news_terminal_warn {
    color: #cc4444 !important;
    font-weight: bold;
}

.news_terminal_highlight {
    color: #f3a30b !important;
    font-weight: bold;
}

/* Example labels within articles */
.news_example_label {
    color: #d0d0d0;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 25px 0 5px 0;
}

/* Mechanic note callout */
.news_mechanic_note {
    background-color: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 15px 25px;
    margin: 30px 0 20px 0;
}

.news_mechanic_note h4 {
    color: goldenrod;
    font-size: 1.2rem;
    margin: 0 0 8px 0;
}

.news_mechanic_note p {
    color: #b0b0b0;
    font-size: 1.1rem;
    margin: 0;
}

.news_article_sign {
    color: goldenrod;
    font-style: italic;
    margin-top: 30px;
}

/* Mechanic note list */
.news_mechanic_list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.news_mechanic_list li {
    color: #b0b0b0;
    font-size: 1.1rem;
    padding: 4px 0 4px 15px;
    border-left: 2px solid goldenrod;
    margin-bottom: 5px;
}

.news_mechanic_note code {
    background-color: #1a1a30;
    color: #f3a30b;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

/* News tables */
.news_table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 1.1rem;
}

.news_table thead th {
    color: goldenrod;
    font-weight: bold;
    text-align: left;
    padding: 8px 15px;
    border-bottom: 2px solid #333;
}

.news_table tbody td {
    color: #d0d0d0;
    padding: 8px 15px;
    border-bottom: 1px solid #1e1e1e;
}

.news_table tbody tr:nth-child(even) {
    background-color: #1a1a1a;
}

.news_table tbody td:first-child {
    color: #f3a30b;
    font-weight: bold;
    white-space: nowrap;
}

/* ============== page footer ============= */
footer {
    display: flex;
    
    padding-top: 20px;
    padding-bottom: 140px;
    justify-content: space-evenly;
    background: linear-gradient(#141414, #070606);
}

#client {
    width: 30%;
    color: burlywood;
    align-self: center;
    font-size: larger;
   	display: inline-block;
    justify-content: center;
    align-items: center;
}

footer ul {
    font-size: small;
}

    footer ul li {
        padding: 8px;
    }

footer .footer_spacer {
    width: 5%;
}

footer .footer_mid_spacer {
    width: 5%;
}

footer a {
    color:white;
    text-decoration: none;
}

#footer_nav {
    width: 100%;
}

.page_footer {
	display: flex;
  justify-content: center;
  align-items: center;
}

.page_footer_links {
	display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

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

    .nav_container {
    	  font-size: 1.5rem;
    	}
	
	  .g_welcome_frame {
        margin-top: 100px;
    }
    
    .g_welcome_intro {
        font-size: 2.5rem;
    }
    
    .g_welcome_hello {
        font-size: 2rem;
    }	

    .g_welcome_summary {
        font-size: 1.5rem;
        justify-content: center;
        margin-bottom: 0px;
        margin-left: 20px;
        color:white;
    }

    .g_info_image {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        margin-right: 20px;
    }
    
    .g_info_block {
        display: flex;
        background-color: white;
        width:43%;
        min-width: 43%;
        height: 100%;
        border-radius: 10px;
        
        margin: 20px;
        padding: 10px;
        padding-right: 30px;
        
    }
    
    .g_info_desc {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: stretch;
    }
    
    .g_info_title {
        display: flex;
        font-size: 2.0rem;
        padding: 10px;
        border-bottom-style: solid;
        border-bottom-color: #808080;
        border-bottom-width: 1px;
        
        justify-content: flex-end;
        
        height: 100%;
    }
    
    .g_info_text {
        font-size: 1.5rem;
        margin: 0px;
        height: 100%;
    }
    
    .hist_label {
        font-size: 2.0rem;
    }

    .hist_info_block {
        font-size: 1.2rem;
    }

    .game_info_label {
        font-size: 1.5rem;
        padding-bottom: 5px; 
    }

    .game_info_label_reverse {
        font-size: 1.5rem;
        padding-bottom: 5px; 
        padding-right: 0;
    }

    .game_info_desc {
        font-size: 1.2rem;
    }

    .g_races_play_list {
        font-size: 1.5rem;
    }

    .g_races_play_list p {
        font-size: 1rem;
    }

    .g_races_play_list p a {
        padding: .7rem;
    }

    .raceinfo_desc {
        font-size: 1.2rem;
    }
    
    .classinfo_desc {
        font-size: 1.2rem;
    }

    .classinfo_label {
        font-size: 1.5rem;
    }
    
    .gods_label {
        font-size: 1.5rem;
    }

    .rules_desc {
    	  font-size: 1.2rem;
    }
    
    .rules_info_label p {
        font-size: 1.5rem;
    }
    
    .rules_info_desc p {
        font-size: 1.2rem;
    }
    
    .faq_info_label p {
        font-size: 1.5rem;
    }

    .faq_info_desc p {
        font-size: 1.2rem;
    }
    
    .mapsinfo_label {
        font-size: 1.5rem;
    }

    #client {
        font-size: 1rem;
    }

    .news_article_title {
        font-size: 1.7rem;
    }

    .news_article_body {
        font-size: 1.1rem;
    }

    .news_subheading {
        font-size: 1.3rem;
    }

    .news_archive_label {
        font-size: 1.3rem;
    }

    .news_archive_title {
        font-size: 1rem;
    }

    .news_toc_label {
        font-size: 1.1rem;
    }

    .news_toc_list li a {
        font-size: 1rem;
    }

    .news_feature_name {
        font-size: 1.3rem;
    }

    .news_feature_note {
        font-size: 1rem;
    }

    .news_terminal p {
        font-size: 0.95rem;
    }

    .news_example_label {
        font-size: 1.1rem;
    }

    .news_mechanic_note h4 {
        font-size: 1.1rem;
    }

    .news_mechanic_note p {
        font-size: 1rem;
    }

    .news_mechanic_list li {
        font-size: 1rem;
    }

    .news_table {
        font-size: 1rem;
    }

}

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

    .logo img {
        height: 100px;
        width: 100px;
    }

    .nav_container {
    	  font-size: 1.2rem;
    	}
	
    .g_welcome_intro {
        font-size: 2rem;
    }
    
    .g_welcome_hello {
        font-size: 1.5rem;
    }	

    .g_welcome_summary {
        font-size: 1.2rem;
        justify-content: center;
        margin-bottom: 0px;
        margin-left: 20px;
        color:white;
    }

    .g_info_image {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        margin-right: 20px;
    }
    
    .g_info_block {
        display: flex;
        width:40%;
        min-width: 40%;
        height: 100%;
        border-radius: 10px;
        flex-shrink: 0;
        margin: 20px;
        padding: 10px;
        padding-right: 30px;
    }
    
    .g_info_title {
        display: flex;
        font-size: 1.8rem;
        padding: 10px;
        margin: 0px;
        justify-content: flex-end;
        margin-bottom: 30px;
    }
       
    .g_info_desc {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: stretch;
    }

    .g_info_text {
        font-size: 1.2rem;
        margin: 0px;
    }
    
    .hist_label {
        font-size: 1.5rem;
    }

    .hist_info_block {
        font-size: 1rem;
    }

    .game_info_label {
        font-size: 1.2rem;
    }

    .game_info_label_reverse {
        font-size: 1.2rem;
    }

    .game_info_desc {
        font-size: 1rem;
    }

    .g_races_play_list {
        font-size: 1.2rem;
    }

    .g_races_play_list p {
        font-size: .7rem;
    }

    .g_races_play_list p a {
        padding: .5rem;
    }

    .raceinfo_desc {
        font-size: 1rem;
    }
    
    .classinfo_desc {
        font-size: 1rem;
    }

    .classinfo_label {
        font-size: 1.2rem;
    }
    
    .gods_label {
        font-size: 1.2rem;
    }

    #client {
        font-size: .7rem;
    }

    .news_article_title {
        font-size: 1.5rem;
    }

    .news_article_body {
        font-size: 1rem;
    }

    .news_subheading {
        font-size: 1.2rem;
    }

    .news_feature_name {
        font-size: 1.2rem;
    }

    .news_feature_note {
        font-size: 0.9rem;
    }

    .news_terminal p {
        font-size: 0.9rem;
    }

    .news_example_label {
        font-size: 1rem;
    }

    .news_mechanic_note h4 {
        font-size: 1rem;
    }

    .news_mechanic_note p {
        font-size: 0.9rem;
    }

    .news_mechanic_list li {
        font-size: 0.9rem;
    }

    .news_table {
        font-size: 0.9rem;
    }

    .rules_desc {
    	  font-size: 1rem;
    }

    .rules_info_label {
        font-size: 1.2rem;
    }

    .rules_info_desc p {
        font-size: 1rem;
    }
    
    .faq_info_label {
        font-size: 1rem;
    }

    .faq_info_desc {
        font-size: .7rem;
    }
    
    #client {
        font-size: .7rem;
    }
}

@media screen and (max-width: 912px) {
    .logo img {
        height: 75px;
        width: 75px;
    }

    #welcome {
        scroll-margin-top: 200px;
    }
    
    .nav_container {
    	  font-size: 1.2rem;
    	}
	
    .g_welcome_intro {
        font-size: 1.5rem;
    }
    
    .g_welcome_hello {
        font-size: 1.7rem;
    }	

    .g_welcome_summary {
        font-size: 1.2rem;
    }

    .g_welcome_enter h2 {
        font-size: 1.5rem;
    }

    .g_welcome_enter img {
        border-radius: 10px;
    }

    .g_info_image {
        width: 125px;
        height: 125px;
        border-radius: 10px;
        margin-right: 20px;
    }
    
    .g_info_block {
    }
    
    .g_info_title {
        font-size: 1.8rem;
    }
       
    .g_info_text {
        font-size: 1.2rem;
    }
    
    .hist_label {
        font-size: 1.2rem;
    }

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

    .game_info_label {
        font-size: 1rem;
    }

    .game_info_label_reverse {
        font-size: 1rem;
    }

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

    .g_races_play_list {
        font-size: 1rem;
    }

    .g_races_play_list p {
        font-size: .5rem;
    }

    .g_races_play_list p a {
        padding: .3rem;
    }

    .raceinfo_desc {
        font-size: .7rem;
    }
    
    .classinfo_desc {
        font-size: .7rem;
    }

    .classinfo_label {
        font-size: 1rem;
    }
    
    .gods_label {
        font-size: 1rem;
    }

    .rules_desc {
    	  font-size: .7rem;
    }
    
    .rules_info_label {
        font-size: 1rem;
    }
    
    .rules_info_desc p {
        font-size: .7rem;
    }
    
    .faq_info_label {
        font-size: .7rem;
    }

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

    #client {
        font-size: .7rem;
    }

    #news {
        padding-top: 120px;
    }

    .news_article {
        padding: 20px 25px 30px 25px;
    }

    .news_article_title {
        font-size: 1.3rem;
    }

    .news_article_body {
        font-size: 0.9rem;
    }

    .news_subheading {
        font-size: 1.1rem;
    }

    .news_toc_list {
        columns: 1;
    }

    .news_toc_label {
        font-size: 1rem;
    }

    .news_toc_list li a {
        font-size: 0.9rem;
    }

    .news_archive_date {
        font-size: 0.8rem;
        min-width: 110px;
    }

    .news_archive_title {
        font-size: 0.9rem;
    }

    .news_feature_name {
        font-size: 1.1rem;
    }

    .news_feature_note {
        font-size: 0.8rem;
    }

    .news_terminal p {
        font-size: 0.8rem;
    }

    .news_terminal {
        padding: 12px 15px;
    }

    .news_example_label {
        font-size: 0.9rem;
    }

    .news_mechanic_note h4 {
        font-size: 0.9rem;
    }

    .news_mechanic_note p {
        font-size: 0.8rem;
    }

    .news_mechanic_list li {
        font-size: 0.8rem;
    }

    .news_mechanic_note {
        padding: 12px 18px;
    }

    .news_feature_card {
        padding: 12px 15px;
    }

    .news_table {
        font-size: 0.8rem;
    }

    .news_table thead th,
    .news_table tbody td {
        padding: 6px 10px;
    }
}

@media screen and (max-width:632px) {
   
    .nav_container {
        font-size: 1.2rem;
        background-image: none;
        background-attachment: scroll;
        background-image: linear-gradient(to bottom, white, lightgrey, white);
        top: 0;
    }

    .nav_logo img {
        width: 50%;
        height: 50%;
        min-height: 40px;
        min-width: 40px;
     	  padding-top: 0;
    }
	  
	  .nav_menu p a {
        font-size: 1.2rem;
        padding: .5rem;
    }

	  .nav_menu_classes p a {
        display: none;
    }

    .nav_text {
        padding: 0;
        font-size: 1.2rem;
    }
	
    .nav_text p {
        padding: 0;
    }
	
    #welcome {
        scroll-margin-top: 0px;
    }
    
    #game_details {
        scroll-margin-top: 0px;
    }

    #social {
        scroll-margin-top: 0px;
    }
    	
    .g_welcome_frame {
        display: grid;
        margin-top: 95px;
        background-attachment: scroll;
        background-size: cover;
        grid-auto-rows: min-content;
        gap: 0;
        height: 100%;
    }
    
    .g_welcome_intro {
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .g_welcome_name {
      font-size: 1.2rem;
    }	

    .g_welcome_summary {
      font-size: 1rem;
    }

    .g_welcome_enter_frame {
        margin-bottom: 30px;
    	
    }

    .g_welcome_enter {
        color:red;
    }

    .g_welcome_enter h2 {
        font-size: 1rem;
    }

    .g_welcome_enter img {
    	  width: 125px;
     	  height: 125px;
    }
  
    .g_need_client h4 {
        font-size: .5rem;
    }
    
    .g_info_b_new {
        column-count: 1;
        display: inline-grid;
        padding-right: 10px;
        align-self: center;
    }

    .g_info_b_new :first-child {
    }

    .g_info_image {
        border-radius: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 75px;
        height: 75px;
    }
    
    .game_info_label {
        font-size: 1rem;
        margin-right: 0px;
    }

    .game_info_label_reverse {
        font-size: 1rem;
    }
    
    .game_info_desc {
        font-size: .7rem;
        padding-right: 0;
    }

    .g_info_title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
       
    .g_info_desc {
        padding-bottom: 0px;
    }

    .g_info_text {
        font-size: .8rem;
        padding-bottom: 0px;
    }
    
    #gods {
        padding-top: 100px;    	
    }
    
    .gods_block {
        column-count: 1;
        display: inline-grid;
        align-self: center;
        margin: 10px 0px 10px 0px;
        padding: 0;
    }

    .gods_card {
        display: flex-start;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    
    .gods_card img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 35%;
        height: auto;
    }

    #gods_lost p {
        font-size: .7rem;
    }

    .gods_lost_list p {
        font-size: .7rem;
    }
    
    #races_info {
        margin-top: 90px;    	
    }

    .raceinfo_label {
        font-size: 1rem;
    }

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

    .races_block {
        column-count: 1;
        display: inline-grid;
        align-self: center;
        margin: 10px 0px 10px 0px;
        padding: 0;
    }

    .races_block_evens {
        column-count: 1;
        display: inline-grid;
        align-self: center;
        margin: 10px 0px 10px 0px;
        padding: 0;
    }

    .races_card {
        display: flex-start;
        justify-content: center;
        align-items: center;
        padding: 10px 0 0 0;
    }
    
    .races_card img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
        height:100px;
    }
            
    .g_races_play_list {
    	  padding: 10px 0px 5px 0px;
    }
    
    .g_races_play_list p {
    	  font-size: .7rem;
    	  padding-bottom: 5px;
    }

    .g_races_play_list :first-child {
        display: none;
    }

    #classes_info {
        padding-top: 100px;    	
    }

    .classinfo_label {
        margin: 0;	
    }	
	
    .classes_block {
        column-count: 1;
        display: inline-grid;
        align-self: center;
        margin: 10px 0px 10px 0px;
        padding: 0;
    }

    .classes_block_reverse {
        column-count: 1;
        display: inline-grid;
        align-self: center;
        margin: 10px 0px 10px 0px;
        padding: 0;
    }
            
    .classes_card {
        display: flex-start;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    
    .classes_card img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
        height:100px;
        }

    .classes_card_reverse {
        display: flex-start;
        justify-content: center;
        padding: 0px 0px 0px 0px;
        margin: 15px 0px 15px 0px;
    }

    .classes_card_reverse img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
        height:100px;
    }

    #resources {
        padding-top: 100px;
    }
    
    .resources_block {
        column-count: 1;
        display: inline-grid;
        padding-right: 10px;
        align-self: center;
        margin-right: 0;
        padding-right: 0;
    }

    .resources_label {
        font-size: 1.5rem;
    }

    .resources_label p {
        margin: 10px;
    }

    .resources_desc {
        font-size: 3.5rem;
    }

    .resources_card_img {
        border-radius: 10px;
    }

    .resources_card_img img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .card_block {
    	 display: flex-start;
       margin: 0px 20px 0px 20px;
    }

    #faq {
        padding-top: 100px;
    }
     
    .faq_info_label p {
        font-size: .7rem;
        margin: 0;
    }

    .faq_info_desc p {
        font-size: .5rem;
    }
    
    #gamerules {
        padding-top: 100px;
    }
    
    .rules_desc {
        padding: 10px;
        margin-top: 10px;
        font-size: .7rem;
    }
    
    .rules_block p {
        font-size: .7rem;
    }
    
    #history {
        padding-top: 100px;
    }

    .hist_label {
        font-size: 1rem;
        margin-top: 15px;
    }

    .hist_info_block {
        font-size: .7rem;
        display: inline-grid;
        align-self: center;
        padding: 0;
        margin-left: 10px;         
        margin-right: 10px;
    }

    .hist_info_block img {
        display: none
    }
    
    .hist_info_img {
        margin: 0;
    }

    #maps {
        padding-top: 100px;
    }
    
    .mapsinfo_label {
        font-size: 1.2rem;
    }
    
    .balric_container {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .balric_container img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    .entia_container {
        margin-top: 30px;
    }

    .entia_container img {
       width: 80%;
    }
     
    .page_footer {
        column-count: 1;
        display: inline-grid;
        align-self: center;
    }
    
    .page_footer_links {
        margin-right: 0;	
    }

    .footer_nav {
        width: 100%;	
    }
    
    #client {
        width: 100%;
    }
    
    #client p {
        text-align: center;
        margin: 15px;
    }

    #news {
        padding-top: 100px;
    }

    #news_archive {
        padding: 0 15px;
    }

    .news_toc {
        padding: 15px 18px;
    }

    .news_toc_list {
        columns: 1;
    }

    .news_toc_label {
        font-size: 0.9rem;
    }

    .news_toc_list li a {
        font-size: 0.75rem;
    }

    .news_toc_list li {
        padding: 3px 0;
    }

    .news_archive_container {
        padding: 15px 20px;
    }

    .news_archive_item {
        flex-direction: column;
        gap: 2px;
        padding: 6px 10px;
    }

    .news_archive_date {
        font-size: 0.7rem;
        min-width: auto;
    }

    .news_archive_title {
        font-size: 0.8rem;
    }

    .news_archive_label {
        font-size: 1rem;
    }

    #news_articles {
        padding: 0 15px;
    }

    .news_article {
        padding: 15px 20px 25px 20px;
    }

    .news_article_title {
        font-size: 1.1rem;
    }

    .news_article_body {
        font-size: 0.8rem;
    }

    .news_subheading {
        font-size: 0.9rem;
    }

    .news_latest_badge {
        font-size: 0.6rem;
    }

    .news_article_date {
        font-size: 0.8rem;
    }

    .news_feature_card {
        padding: 10px 15px;
    }

    .news_feature_header {
        gap: 8px;
    }

    .news_feature_name {
        font-size: 1rem;
    }

    .news_feature_tag {
        font-size: 0.6rem;
    }

    .news_feature_note {
        font-size: 0.75rem;
    }

    .news_terminal {
        padding: 10px 12px;
    }

    .news_terminal p {
        font-size: 0.7rem;
    }

    .news_example_label {
        font-size: 0.8rem;
    }

    .news_mechanic_note {
        padding: 10px 15px;
    }

    .news_mechanic_note h4 {
        font-size: 0.8rem;
    }

    .news_mechanic_note p {
        font-size: 0.7rem;
    }

    .news_mechanic_list li {
        font-size: 0.7rem;
        padding: 3px 0 3px 10px;
    }

    .news_table {
        font-size: 0.7rem;
    }

    .news_table thead th,
    .news_table tbody td {
        padding: 5px 8px;
    }

}


@font-face {
    font-family: 'immortalregular';
    src: url('immortal-webfont.woff') format('woff'),
         url('immortal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}