/* animations */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

body {
    background-color: #1A1A1A;
    margin: 0;
    background-image: url("../img/stars_background.jpg");
    background-size: 100% auto;
    background-repeat: repeat-y;
    height: 100vh;

}

.customSettings {
    display: block;
    align-content: center;
    text-align: center;
    color: whitesmoke;
    border-bottom: whitesmoke 1px solid;
    padding: 3px 0px;
    background-color: rgba(0, 0, 0, 0.8);
}

.customSettings .customChoiceOption {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: medium;
    margin: auto;
    padding: 4px 7px;
}


.customSettings .customChoiceOption:hover {
    background-color: rgba(255,255,255, 0.8);
    color: black;
}

.customSettings > form {
    margin: 2px 0px 5px 0px;
}

.customSettings > form .resetBtn {
    background-color: whitesmoke;
    margin: auto;
    padding: 3px 5px;
    border: 1px solid rgba(0, 0, 0, 0);

}

.customSettings > form .resetBtn:hover {
    background-color: darkgray;
    border: 1px solid rgba(0, 0, 0, 0);
}

.customSettings > form .resetBtn:active {
    background-color: #2f2f2f;
    color: whitesmoke;
    border: 1px solid white;
}


#jsCheck { /* Hidden by default, visible only if JS disabled */
    color: whitesmoke;
    text-align: center;
    font-family: Calibri, sans-serif;
}

#basic_info { grid-area: basic_info; }
#base { grid-area: base; }
#location { grid-area: location; }
#trivia { grid-area: trivia; }
#encounters { grid-area: encounters; }
#crew { grid-area: crew; }
#rooms { grid-area: rooms; }
#issues { grid-area: issues; }
#items { grid-area: items;}
#damage { grid-area: damage; }
#malfunctions { grid-area: malfunctions; }

.grid_container {
    display: none; /* switched to grid by JS, hidden only when JS turned OFF */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    '. basic_info basic_info .'
    'base base location location'
    'trivia trivia encounters encounters'
    'crew crew rooms rooms'
    'issues issues items items'
    'damage damage malfunctions malfunctions';
    margin: 20px 20% 20px 20%;
    gap: 20px;
    font-family: Arial, sans-serif;
    text-align: left;
}

.grid_container > div {
    background-color: #333333;
    color: whitesmoke;
    padding-top: 10px;

}

 .grid_container > div.item {
    background-color: rgba(96, 96, 96, 0.3);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
    border: 1px dashed whitesmoke;
}

.grid_container > div.item table {
    width: 100%;
    animation-name: fadeIn;
    animation-duration: 4s;
    animation-fill-mode: both;
}

.grid_container .no_table {
    display: block;
    animation-name: fadeIn;
    animation-duration: 4s;
    animation-fill-mode: both;
    text-align: center;
    padding-bottom: 10px;
}

.grid_container > div > table .column1 {
    width: 30%;
}

.grid_container > div > table tr:nth-child(even) {
    background-color: rgba(100, 100, 100, 0.3);
}

.grid_container > div > table th {
    border-bottom-style: solid;
    border-color: whitesmoke;
    border-width: 1px;
    font-size: larger;
    padding-bottom: 10px;
    text-align: center;
}

@media screen and (max-width:1600px) {
    .grid_container {
        margin: 20px 15% 20px 15%;
    }
}

@media screen and (max-width:1400px) {
    .grid_container {
        margin: 20px 15% 20px 15%;
    }
}

@media screen and (max-width:1200px) {
    .grid_container {
        margin: 20px 5% 20px 5%;
    }
}

@media screen and (max-width:992px) {
    .grid_container {
        margin: 20px 2% 20px 2%;
    }
}

@media screen and (max-width:768px){
    .grid_container {
        grid-template-columns: auto;
        grid-template-areas:
        'basic_info'
        'base'
        'location'
        'trivia'
        'encounters'
        'crew'
        'rooms'
        'issues'
        'items'
        'damage'
        'malfunctions';
    }
}

@media screen and (max-width:600px){
    .grid_container {
        margin: 20px 2% 20px 2%;
        grid-template-columns: auto;
        grid-template-areas:
        'basic_info'
        'base'
        'location'
        'trivia'
        'encounters'
        'crew'
        'rooms'
        'issues'
        'items'
        'damage'
        'malfunctions';
    }
}