* {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    /*
    - By default, when we give height and width to an element, it is actually the height and width of its content.
    - Then, if we give border or padding to it, it is applied outside the content area.
    - So, the net height and width of the element increases.

    - But, when we set the border property to border-box, then the specified width and height of the element includes the border and padding of the box.
    - So, the content area is adjusted accordingly.
    - So, as we increase the size of the border or padding, content area decreases.
    - It is a good practice to set this property.
    */

    border: none;
    outline: 0;
}

*:hover,
*:active {
    border: none;
}

html {
    font-size: 62.5%;
}

body {
    width: 100vw;
}

a {
    text-decoration: none;
    color: white;
}

img {
    width: 100%;
}

h2 {
    font-size: 2.1rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.2rem;
}

select {
    background: none;
}

.btn {
    cursor: pointer;
}

/* Navigation Bar */

.navbar {
    height: 60px;
    background-color: #0f1111;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* Logo */

.nav-logo {
    height: 50px;
    width: 100px;
}

.logo {
    background-image: url(Resources/amazon_logo.png);
    background-size: cover;
    height: 50px;
    width: 100%;
}
/*
- A div is visible only when we give it a height and a width.
- So, we will provide a width and height to nav-logo div.
*/

.border {
    border: 1px solid transparent;
}

.border:hover {
    border: 1px solid white;
    border-radius: 3px;
}

/* Address */

.nav-first-row {
    font-size: 1.2rem;
}

.nav-second-row {
    font-size: 1.4rem;
    font-weight: bold;
}

.nav-address {
    padding: 8px;
    margin-right: 5px;
}

.address-first {
    margin-left: 15px;
    color: #ccc;
}

.address-second {
    margin-left: -2.3px;
}

.address-icon i {
    transform: translate(-3px, -5px);
    font-size: 1.8rem;
    padding-right: 2px;
}

/* Search Bar */

.nav-search {
    display: flex;
    height: 40px;
    flex-grow: 1;
    border-radius: 7px;
    border: 2px solid transparent;
}

.search-select {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 45px;
    text-align: center;
    font-size: 1.3rem;
    background-color: #e6e6e6;
    outline: 0;
    cursor: pointer;
}

.search-input {
    flex-grow: 1;
    padding: 8px;
    font-size: 1.5rem;
    letter-spacing: 5;
    outline: 0;
}

.search-button {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 40px;
    background-color: #fdbd68;
    color: #0f1111;
}

.nav-search:hover {
    border: 2px solid orange;
}

.search-select:hover {
    background-color: #d6d5d5;
}

.search-button:hover {
    background-color: orange;
}

/* Language */

.nav-language {
    display: flex;
    align-items: center;
    height: 45px;
    padding: 8px;
    margin-left: 5px;
}

.language-select {
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin-left: 2px;
    outline: 0;
    cursor: pointer;
    background-color: black;
}

/* Sign-in */

.nav-sign-in {
    padding: 8px;
}

.sign-in-text {
    margin-left: 5px;
}

.sign-in-select {
    background: none;
    color: white;
    outline: 0;
    cursor: pointer;
}

/* Orders */

.nav-orders {
    padding: 8px;
}

/* Cart */

.nav-cart {
    padding: 8px;
    margin-right: 8px;
}

/* Panel */

.panel {
    background-color: #232f3e;
    color: white;
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 1.4rem;
}

.panel-menu {
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
}

.menu-icon {
    margin-right: 5px;
}

.panel-options {
    display: flex;
    height: 100%;
}

.options {
    display: flex;
    align-items: center;
    padding: 10px;
    height: 100%;
}

/* Hero */

.hero {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0) 50%,
            rgba(255, 255, 255, 0.2) 60%,
            rgba(255, 255, 255, 0.5) 80%,
            rgba(255, 255, 255, 0.7) 90%
        ),
        url(Resources/hero_image.jpg);
    height: 600px;
    background-size: cover;
    padding: 0 20px;
    display: flex;
    align-items: flex-end;
}

.hero-message {
    background-color: white;
    font-size: 1.4rem;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    margin-bottom: 300px;
}

.message-link {
    color: #2162a1;
}

.message-link:hover {
    color: black;
    text-decoration: underline;
}

/* Shop Section */

