@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@400;700&family=Monofett&display=swap');

:root {
    /* Fonts */
    --font-heading: "Monofett", monospace;
    --font-paragraph: "Dongle", sans-serif;

    /* Colour Palette */
    /* Primary Colour - Aqua */
    --primary-colour: #57ffcd;
    --primary-colour-pale: #C2FFED;
    /* Secondary Colour - Purple */
    --secondary-colour: blueviolet;
    /* Tertiary Colour - Off White (matches navbar) */
    --tertiary-colour: rgba(var(--bs-tertiary-bg-rgb));
    /* Quaternary Colour - Pink */
    --quaternary-colour: #DB0080;

    /* Not Used Colours - REMOVE once final colour pallette has been decided -------------- REMOVE LATER */
    --other-background: #3dd3b9;
    --aquamarine: aquamarine;
    --other-purple: #8853d3;
    --tertiary-colour-opaque: rgba(248, 249, 250, 0.9);
    /* ------------------------------------------------------------------------------------ REMOVE LATER */
}

/* Global Styles */

body {
    font-family: var(--font-paragraph);
    text-align: center;
    font-size: 2.5rem;
    background-color: var(--primary-colour);
    display: flex;
    flex-direction: column;
    /* min-height added so the footer always sticks to the bottom */
    min-height: 100vh;
}

h1 {
    font-family: var(--font-heading);
    padding: 15px 0;
    font-size: 6rem;
    color: var(--secondary-colour);
    padding: 0;
    margin: 0;
}

h2 {
    font-size: 4rem;
    margin: 0;
}

h3 {
    font-size: 3.5rem;
    margin: 0;
    line-height: 1;
}

p {
    margin: 0;
    line-height: 1;
}

input[type='radio'] {
    transform: scale(2.2);
    accent-color: var(--secondary-colour);
}

input[type='text'] {
    padding: 10px;
    color: var(--secondary-colour);
    border: 4px solid var(--secondary-colour);
    border-radius: 20px;
    background-color: var(--tertiary-colour);
}

.hidden {
    display: none;
}

.big-black-border {
    border: 5px solid black;
    border-radius: 20px;
}

.larger-font {
    font-size: 2.8rem;
}

/* Images */

.starter img {
    object-fit: cover;
    object-position: center;
    height: 250px;
}

#pokemon-collection img {
    object-fit: contain;
    object-position: center;
}

/* Go for a walk modal image */    
#walk-image > img {
    object-fit: cover;
    object-position: center;
    height: 570px;
}

/* Wild encounter modal image */
.wild-pokemon-image {
    object-fit: cover;
    object-position: center;
    height: 680px;
    /* 'width: 100%' needs adding to prevent images shifting to the right on small screens */
    width: 100%;
}

/* Header and Navbar */

#page-title span {
    color: var(--quaternary-colour);
}

nav p,
nav .nav-link {
    padding: 0 20px;
    color: var(--quaternary-colour);
    margin-top: 7px;
}

/* Buttons */

button {
    text-transform: capitalize;
    color: var(--secondary-colour);
    background-color: var(--primary-colour-pale);
    border: 4px solid var(--secondary-colour);
    border-radius: 20px;
    margin: 3px 0;
    padding: 7px 10px 3px 10px;
    line-height: 0.8;
}

button:hover {
    color: black;
}

.secondary-button,
.cancel-modal-button {
    color: var(--quaternary-colour);
    background-color: var(--primary-colour-pale);
    border: 4px solid var(--quaternary-colour);
}

#inventory-button.secondary-button {
    padding: 9px 10px 5px 10px;
    font-size: 2.2rem;
    color: var(--quaternary-colour);
    border: 4px solid var(--quaternary-colour);
}

#walk-button {
    font-size: 3rem;
    padding: 12px 10px 7px 10px;
    color: var(--secondary-colour);
    /* left shadow colour */
    text-shadow: -2px 0 var(--quaternary-colour);
    letter-spacing: 1px;
    border: 5px solid var(--quaternary-colour);
    border-bottom: 6px solid var(--secondary-colour);
    border-left: 6px solid var(--secondary-colour);
}

#walk-button:hover {
    color: var(--quaternary-colour);
    /* left shadow colour */
    text-shadow: -2px 0 var(--secondary-colour);
}

/* Interact Menu */
ul.dropdown-menu {
    background-color: var(--tertiary-colour);
    border: 4px solid var(--secondary-colour);
    border-radius: 18px;
    padding: 10px 0;
}

ul.dropdown-menu button {
    color: var(--secondary-colour);
}

ul.dropdown-menu button:hover {
    color: black;
    background-color: var(--primary-colour-pale);
}

.dropdown-item {
    margin-top: 6px;
    font-size: 2rem;
}

