:root {
    --font-colour: white;
    --link-colour: #458532;
    --support-text: 0.7;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: black;
    overflow-x: hidden; /* Added to fix the phantom overflow */
}

button {
    cursor: pointer;
    border: none;
}

.btn {
    background-color: var(--link-colour);
    color: var(--font-colour);
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 0.9rem;
}

.btn:hover {
    color: rgb(30, 34, 73);
}

/* Start of navigation bar styling */

/* Ensures city/temp is displayed on same line */
.location {
    display: flex;
}

#locationTemp {
    padding-left: 0.6rem;
    margin-bottom: 2rem;
}

#currentDay {
    color: rgb(228, 5, 49);
}

.container-fluid {
    margin: 0.6rem;
    margin-bottom: -1rem;
}

.welcome-message {
    margin-top: -1rem;
    color: var(--link-colour);
}

.nav-link {
    color: black;
    margin-right: 1.25rem;
}

.nav-link:hover, .active {
    color: var(--link-colour);
}

.cashier {
    margin-top: 0.3rem;
}

.cashier:hover {
    transition: 0.3s;
    cursor: pointer;
    background-color: var(--link-colour);
    color: var(--font-colour);
    margin-top: 0.3rem;
}
/* End of navigation bar styling */

marquee {
    box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.2);
}

main {
    background: linear-gradient(to top, #075006, white); /* Added gradient */
}

/* Start of GA/NGA button styling */
#giftAid, #not {
    padding: 4rem;
    width: 50%;
    margin: 0;
    font-size: 2rem;
    border-radius: 1.25rem;
    box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.2); /* Creates drop shadow */
    color: var(--font-colour)
}

#giftAid {
    background-color: var(--link-colour);
    position: relative;
    z-index: 2;
    top: 2rem;
    left: 5rem;
}

#not {
    background-color: #F35959;
    position: relative;
    bottom: 3rem;
    left: 35rem;
    z-index: 1;
}

#gifClipID {
    position: absolute;
    /* Centers gif */
    top: 60%;  
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Sits on top of both buttons */
  }

/* Switches button layout when screen size is below 1200px (mobile) and above 1600px (large screen) */
@media only screen and (max-width: 1200px), only screen and (min-width: 1600px) {
    #giftAid, #not {
        position: static;
        width: 100%;
        border-radius: 0;
        padding: 2rem;
    }

    /* Adds space between buttons */
    #not { 
        margin-top: 6.25rem;
        margin-bottom: 2rem;
    }
}

/* Removals for mobile */
@media only screen and (max-width: 1200px) {
    /* Removes icons for the table resize. */
    .icon {
        display: none;
    }

    /* Removes spacing between buttons */
    #giftAid, #not {
        margin-top: 1rem;
    }
}

/* Adds enlarge effect for ga/nga buttons */
#giftAid:hover, #not:hover {
    transform: scale(1.05);
  }
/* End of GA/NGA button styling */


/* Start of description section styling */
#description {
    /* Provides animated background to the section */
    background: linear-gradient(to top, #0f5b0d, #0d540b); /* Added gradient */
    background-size: 200% 200%;
    padding: 3.1rem;
    margin-top: 0;
}

h3, h4 {
    font-size: calc(2vw + 1rem);
}

#ga-count {
    color: #99CC00;
}

#nga-count {
    color: #F35959;
}

p.logger-desc {
    opacity: var(--support-text);
    color: var(--font-colour);
}

.sales-desc {
    color: var(--font-colour);
}

#arrow {
    max-width: 60%;
    margin: auto;
}
/* End of description section styling */


/* Hides the table, needed for functionality, from the page */
#home-table {
    display: none;
}