/*
edit: this is the interior page
*/
body{

    background:rgba(0, 0, 0, 1.0) !important;
}


#logo {
    min-width: 50%;
    max-width: 50%;
}

.nw-width-100{
    width: 100%;
}


.nw-character-name {
    color:black;
    background-color: white;
}

.nw-character-role {
    color:black;
    background-color: white;
}

.nw-btn {
    padding:8px;
    margin:4px;
    background-color:rgba(50, 50, 50, 1.0) !important;

    border:white !important;
    text-shadow:0 0 0 !important;
    color:white !important;
    font-size:1.5em !important;

    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-align: center !important;
}

.nw-framed-image {
    border: 10px solid white; /* Thick white border */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Soft shadow for depth */
    display: block;
    margin: 20px auto; /* Centering */
    max-width: 100%; /* Ensuring responsiveness */
  }


.nw-image-container {
    width:100%;
    max-width: 100%;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically (if container has height) */
    /*height: 100vh; Full height of viewport */
    background-color: #f4f4f4; /* Light background for visibility */
}

/* Image styles */
.nw-image-container img {
    max-width: 80% !important; /* Ensures image never exceeds 80% of container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below inline images */
    border-radius: 10px; /* Optional: Adds rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds shadow */
}


.nw-character-img{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
}

.nw-character-text{
    color:black;
    background-color: white;
    min-height: 320px;
    max-height: 320px;
    height:320px;
    overflow-y: scroll;
}

@media only screen and (max-width: 500px) {
    #logo {
        min-width: 90%;
        max-width: 90%;
    }
}