.dropdown-divider {
    margin: 2px 0;
}

.interact-button,
#inventory-button {
    background-color: var(--tertiary-colour);
}

.interaction {
    font-size: 2.5rem;
    color: black;
}

.interact-button {
    font-size: 2.5rem;
    color: var(--secondary-colour);
    border: 5px solid var(--quaternary-colour);
    border-bottom: 6px solid var(--secondary-colour);
    border-left: 6px solid var(--secondary-colour);
}

.interact-button {
    color: black;
    margin-bottom: 10px;
    padding: 12px 10px 7px 10px;
}

.interact-button:hover {
    color: black;
}

.interact-button:focus {
    background-color: var(--primary-colour-pale);
}

/* Arrow icon inside 'Interact' button */
.fa-chevron-down {
    font-size: 1.2rem;
    font-weight: bold;
}

#add-first-pokemon {
    color: black;
    font-size: 3.2rem;
    border: 5px solid var(--quaternary-colour);
    border-bottom: 6px solid var(--secondary-colour);
    border-left: 6px solid var(--secondary-colour);
}

#add-walk-items, #add-first-pokemon {
    padding: 8px 10px 3px 10px;
}

button#add-first-pokemon:hover {
    background-color: var(--tertiary-colour);
}

.secondary-button {
    border-radius: 20px;
}

.navbar button {
    margin: 0;
}

#refresh-personalities-main {
    display: none;
}

.rename-pokemon {
    color: var(--secondary-colour);
    border: 4px solid var(--secondary-colour)
}

/* Main - All Pokémon displays (used in both starter form and user collection) */

.details>p {
    color: var(--quaternary-colour);
}

.details>.level {
    font-size: 2.7rem;
}

p.small-details {
    color: var(--quaternary-colour);
    line-height: 0.7;
    padding-left: 10px;
}

.details span, .small-details span {
    color: var(--secondary-colour);
    font-size: 0.95em;
}

/* Main - Starter Form */

.form-container {
    margin: 20px 0;
    padding: 30px;
    border: 5px solid var(--secondary-colour);
    border-radius: 20px;
}

.starter {
    background-color: var(--primary-colour-pale);
    color: var(--secondary-colour);
    border: 5px solid var(--quaternary-colour);
    border-bottom: 5px solid var(--secondary-colour);
    border-left: 5px solid var(--secondary-colour);
    border-radius: 20px;
    margin: 2px 0;
    padding: 0 2px;
}

.starter.selected-starter {
    border: 5px solid black;
    background-color: var(--tertiary-colour);
}

.starter label {
    display: block;
    line-height: 0.6;
}

.starter-name {
    font-size: 3.5rem;
}

.starter .personality {
    line-height: 0.7;
    min-height: 3.2rem;
    /* this is the minimum height needed to ensure the 
    height matches even if personalities change to 2 lines */
}

.radio-arrow {
    color: black;
    font-weight: 900;
    font-size: 1.4rem;
}

/* Main - Pokémon Collection */

#pokemon-collection {
    margin: 20px 300px;
}

.pokemon-card-outer {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.pokemon-card {
    background-color: var(--primary-colour-pale);
    color: var(--secondary-colour);
    border: 5px solid var(--quaternary-colour);
    border-bottom: 6px solid var(--secondary-colour);
    border-left: 6px solid var(--secondary-colour);
    border-radius: 20px;
    margin: 10px 0;
    padding: 10px 20px;
}

.pokemon-card>h2 {
    line-height: 0.8;
    font-size: 3.5rem;
}

.pokemon-nickname {
    /* to make the pokemon nickname stand out more from the rest of the title */
    font-size: 1.1em;
}

progress {
    /* this fixes the issues with progress bars not filling full space at some screen sizes */
    width: 100%;
    margin: 0;
}

/* Footer */

footer {
    background-color: var(--tertiary-colour);
    /* this is added so the footer sticks to the bottom even on larger screens  */
    margin-top: auto;
}

#footer-text {
    margin-top: 6px;
    color: var(--secondary-colour);
}

#footer-text i {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--quaternary-colour);
}

footer span {
    color: var(--quaternary-colour);
}

/* Carousel */

#tipCarousel {
    background-color: var(--primary-colour-pale);
    border-bottom: 11px solid var(--primary-colour);
    padding: 30px 0 50px 0;
}

.carousel-item p {
    /* adjusted so height doesn't change on different screen sizes when more rows of text */
    min-height: 8rem;
    text-wrap: balance;
}

/* Modals - modal-content > modal-inner > modal-header, modal-body, modal-footer */

.modal-content {
    background-color: var(--primary-colour-pale);
    border: 4px solid var(--secondary-colour);
    border-radius: 30px;
    color: var(--secondary-colour);
    padding: 20px;
}

