:root {
    --main-border: #544032; 
    --text-light: #7a5a42; 
    --link-color: #544032;
    --subtitle: #de8692;
    --main-bg: #fac9cc;
    --secondary-bg: #eed5b1;
    --heading: #de8692;
    --highlight: #ffaabc;
    --header-bg: #eed5b1;
  }
  @font-face {
    font-family: "main";
    src: url('./fonts/ongleip2.ttf');
}


@font-face {
    font-family: "MS Gothic";
    src: url('./fonts/MSGothic.ttf')
}



hr {
    color: var(--main-border);
    border-top: dashed 2px var(--main-border);

}
body {
    margin: 0;
    background-image: url("img/bg.png");
    background-repeat:repeat;
    /*background-color: #6d6197;*/
    font-family: "main";
    background-size: 200px;
    color: var(--main-border);
    font-size: larger;
   
}


.marker{
    
    background:var(--highlight);
    background:-webkit-linear-gradient(rgba(243,208,208,0) 50%, var(--highlight) 0%);
    background:linear-gradient(rgba(243,208,208,0) 50%, var(--highlight) 0%)
    }

* {
    box-sizing: border-box;
}

.img_frame {
    border: dashed 2px var(--main-border);

}

#container {
    max-width: 80%;
    padding: 50px;
    margin: 0px auto;
    
    
}



#container a {
   
    font-weight: bold;
    color:var(--link-color);
   
}

#header {
    width: 100%;
    
    
    height: 150px;
  
    
    background-size: 100%;
}


#navbar {
    height: 40px;
    background-color: var(--main-bg);
    border: dashed 2px var(--main-border);
    width: 100%;
    padding-bottom: 40px;
    box-shadow:0 0 0 5px var(--header-bg);
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}


#navbar li a {
    color: var(--link-color);
    font-weight: 800;
    text-decoration: none;
    
}

#navbar li a:hover {
    color: var(--text-light);
    text-decoration: underline;
}

#flex {
    display: flex;

}

#iframe {
    width: 100%;
    height: 100%;

}

aside {
    background-color: var(--main-bg);
    width: 200px;
    padding: 20px;
    font-size: smaller;
   
}


main {
    background-color: var(--main-bg);
    flex: 1;
    padding: 20px;
    order: 2;
    
    border: dashed 2px var(--main-border);
    box-shadow:0 0 0 5px var(--header-bg);
    
}



footer {
    background-color: #2e2848;
     margin-top: 20PX;
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
   
}

#titlename {
    font-size: 3em;
    color: var(--heading);
    margin-bottom: -15px;
}

#subtitle {
    font-size: 1.5em;
    color:var(--subtitle);
}



h1 {
    color: var(--main-border);
    background:var(--main-bg);
    font-size: 3em;
    border: 2px dashed var(--main-border);
    box-shadow:0 0 0 5px var(--header-bg);
 
    text-align: center;
    padding:.3em;
   
}

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

#name{
    letter-spacing: 10px;
}


#credit{
    font-size: smaller;
    margin-bottom: 0px;
    text-align: center;
}

.box{
    background-color: var(--secondary-bg) ;
    padding:10px;
    padding-bottom:5px;
    margin: 0px;
    text-align: center;
}

.btn {
    background-color: var(--secondary-bg) ;
    border: 2px dashed var(--main-border);
    padding:1.5% 5% 1% 5%;
    margin:5px;
    color: var(--main-border)
    
}
.btn:hover {
    background-color: var(--secondary-bg) ;
    border: 2px dashed var(--text-light);
    padding:1.5% 5% 1% 5%;
    transform: scale(1.03);
    color: var(--text-light);
    transition: 0.2s ease;
    
}

@media (max-width: 576px) { 
    #container {
        max-width: 900px;
        padding: 20px;
        
        
    }
    #main_img {
        width: 200px;
    }
}

.image-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.character-card {
    text-align: center;
}


.character {

    width: 100%;
    display: block;

    cursor: pointer;

    border: 2px dashed transparent;

    transition: 0.2s ease;
}


.character:hover {
    transform: scale(1.03);
}


.character.active {
    border-color: var(--highlight);
}


.character-caption {
    margin-top: 8px;

    font-size: 16px;
    font-weight: 600;
}


.info-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


#character-image {
    width: 100%;
    max-width: 500px;
    height: auto;

    object-fit: cover;

    display: block;
}


#character-name {
    margin: 0;
}



#character-description {
    margin: 0;
}


.character-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    padding: 10px 15px;

    text-decoration: none;

    background: #333;
    color: white;

    border-radius: 8px;

    transition: 0.2s ease;
}


.character-link:hover {
    background: #555;
}

#char-title {
    margin-bottom: -10px;
}

#header-img {
    font-size:large;
    width:5%;
    margin-top: -2%;
}

#setup-subtitle {
    font-size: smaller;
    margin-bottom: 0px;
    text-align: center;
    font-style: italic;
    
}

#top-button {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--main-bg); /* Set a background color */
    border: dashed 2px var(--main-border);
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */

  }
  
  #top-button:hover {
    background-color: var(--header-bg); /* Add a dark-grey background on hover */
  }