@import url(https://fonts.googleapis.com/css?family=Marck+Script);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Roboto);


/* Apply box-sizing to all elements */
* {
    box-sizing: border-box;
  }

p {
    font-family: 'Roboto';
}
  
  /* Also apply it to the before and after pseudo-elements */
  *::before,
  *::after {
    box-sizing: inherit;
  }


#pdf-content {
    display: none;
} 

.description {
    display: none;
}

.general {
    grid-area: general;
    /* border-width: 3px;
    border-style: solid;
    padding: 10px; */
}


#char-name {
    outline:#4D3F37;
    font-size: 15px;
    width: 100%;
    line-height: 25px;
    border-radius: 5px;
    border: 1px solid #4D3F37 ;
    background: transparent;
    padding: 5px;

}

#char-name:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}

.char-name {
    grid-area: char-name;
}

.input-label {
    color: #1A1512;
    font-family: 'Roboto';
}



.char-img {
    grid-area: char-img;
    align-content: end;
}

#char-img {
    display: none;
}

.img-label {
    font-family: 'Roboto';
    display: inline-block;
    text-transform: uppercase;
    color: #F9E8DE;
    background: #4D3F37;
    text-align: center;
    padding: 10px 5px;
    font-size: 15px;
    user-select: none;
    cursor: poRoboto;
    border-radius: 10px;
    width: 100%;
    height: 37px;
}

.img-label:hover {
    background: #CC5803;
    opacity: 90%;
}

.img-label:active {
    transform: scale(0.9);
    background: #CC5803;
}

/* .img-label::after {
    background: #4D3F37;
} */

.race {
    grid-area: race;

}


#race {
    height: 37px;
    background: transparent;
    font-family: 'Roboto';
    font-size: 15px;
    align-self: flex-end;
    width: 100%;
    border-radius: 5px;
    border-color: #4D3F37;
}

#race:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}

.class {
    grid-area: class;

}

#class {
    height: 37px;
    background: transparent;
    font-family: 'Roboto';
    font-size: 15px;
    align-self: flex-end;
    width: 100%;
    border-radius: 5px;
    border-color: #4D3F37;
}

#class:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}

.weapon-select, .armor-select {
    height: 37px;
    background: transparent;
    font-family: 'Roboto';
    font-size: 15px;
    align-self: flex-end;
    width: 100%;
    border-radius: 5px;
    border-color: #4D3F37;
    margin-bottom: 10px;
}

select:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}


#char-story {
    font-family: 'Roboto';
    width: 100%;  /* Full width */
    height: 130px;  /* Fixed height */
    font-size: 15px;
    box-sizing: border-box;  /* Ensures padding doesn’t affect width */
    resize: none;
    border-radius: 5px;
    border: 1px solid #4D3F37 ;
    background: transparent;
    padding: 5px;
    margin-bottom: -5px;
}
#char-story:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}

.char-story {
    grid-area: char-story;
}

.input-story-label {
    color: #1A1512;
    font-family: 'Roboto';
}


#health {
    grid-area: health;
    margin-top: 5px;
}

#armor {
    grid-area: armor;
    margin-top: 5px;
}

#save-pdf {
    grid-area: save-pdf;

    display: inline-block;
    text-transform: uppercase;
    color: #F9E8DE;
    background: #CC5803;
    text-align: center;
    padding: 10px 5px;
    font-size: 15px;
    user-select: none;
    cursor: poRoboto;
    border-radius: 10px;
    width: 100%;
    height: 37px;
    border-style: none;
    font-family: 'Roboto';

}

#save-pdf:hover {
    opacity: 90%;
}

#save-pdf:active {
    transform: scale(0.9);
}



.general-container {
    display: grid;
    grid-template-areas:
    "char-name race class char-img"
    "char-story char-story char-story  health "
    "char-story char-story char-story  armor ";
    row-gap: 5px;
    column-gap: 5px;

}

/* .general-container {
    display: grid;
    grid-template-areas:
    "char-name  char-img . "
    "char-story  race health"
    "char-story  class armor";
    row-gap: 5px;
    column-gap: 5px;

} */



.abilities {
    grid-area: abilities;
    /* border-style: solid;
    border-width: 3px;
    border-color: red; */


}

.ab-header, .stat-header{
    margin-top: 0px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    font-family: "Roboto";
}