.shop-section {
    display: flex;
    padding: 20px;
    background-color: rgb(249, 194, 225);
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

/* Card */

.card {
    background-color: white;
    font-size: 1.4rem;
    padding: 20px;
    width: 23.95%;
    /* To make cards occupy equal width on screen depending on width of viewport. */

    height: 410px;
    display: flex;
    flex-direction: column;
}

.card-first {
    margin-top: -300px;
}

.card-heading {
    margin-bottom: 10px;
}

.card-img {
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.card-link {
    display: block;
    color: rgb(33, 98, 161);
    margin-top: 15px;
}

.card-link:hover {
    color: black;
}

/* Grid */

.card-grid {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    column-gap: 15px;
    width: 100%;
    height: 300px;
    align-items: center;
}

.card-grid div {
    width: 100%;
    height: 100%;
}

.card-grid-img {
    width: 100%;
    height: 75%;
    object-fit: cover;
}

.card-img-text {
    display: inline-block;
    margin-top: 5px;
}

/* Sign-in Section */

.sign-in-section {
    padding: 30px;
    text-align: center;
}

.sign-in-section .btn {
    margin: 10px 0;
}

.btn-primary {
    background-color: #f8d523;
}

.btn-stretched {
    border-radius: 20px;
    padding: 10px 100px;
}

.sign-in-text {
    font-size: 1.2rem;
}

.sign-in-link {
    color: #2162a1;
}

.sign-in-link:hover {
    color: black;
    text-decoration: underline;
}

.btn:hover {
    background-color: #f9c60e;
}

/* Footer */

.back-to-top-panel {
    background: linear-gradient(#36475a 0%, #3f5268 50%);
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 1.5rem;
}

.back-to-top-panel:hover {
    cursor: pointer;
    background: #394757;
}

/* Footer Panel */

.footer-panel {
    background-color: #232f3f;
    color: white;
    padding: 50px 250px;
    display: flex;
    font-size: 14px;
}

.footer-panel-vertical-column {
    flex: 1;
    /* For equal width distribution among all divs. */

    margin-right: 80px;
}

.footer-panel-list {
    list-style: none;
    padding: 0;
}

.footer-panel-list-item {
    margin: 15px 0;
}

.footer-panel-list-item i {
    margin-right: 2px;
}

.footer-panel-list-item a {
    color: #ddd;
}

.footer-panel-list-item:hover {
    text-decoration: underline;
}

/* Footer-brand */

.footer-brand {
    border-top: 1px solid #3a4553;
    background-color: #232f3f;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo {
    margin: 0 70px;
    width: 100px;
}

.footer-select {
    border: 1px solid rgb(132, 134, 136);
    padding: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    margin: 10px;
}

.footer-select select {
    color: white;
    margin-left: 5px;
}

#footer-country {
    padding: 4px 10px;
}

#us-flag {
    margin-right: 5px;
    font-size: 2rem;
}

#usd-sign {
    margin-right: 5px;
    font-size: 1.5rem;
}

/* Footer Desc */

.footer-desc {
    background-color: rgb(19, 26, 34);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 20px;
    column-gap: 30px;
    padding: 40px 250px;
}

.footer-desc-item-heading {
    font-weight: 500;
    color: #ddd;
}

.footer-desc-item-text {
    font-size: 1.2rem;
    color: #999;
}

.footer-desc-item:hover {
    cursor: pointer;
}

.footer-desc-item:hover .footer-desc-item-heading {
    text-decoration: underline;
    text-decoration-color: #ddd;
}

.footer-desc-item:hover .footer-desc-item-text {
    text-decoration: underline;
    text-decoration-color: #999;
}
/* When footer-desc-item is in hover state, then footer-desc-text will get an underline of #999 color */

/* Footer Copyright */

.footer-copyright {
    background-color: rgb(19, 26, 34);
    display: flex;
    color: #ddd;
    flex-direction: column;
    align-items: center;
    padding: 0 220px;
    padding-bottom: 30px;
    font-size: 1.2rem;
}

.footer-copyright-list {
    display: flex;
    list-style: none;
}

.footer-copyright-list-item {
    margin: 8px;
}

.footer-copyright-list-item a {
    color: #ddd;
}

.footer-copyright-list-item i {
    margin-left: 4px;
}

.footer-copyright-list-item:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232f3f;
    padding: 1.4rem 10rem;
    color: white;
    font-size: 1.8rem;
}

.footer-text {
    color: #a09d9d;
}

.github-logo {
    font-size: 3rem;
}