/* Reset CSS to ensure consistent layout */
body, h1, h3, div {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%; /* Full height for the body and HTML */
    margin: 0;
    font-size: 16px;
}

body {
    display: flex;
    flex-direction: column;
    background: url('image/universe-background.png') no-repeat center center fixed;
    background-size: cover; /* Cover the entire viewport
    background-color: #FFFFFF;
    position: relative;
}

/* Title styling */
h1 {
    margin-bottom: 1rem;
}

p {
    font-size: 2rem; 
}

span {
    color: #FF0000;
    font-size: 2rem; 
}

mark {
    background-color: #FFFF00; /* Or any other color, e.g., #FFFF00 for yellow */
    color: black; /* Optional: change text color */
}

.element-bar {
    border-radius: 10px;
    margin-right: 10px;
    vertical-align:text-bottom;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

/* Header styling */
.myheader {
    background-color: #FFFFFF;
    padding: 3px;
}

/* General container styling */
.container {
    flex: 1; /* Allows the container to grow and push the footer down */
    padding: 0.2rem;
}

/* Four Pillars of Destiny the main screen */
.main-div {
    /*background-blend-mode: darken; /* Blend mode for lighter effect */
    background-color: #FFFFFF;
    /*background-color: rgb(232, 230, 231);*/
}

.div-with-top-border {
    border:10px solid rgb(33, 42, 55);
    border-top-width: thick;
    border-left-width: thick;
    border-right-width: thick;
    border-bottom-width: 0;
    /*border-radius: 0.5rem;*/
    margin: 0.5rem;
    box-sizing: border-box;
}

.div-with-bottom-border {
    border: 3px solid rgb(33, 42, 55);
    border-top-width: 0;
    border-left-width: thick;
    border-right-width: thick;
    border-bottom-width: thick;
    /*border-radius: 0.5rem;*/
    margin: 0.5rem;
    box-sizing: border-box;
}

/* Pillar box styling */
.pillar {
    flex: 1 1 22%; /* Flex-grow, flex-shrink, and flex-basis */
    min-width: 130px; /* Minimum width for each pillar */
    max-width: 22%; /* Ensure each pillar doesn’t exceed this width */
    /*padding: 0.5rem;*/
    margin: 0.5rem;
    /*border: 1px solid #ddd;*/
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #c8c8c8;
    text-align: center;
    background-color: rgb(33, 42, 55);
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Pillar box styling */
.pillar_sm {
    flex: 1 1 12%; /* Flex-grow, flex-shrink, and flex-basis */
    min-width: 45px; /* Minimum width for each pillar */
    max-width: 10%; /* Ensure each pillar doesn’t exceed this width */
    text-align: center;
    margin: 0.3rem;
    padding: 0.1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #c8c8c8;
    background-color:#657382
    /*border: 1px solid #ddd;
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Pillar box styling */
.pillar-nobackground {
    flex: 1 1 22%; /* Flex-grow, flex-shrink, and flex-basis */
    min-width: 130px; /* Minimum width for each pillar */
    max-width: 22%; /* Ensure each pillar doesn’t exceed this width */
    /*padding: 0.5rem;*/
    margin: 0.5rem;
    /*border: 1px solid #ddd;*/
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #c8c8c8;
    text-align: center;
    background-color: none;
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  flex-direction: column;
}

/* Pillar box styling */
.hiddenzhipillar {
    flex: 1 1 22%; /* Flex-grow, flex-shrink, and flex-basis */
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 130px; /* Minimum width for each pillar */
    max-width: 22%; /* Ensure each pillar doesn’t exceed this width */
    /*padding: 0.5rem;*/
    margin: 0.5rem;
    /*border: 1px solid #ddd;*/
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #c8c8c8;
    text-align: center;
    background-color: rgb(33, 42, 55);
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Pillar box styling */
.luckpillar {
    flex: 1 1 22%; /* Flex-grow, flex-shrink, and flex-basis */
    min-width: 130px; /* Minimum width for each pillar */
    max-width: 22%; /* Ensure each pillar doesn’t exceed this width */
    /*padding: 0.5rem;*/
    /*margin: 0.5rem;*/
    border: 2px solid #000000;
    /*border-radius: 0.5rem;*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #c8c8c8;
    text-align: center;
    background-color: rgb(33, 42, 55);
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Pillar box styling */
.starbox {
    flex: 1 1 88%; /* Flex-grow, flex-shrink, and flex-basis */
    /*min-width: 130px; /* Minimum width for each pillar */
    max-width: 88%; /* Ensure each pillar doesn’t exceed this width */
    text-align: left;
    padding: 2.5rem;
    margin: 2.5rem;
    /*font-family: "Times New Roman", Times, serif;
    /*border: 2px solid #000000;
    /*border-radius: 0.5rem;*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    /*color: #c8c8c8;
    /*background-color: rgb(33, 42, 55);
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Footer */
.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer-text {
    text-align: center;
    font-size: 2rem; /* Smaller font size for the text */
}

footer {
    background-color: #FFFFFF;
    text-align: center;
    padding: 1rem;
    margin-top: auto; /* Pushes footer to the bottom */
}