body {
    background-image: url('assets/Neon.gif');
    background-size: cover;
    background-repeat: no-repeat;
}

button {
    width: 220px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(91, 72, 87);
    color: white;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #b2a9b8;
}

.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.main-text{
    font-size: 50px;
    color: white;
    font-family: 'Audiowide';
}

.characters{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    transition: all 0.3s ease; 
    position: relative;
    justify-content: center;
}

.character-card{
    width: 250px;
    height: 360px;
    border-radius: 10px;
    background-color: rgb(0, 0, 0);
    color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.character-card:hover {
    box-shadow: 0 0 15px 5px rgb(91, 72, 87);
    transform: scale(1.05);
    cursor: pointer;
}

.character-card img{
    width: 250px;
    height: 320px;
    border-radius: 10px;
}

.character-name{
    text-align: center;
    margin: 5px;
    font-family: 'Iceberg';
}

.menu{
    display: none;
    width: 250px;
    height: 50px;
    margin-left: 25px;
    font-family: 'Iceberg';
}

.character-card.collapsed{
    margin-top: 20px;
    z-index: 1;
}

.active-card {
    z-index: 10;
    transform: translateX(0);
}

.name{
    font-size: 30px;
    color: white;
    margin-top: 40px;
    text-align: center;
    font-family: 'Audiowide';
}

input{
    width: 280px;
    height: 35px;
    border-radius: 18px;
    background-color: rgba(37, 35, 35, 0.751);
    color: white;
    border: rgb(148, 147, 147) 1px solid;
    margin: 20px;
    margin-left: 85px;
    font-family: 'Iceberg';
    font-size: 20px;
    letter-spacing: 5px;
}

input[type="text"] {
    padding-left: 15px;
}

.conversaition{
    margin-left: 250px;
    width: 1000px;
    height: 750px;
}

.dialog1, .dialog2, .dialog3, .dialog4, .dialog5{
    display: flex;
    flex-direction: row;
    margin-left: 25px;
    gap: 70px;
}

.dialog1 img, .dialog3 img{
    width: 130px;
    height: 130px;
    border-radius: 80px;
}

.dialog1 div, .dialog2 div, .dialog3 div,
.dialog4 div, .dialog5 div{
    width: 730px;
    height: 60px;
    background-color: #b2a9b8;
    border-radius: 25px;
    font-family: 'Forum';
    font-size: 28px;
    justify-content: center;
    padding: 15px 10px;
    margin-top: 30px;
}

.conversaition button{
    margin-left: 400px;
}

.setting-panel {
    display: flex;
    flex-direction: row;
    width: 1400px;
    height: 20px;
    justify-content: end;
    gap: 10px;
}

.setting img{
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 5px;
}

.profile img{
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.fight img{
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.profile, .setting, .fight {
    width: 40px;
    height: 30px;
    background-color: rgba(37, 35, 35, 0.356);
    border: rgb(148, 147, 147) 1px solid;
    border-radius: 15px;
}

.battle-field {
    width: 1520px;
    height: 520px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}

.battle-menu {
    width: 420px;
    height: 520px;
}

.battle-instruction{
    width: 350px;
    height: 100px;
    background-color: rgba(37, 35, 35, 0.751);
    border-radius: 10px;
    color: rgb(150, 156, 161);
    font-family: 'Iceberg';
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 15px;
    padding: 15px;
    margin-left: 25px;
}

.selection {
    width: 350px;
    height: 300px;
    background-color: rgba(109, 88, 88, 0.225);
    border: rgb(175, 172, 172) 1px solid;
    border-radius: 10px; 
    margin-top: 15px;
    padding: 15px;
    margin-left: 25px;
    display: flex;
    flex-direction: row;
    gap: 35px;   
}

.attack-choice, .defence-choice {
    margin-bottom: 15px;
}
.attack p, .defence p{
    font-size: 24px;
    color: white;
    font-family: 'Forum';
    margin-left: 15px;
}
label {
    margin-left: 10px;
    font-size: 18px;
}
input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"] + label, input[type="checkbox"] + label {
    padding: 5px 10px;
    border: 1px solid rgba(65, 53, 53, 0.225);
    border-radius: 5px;
    background-color: rgba(208, 167, 167, 0.225);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Forum';
    margin-left: 15px;
}
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
    background-color: rgba(182, 167, 167, 0.225);
    border: 1px solid rgba(168, 210, 221, 0.956);
    color: white;
    font-family: 'Forum';
}

.attack-button {
    margin-top: 130px;
}

.hero {
    width: 550px;
    height: 520px;
    display: flex;
}

.enemy {
    width: 550px;
    height: 520px;
    display: flex;
    justify-content: end;
}

.enemy img{
    width: 320px;
    height: 390px;
    border-radius: 30px;
    margin-right: 30px;
    margin-top: 45px;
}
.hero p {
    font-family: 'Audiowide';
    font-size: 35px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    text-shadow: 
        -1px -1px 0 #ff1616,  
        1px -1px 0 #ff1616,
        -1px 1px 0 #ff1616,
        1px 1px 0 #ff1616;
}

.enemy p {
    font-family: 'Audiowide';
    font-size: 35px;
    color: rgb(0, 0, 0);
    padding-left: 25px;
    padding-right: 15px;
        text-shadow: 
        -1px -1px 0 #ff1616,  
        1px -1px 0 #ff1616,
        -1px 1px 0 #ff1616,
        1px 1px 0 #ff1616;
}

.logs {
    margin-top: 20px;
    width: 1520px;
    height: 220px;
    border: #2e2a2a 1px solid;
    border-radius: 10px;
    background: rgba(72, 67, 67, 0.437);
    overflow-y: auto;
}

.hero-hp-container, .enemy-hp-container {
    border: #dfcaca66 1px solid;
    background: rgba(72, 67, 67, 0.437);
    width: 320px;
    height: 20px;
    margin-top: -50px;
    border-radius: 10px;
}

.enemy-hp-container {
    margin-left: 200px;
}
.hero-hp-container {
    margin-left: 30px;
}

.hero-hp{
    width: 320px;
    height: 20px;
    border-radius: 10px;
    background-color: #3279f3;
}
.enemy-hp{
    width: 320px;
    height: 20px;
    border-radius: 10px;
    background-color: #f33232;
}

.hero-hp-numbers, .enemy-hp-numbers {
    font-family: 'Forum';
    color: white;
    font-size: 18px;
    margin-top: 10px;
}

.hero-hp-numbers {
   margin-left: 140px; 
}
.enemy-hp-numbers {
   margin-left: 140px; 
}

.logs p {
    color: rgba(236, 220, 220, 0.925);
    font-family: 'Forum';
    font-size: 18px;
}

.message-popup {
    position: fixed;
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-family: 'Forum';
    font-size: 28px;
    padding-top: 180px;
    padding-left: 20px;
    border-radius: 10px;
    z-index: 1000;
}

.message-popup button {
    font-family: 'Forum';
    font-size: 20px;
}

.settings {
    width: 600px;
    height: 450px;
    background: rgba(0, 0, 0, 0.532);
    color: white;
    font-family: 'Forum';
    font-size: 28px;
    border-radius: 10px;
    position: fixed;
    left: 30%;
    top: 10%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.change-nameText, .resetProgress-text {
    margin-left: 50px;
    margin-top: 20px;
}

.resetProgress-text{
    margin-bottom: 20px;
}

.change-name, .resetProgress{
    border: #b2a9b8 1px solid;
    border-radius: 10px;
}

.resetProgress h3{
    margin-left: 15px;
}

.resetProgress button, .change-name button{
    margin-bottom: 15px;
    margin-left: 350px;
}

.profile-main {
    margin-top: 20px;
    margin-left: 60px;
    height: 750px;
    display: flex;
    gap: 50px;
}

.user-profile {
    width: 440px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.532);
    border: #b2a9b8ae 1px solid;
}

.user-profile img{
    box-shadow: 0 0 15px 5px rgba(155, 174, 196, 0.345);
}

.user-profile p{
    font-family: 'Audiowide';
    font-style: italic;
    text-align: center;
    font-size: 45px;
    color: white;
    text-shadow: 
        -1px -1px 0 #ff1616,  
        1px -1px 0 #ff1616,
        -1px 1px 0 #ff1616,
        1px 1px 0 #ff1616;
}

.user-profile p:nth-of-type(2), .user-profile p:nth-of-type(3) {
    font-family: 'Forum';
    font-style: normal;
    text-align: center;
    font-size: 25px;
    color: rgb(255, 255, 255);
    text-shadow: none;
}

.allCaracters {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.532);
    border: #b2a9b8ae 1px solid;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    background: rgba(0, 0, 0, 0.532);
    border-radius: 8px 8px 0 0;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    margin-right: 2px;
    transition: background-color 0.3s;
    font-family: 'Forum';
    font-size: 20px;
}