.ab-header {
    margin-top: 15px;
    margin-bottom: 0px;
}

.ab-value, .stat-value{
    font-size: 25px;
    font-family: "Roboto";
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}



.weapons {
    grid-area: weapons;
    width: auto;
    font-family: "Roboto";
    font-size: 16px;
}

.attack-bonus {
    font-family: "Oswald";
    font-size: 18px;
    margin: 0px;
}



.inventory {
    grid-area: inventory;
    font-family: "Roboto";
    font-size: 16px;
}

.specials {
    grid-area: specials;
    font-family: "Roboto";
    font-size: 16px;
}

.magic {
    grid-area: magic;
    font-family: "Roboto";
    font-size: 16px;
}

.armor {
    grid-area: armor;
    font-family: "Roboto";
    font-size: 16px;
}

.specials h4, .weapons h4, .inventory h4, .magic h4, .armor h4{
    font-family: "Oswald";
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
}

.specials p, .weapons p, .inventory p, .magic p, .armor p {
    font-family: "Roboto";
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ab-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

}

.ability {
    justify-content: center;
    width: 160px;
    display: grid;
    grid-template-areas: 
    "ab-header ab-header"
    "ab-value ab-value"
    "ab-value ab-value"
    "add substract"
    "saving-throw saving-throw";

}




.ab-header {
    grid-area: ab-header;
}

.ab-value {
    grid-area: ab-value;
}

.add {
    grid-area: add ;
}

.substract {
    grid-area: substract;
}

.add,.substract {
    background-color: #4D3F37;
    color: #F9E8DE;
    width: 50px;
    margin: 5px;
    border-radius: 3px;
    border: none;
    justify-self: center;
}

.add:hover, .substract:hover{
    opacity: 90%;
    background: #CC5803;
}
.add,.substract:focus {
    outline-color: #CC5803;
}   

.add:active,.substract:active{
    box-shadow: 0 1px 5px rgb(0 0 0 / 0.2);
    transform: scale(0.98);
    background-color: #CC5803;
}

.add:disabled, .substract:disabled{
    opacity: 40%;
    background: #4D3F37;
    
}



.saving-throw {
    grid-area: saving-throw;
    height: 20px;
    font-size: 15px;
    margin-bottom: 0px;
    font-family: "Roboto";
    text-align: center;
}

/* .builder {
    display: grid;
    grid-template-areas:
    "general  general"
    "abilities  abilities"
    "specials  weapons "
    "magic  inventory "
    ". armor"
    "save-pdf save-pdf ";
    row-gap: 10px;
    column-gap: 10px;
    grid-template-columns: 1fr 1fr;
} */

.builder {
    display: grid;
    grid-template-areas:
    "general general"
    "abilities abilities"
    "specials  weapons"
    "inventory   armor"
    "magic magic"
    "save-pdf save-pdf";
    row-gap: 10px;
    column-gap: 10px;
    grid-template-columns: 1fr 1fr;
}


main {
    background-color: #F9E8DE;
    padding: 10px;
}

body {
    background-color: #F9E8DE;
}

.navbar {
    background-color: #4D3F37;
    font-family: 'Oswald';
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;

}

.logo-image {
    display: inline-block;
    margin: 15px;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.navbar-list li {
    list-style: none;
    display: inline-block;
}

.navbar-list a {
    color: #F9E8DE;
    text-decoration: none;
    font-size: 18px;
    margin-right: 25px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    border-radius: 3px;

}

.logo a {
    text-decoration: none;
}

.navbar-list a.active, .navbar-list a:hover {
    background: #F9E8DE;
    color: #4D3F37;
    transition: .5s;

}

.font-weight-bold {
    font-weight: 900;
    color: #CC5803;

}

.menubtn {
    line-height: 80px;
    margin-right: 10px;
    cursor: poRoboto;
    display: none;

}

#dragon-select {
    display: inline;
    outline:#4D3F37;
    font-size: 15px;
    width: 100%;
    line-height: 25px;
    border-radius: 5px;
    border: 1px solid #4D3F37 ;
    background: transparent;
    padding: 5px;

}

#dragon-select:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #CC5803;
}


@media (max-width:1200px) {
    .navbar-list a {
        font-size: 15px;
        margin-right: 15px;
        text-transform: uppercase;
        border-radius: 3px;
    
    }

}