.modal-content .btn-close {
    border: none;
    font-size: 1.5rem;
}

.modal-content button {
    color: var(--secondary-colour);
    background-color: var(--tertiary-colour);
    margin: 0 15px;
    font-size: 2.5rem;
}

.modal-content button:hover {
    color: black;
    background-color: var(--primary-colour-pale);
    border: 4px solid var(--secondary-colour);
}

.modal-inner {
    background-color: var(--tertiary-colour);
    border-radius: 50px;
}

#releaseModal .modal-inner, #walkDisturbanceModal .modal-inner, #wildRenametModal .modal-inner {
    padding: 20px 10px;
}

.modal-header {
    border-bottom: 0px;
    padding-bottom: 0px;
}

.modal-header .modal-title {
    line-height: 1;
}

.main-modal-content {
    color: black;
    font-size: 2.5rem;
    line-height: 0.8;
}

.modal-body {
    padding: 0;
}

.modal-footer {
    border-top: 0px;
}

.modal-footer .confirm-modal-button {
    border: 4px solid var(--quaternary-colour);
    border-bottom: 4px solid var(--secondary-colour);
    border-left: 4px solid var(--secondary-colour);
}

.modal-footer .secondary-button {
    color: var(--quaternary-colour);
    border: 4px solid var(--quaternary-colour);
}

/* Modal Inputs */
#new-nickname, #wild-new-nickname {
    min-width: 60%;
    max-width: 100%;
    margin-bottom: 5px;
}


@media (max-width: 2600px) {

    #pokemon-collection {
        margin: 20px 200px;
    }

}

@media (max-width: 2200px) {

    #pokemon-collection {
        margin: 20px 100px;
    }

}

@media (max-width: 2000px) {

    #pokemon-collection {
        margin: 20px 50px;
    }

}

@media (max-width: 1800px) {

    #pokemon-collection {
        margin: 20px;
    }

}

@media (max-width: 1400px) {

    .starter img {
        height: 200px;
    }

    .pokemon-card-outer {
        flex: 0 0 auto;
        width: 50%;
    }

}

@media (max-width: 991px) {

    h3 {
        font-size: 2.5rem;
    }

    .pokemon-card-outer {
        flex: 0 0 auto;
        width: 100%;
    }

    .starter img {
        height: 170px;
    }

    /* Go for a walk modal image */
    #walk-image > img {
        height: 380px;
    }

    /* Wild encounter modal image */
    .wild-pokemon-image {
        height: 460px;
    }

    .starter label {
        font-size: 2.5rem;
    }

    .modal-title {
        font-size: 3rem;
    }

    .modal-content .btn-close {
        font-size: 1rem;
    }

    .details {
        font-size: 2rem;
    }

    .details>.level {
        font-size: 2.2rem;
    }

    /* Responsive visibility for 'Refresh Personalities' buttons  */
    #refresh-personalities-nav {
        display: none;
    }

    #refresh-personalities-main {
        display: inline-block;
    }
}

@media (max-width: 767px) {

    h2 {
        font-size: 2.9rem;
        line-height: 0.8;
    }

    #add-first-pokemon {
    font-size: 2.6rem;
    }

    .pokemon-card>h2 {
        font-size: 3rem;
    }

    .starter label {
        display: inline-block;
        /* this moves the label text down to be in line with the radio buttons */
        transform: translateY(2px);
    }

    .starter-name {
        font-size: 3rem;
        margin-left: 10px;
    }

    .starter {
        padding: 10px 2px 0 2px;
    }

}

@media (max-width: 560px) {

    .small-details {
        font-size: 2.2rem;
    }

    h1 {
        font-size: 4rem;
    }
    
    #pokemon-collection {
        margin: 0;
    }

    .carousel-item p {
        font-size: 1.8rem;
        /* min-height adjusted so height won't change with 3 rows of text */
        min-height: 6rem;
    }
}

@media (max-width: 450px) {

    .pokemon-card>h2 {
        font-size: 2.5rem;
    }

    /* Go for a walk modal image */
    #walk-image > img {
        height: 290px;
    }

    /* Wild encounter modal image */
    .wild-pokemon-image {
        height: 350px;
    }

    .starter img {
        height: 130px;
    }
}

@media (max-width: 395px) {

    h1 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    input[type='text'] {
        padding: 0 10px;
    }

    button.btn,
    #inventory-button {
        font-size: 1.8rem;
    }

    .modal-footer button {
        margin: 0;
    }
}

@media (max-width: 370px) {

    /* Go for a walk modal image */
    #walk-image > img {
        height: 230px;
    }

    /* Wild encounter modal image */
    .wild-pokemon-image {
        height: 280px;
    }
}