.tab-btn.active {
    background: rgba(0, 0, 0, 0.532);
    border: 1px solid #cccccc9c;
    border-bottom: none;
}

.tab-btn:hover {
    background: rgba(0, 0, 0, 0.532);
}

.tab-content {
    border: 1px solid #cccccc9c;
    border-top: none;
    padding: 15px;
    background: rgba(0, 0, 0, 0.532);
    height: 678px;
    width: 900px;
    border-radius: 10px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.allProtagonists, .allAntagonists {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.protagonist1, .protagonist2, .protagonist3,
.protagonist4, .protagonist5, .antagonist1,
.antagonist2, .antagonist3, .antagonist4, .antagonist5 {
    width: 900px;
    height: 100px;
    background: rgba(0, 0, 0, 0.532);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.protagonist1 img, .protagonist2 img, .protagonist3 img,
.protagonist4 img, .protagonist5 img, .antagonist1 img,
.antagonist2 img, .antagonist3 img, .antagonist4 img, .antagonist5 img {
    width: 90px;
    height: 100px;
    border-radius: 10px;
}

.protagonist1-text, .protagonist2-text, .protagonist3-text,
.protagonist4-text, .protagonist5-text, .antagonist1-text, .antagonist2-text, .antagonist3-text,
.antagonist4-text, .antagonist5-text, .select {
    color: #ffffff;
    font-family: 'Forum';
    margin-top: 25px;
}

.select {
    cursor: pointer;
    padding: 5px;
    transition: background-color 0.3s;
}
.select:hover {
    background-color: #b8c1cb84;
}