@media (max-width:874px) {
    .menubtn {
        display: block;
    }
    .navbar-list{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #4D3F37;
        top: 80px;
        left:-100%;
        text-align: center;
        transition: all .5s;

    }
    .navbar-list li {
        display: block;

    }
    .navbar-list li a {
        display: block;
        font-size: 20px;

    }
    #menu-check:checked ~ .navbar-list {
        left: 0;
    }

    

}

h1 {
    font-size: 35px;
    font-weight: 600;
    color: #F9E8DE;
    font-family: "Marck Script";
}

.section-header{
    font-family: "Oswald";
    color: #1A1512;
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
}


/* Страница-картчока для экспорта */

.page {
    padding: 15px;
    margin-bottom: 0px;
    background-color: white;
    background-image: url(img/background.jpg);
    font-family:'Oswald';
    width: 1750px;
    height: 1240px;
}

.page h4 {
    font-family: "Oswald";
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: normal;

}

.page p {
    font-family: "Roboto";
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
}


.page-header {
    grid-area: page-header;

}

.page-header h2 {
    font-family: 'Marck Script';
    font-size: 60px;
    text-align: center;
    margin: 20px;
    font-weight: normal;
}


#first-page {
    display: grid;
    grid-template-areas:
    "page-header page-header"
    "stats-container-page stats-container-page"
    "specials-container-page weapons-container-page"
    "specials-container-page inventory-container-page"
    "page-footer page-footer";
    grid-template-rows: 100px 300px auto auto 15px;
    grid-template-columns: 2fr 1fr;
    gap: 10px 20px;
    height: 1240px;


}

#first-page select {
    display: none;

}

.stats-container-page {
    grid-area: stats-container-page;
    display: grid;
    grid-template-areas: "abilities-page health-and-armor ";
    grid-template-columns: 2fr 1fr;
    gap: 10px 20px;
}


.text-container-page {
    padding: 10px;
    border: solid;
    border-width: 5px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px); /* The amount of blur in pixels */
    background-color: rgba(255, 255, 255, 0.083); /* Optional: a semi-transparent background to enhance the blur effect */
}

.container-page-header {
    font-family: "Oswald";
    font-size: 30px;
    margin-bottom: 5px;
    margin-top: 5px;

}

.specials-container-page {
    grid-area: specials-container-page;

}

#specials-page {
    display: grid;
}

.magic-container-page {
    grid-area: magic-container-page;
}

.charms-container-page {
    grid-area: charms-container-page;
}

.weapons-container-page {
    grid-area: weapons-container-page;
}

.inventory-container-page {
    grid-area: inventory-container-page;
}

.ab-container-page {
    grid-area: abilities-page;
    display: flex;
    flex-direction: row;
}

.health-and-armor-container-page {
    grid-area: health-and-armor;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.element-header-page {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 5px;
    grid-area: element-header-page;
}

.element-container-page {
    display: grid;
    grid-template-areas:
    "element-header-page"
    "element-value-page"
    "saving-throw-page"
    "skill-list";
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 5px;
    row-gap: 0px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px); /* The amount of blur in pixels */
    background-color: rgba(255, 255, 255, 0.083); /* Optional: a semi-transparent background to enhance the blur effect */
    border-radius: 5px;
}

.other-element-container-page {
    display: grid;
    grid-template-areas:
    "element-header-page"
    "element-value-page";
    height: 180px;
    align-items: center;
    text-align: center;
    margin: 5px;
    row-gap: 0px;
}

.element-value-page {
    grid-area: element-value-page;
    background-image: url(img/award.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 150px;
    width: 150px;
    position:relative;
    place-self: center;
    line-height: 160px;
    font-size: 45px;
    color: rgb(0, 0, 0);

}

.saving-throw-page {
    grid-area: saving-throw-page;
    height: 20px;
    font-size: 15px;
    margin-bottom: 0px;
    font-family: "Oswald";
    text-align: center;
}

.skill-list {
    grid-area: skill-list;
    list-style-type: none;
    margin-left: 0px;
    margin-right: 0px;
    padding-inline-start: 0px;
    /* border: 5px;
    border-style: solid;
    border-color: brown; */
    margin-top: 5px;
    margin-bottom: 5px;
    height: 85px;
    font-family: "Roboto";
    font-size: 14px;
    text-align: center;
    justify-content: center;
}

#arm-value {
    background-image: url(img/shield.png);
    line-height: 145px;
    color: white;  
}

#initiative-value {
    background-image: url(img/award.png);
    line-height: 160px;
    color: rgb(0, 0, 0);  
}

#hits-value {
    background-image: url(img/like.png);
    line-height: 145px;
    color: white;
}

#cur-hits-value {
    background-image: url(img/like2.png);
}

/* Second page */
/* Second page */
#second-page {
    display: grid;
    grid-template-areas:
        "image description";
    grid-template-columns: 1fr 1fr;
    height: 1240px;
}

.image-container {
    grid-area: image;
    display: flex; /* Используем flexbox для центрирования */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    height: 100%; /* Заполняем всю высоту контейнера */
    overflow: hidden; /* Скрываем лишнюю часть изображения */
}

#image-on-page {
    width: auto; /* Автоматическая ширина */
    height: 100%; /* Высота 100% контейнера */
    max-width: none; /* Убираем ограничение по ширине */
    object-fit: cover; /* Обрезаем изображение, сохраняя пропорции */
}

#description-on-page {
    grid-area: description;
    font-size: 20px;
    padding: 10px; /* Добавляем немного отступов для текста */
}


#magic-page {
    display: grid;
    grid-template-areas:
    "magic-container-page"
    "notes";
    row-gap: 10px;
    grid-template-rows: 1fr 6fr;
}


#notes {
    grid-area: notes;
}

.page-footer {
    grid-area: page-footer;
    font-family: 'Roboto';
    font-size: 15px;
    color: #4D3F37;
    text-align: center;
    height: 15px ;
    margin: 0px;
}

footer {
    background-color: #4D3F37;
    font-family: 'Roboto';
    padding: 15px;
    align-items: center;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -30px;
    margin-top: 20px;
    color: #F9E8DE;

}

.footer-list li {
    list-style: none;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;

}

.footer-list {
    font-family: "Roboto";
    text-align: center;
    padding:0px;
    justify-content: space-around;
    
}

.footer-list a {
    color: #F9E8DE;
    text-decoration: none;
}

.footer-list a:hover {
    color: #CC5803;
    text-decoration: none;
}

.copyright {
    font-family: "Roboto";
    text-align: center;

}

.copyright a{
    color: #CC5803;
}

/* Адаптивная верстка */

@media (max-width: 768px) {
    .builder {
      grid-template-columns: 1fr;
      grid-template-areas:
      "general"
      "abilities"
      "specials"
      "magic"
      "weapons"
      "armor"
      "inventory"
      "save-pdf";
    }
  }

@media (max-width: 874px) {
    .abilities {
        display: flex;
        flex-direction: column;

    }
  }

@media (max-width: 874px) {
    .general-container {
        display: grid;
        grid-template-areas:
        "char-name char-name"
        "char-img char-img"
        "race class"
        "char-story char-story"
        "health armor";
        grid-template-columns: 1fr 1fr;

}}


/* Masters page */
.faq {
    margin: 20px 0;
}

.faq-item {
    margin: 10px 0;
}

.faq-question {
    background-color: #4D3F37;
    color: #F9E8DE;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    font-size: 20px;
    font-family: "Oswald";
}

.faq-answer {
    display: none; /* Скрываем ответ по умолчанию */
    padding: 10px;
    background-color: #F9E8DE;
    border: 1px solid #4D3F37;
    border-radius: 10px;
    margin-top: 5px;
    color: #1A1512;

}

.faq h2, .gallery h2 {
    font-family: "Oswald";
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;

}


.gallery {
    padding: 20px;
    text-align: center;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.character-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    width: 250px; /* или 100% для мобильной версии */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.character-card:hover {
    transform: scale(1.05);
}

.character-image {
    width: 100%;
    height: auto; /* Обеспечивает адаптивность изображения */
}

.character-name {
    font-family: 'Oswald';
    font-size: 1.2em;
    margin: 10px 0;
}

.character-race,
.character-class,
.character-story {
    font-size: 0.9em;
    margin: 5px 0;
}

.download-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #CC5803;
    color: #F9E8DE;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Roboto';
}

.download-button:hover {
    background-color: #cc5703d4;
}

@media (max-width: 600px) {
    .character-card {
        width: 100%; /* Полная ширина на мобильных устройствах */
    }
}