/* root colours that will be reused during the whole project */
:root{
    /* General colours across the page */
    --white: #FAFAFA;
    --text: #1C1A22;
    --light-grey: #F5F5F5;
    --light-blue-back: #F1F7FD;
    --blue-back: #80B3E5;
    --dark-blue-back: #0f0f1a;

    /* General values to all "h" elements to keep everything consistent */
    --h1-font-size: clamp(3vh, 4vh, 5vh);
    --h1-font-weight: 700;
    --h2-font-size: clamp(2vh, 3vh, 4vh);
    --h2-font-weight: 600;
    --h3-font-size: clamp(1.5vh, 2vh, 2.5vh);
    --h3-font-weight: 500;
    --h4-font-size: clamp(1vh, 1.5vh, 2vh);
    --h4-font-weight: 500;
}

/* Smooth animation of getting elements up for the whole page */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General styling rules */
body{
    margin: 0;
    padding: 0;
    background-color: var(--white);
    animation: fadeInUp 1.2s ease;
}

/* Setting one font for specific elements and the setting the automatic colour */
/* I will just overwrite it in case I actually need to do so */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--text);
}

/* Setting another one for the p element */
p {
    font-family: 'Inter', sans-serif;
    color: var(--text);
}

/* Customizing the font size */
/* I changed it to the equivalent of 10px, just to do math easier when setting the font-size */
html {
    font-size: 62.5%; /* equivalent to 10px */
}

/* Decided to design the elements that I'm going to reuse on every page */
/*
* Designing the header section
*/

/* Making the header be sticky */
header{
    padding: 1.6rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--light-blue-back);
}

/* making the first div with the image and the name of the company a flex container */
header > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Designing the burger menu, which is only visible on tablets and phones */

/* Hide burger menu by default */
.burger {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
}

.burger span {
    display: block;
    width: 3rem;
    height: 0.4rem;
    background-color: var(--text);
    border-radius: 0.2rem;
    transition: all 0.3s ease;
}

header .logo img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
}

/* Doing some generic customization */
header div p{
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
}

/* Making a nav bar a flex container */
header nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

header nav menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    list-style: none;
}

/* Doing some basic customisation for a elements*/
header nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 2rem;
    font-weight: 500;
    padding: 0.5rem 0.5rem;
    margin: 0.5rem;
}

header .lang-switch a {
    text-decoration: none;
    color: var(--text);
    font-size: 2rem;
    font-weight: 500;
    padding: 0.5rem 0.5rem;
    margin: 0.5rem;
    background-color: transparent;
    border: none;
}

/*
* Designing the footer section
*/

/* Designing the footer section */
footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 4rem;
    background-color: var(--dark-blue-back);
}

.footer-logo > div{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem; /* All put a 0 in front of the number :) */
}

/* Setting some customization to decorate some elements */
.footer-logo div:first-child p{
    font-size: 2.5rem;
    color: var(--white);
}

.footer-logo p{
    font-size: 1.5rem;
    color: var(--white);
}

.footer-logo img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
}

.footer-links{
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-links nav menu{
    list-style: none;
}

.footer-links a {
    text-decoration: none;
    color: var(--white);
    font-size: 2rem;
    font-weight: 500;
}

.footer-social-networks p {
    color: var(--white);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.footer-social-networks a{
    text-decoration: none;
}

.footer-social-networks img {
    width: 4rem;
    height: 4rem;
    filter: brightness(0) invert(1); /* Makes icons white if they're originally colored, googled this function */
}

/* Mobile and tablet styles for the header and footer */
@media (max-width: 1024px) {
    /* Also changing the padding on tablets and phones */
    header {
        padding: 1rem;
        justify-content: space-between;
    }

    /* Show burger */
    .burger {
        display: flex;
    }

    /* Hide nav by default on mobile/tablet */
    header nav {
        position: absolute;
        top: 100%; /* just below the header */
        left: 0;
        width: 100%;
        background-color: var(--light-blue-back);
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.6s ease;
        flex-direction: column;
        align-items: center;
    }

    header nav.open {
        max-height: 50rem;
    }

    /* Changing the style of the a elements */
    header nav a {
        border: none !important;
        background-color: transparent !important;
        color: var(--text);
    }

    header nav menu {
        flex-direction: column;
        gap: 2rem;
    }

    /* Hiding some extra content on the small screen */
    .footer-links{
        display: none;
    }

    .footer-social-networks p{
        display: none;
    }
}

/*
* Designing the about section
*/

.about-intro-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 15rem;
    text-align: center;
}

.about-intro-section h1{
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    margin: 0;
}

.about-intro-section p{
    font-size: 1.8rem;
}

/* Designing a section with the history of the company */
.about-primary-section{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
}

.about-primary-section div{
    width: 50%;
}

.about-primary-section p{
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.03rem;
    text-indent: 3rem;
}

/* Designing a section with additional info about the company */
.additional-company-fact{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 5rem;
}

.additional-company-fact-text{
    text-align: left;
    text-indent: 1.2vh;
}

.additional-company-fact-text h2{
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
}

.additional-company-fact-text p,
.additional-company-fact-text ul,
.additional-company-fact-text li{
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.03rem;
}

.additional-company-fact-image-con img {
    width: 15rem;
    height: 15rem;
    object-fit: contain;
}

.additional-company-fact-image-con p{
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.03rem;
}

.restore{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue-back);
    flex-direction: column;
    min-height: 25vh;
}

.restore-info{
    text-align: center;
}

.restore-info h2{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    color: var(--white);
}

.restore-info p{
    font-size: 2rem;
    font-weight: 300;
    color: var(--white);
}

.buttons{
    margin: 1.5rem auto;
}

/* Shared button base */
.buttons a {
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 600;
    padding: 1.2rem 3.2rem;
    border-radius: 5rem;
}


/* Designing buttons for the about page */
/* I didn't put these colours at the root elements because I only use them once */
/* They still have the same colour palette but again I'm not going to reuse these colours */
.button-about-primary {
    background-color: #fff;
    color: #3575e2;
    border: 2px solid #fff;
    transition: all .3s ease-in-out;
}

.button-about-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    transition: all .3s ease-in-out;
}

.button-about-primary:hover,
.button-about-secondary:hover{
    box-shadow: 0 10px 20px -5px #fff;
}

@media (max-width: 768px) {

    .about-primary-section div{
        width: 100%;
    }
    .about-primary-section p{
        margin: 1rem;
    }

    .additional-company-fact{
        margin: 1rem;
        flex-direction: column;
    }

    .additional-company-fact-text h2{
        text-align: center;
    }
    /* Changing the layout a little bit for this size */
    .additional-company-fact-image-con{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1vh;
        text-indent: 1.2vh;
    }

    .restore{
        min-height: 30vh;
    }
}

/*
* Designing the contact page
*/
.intro-contact-page{
    background-color: var(--light-grey);
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-contact-page h1{
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
}

.intro-contact-page p{
    font-weight: 300;
    font-size: 2vh;
    width: 60ch;
    text-align: center;
    margin-top: 0;
}

.methods-of-contact{
    margin-top: 2rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}

.methods-of-contact p{
    text-align: center;
}

.contact-method{
    padding: 1.2rem 3.2rem;
    background-color: var(--light-grey);
    border: 0.3rem solid var(--light-grey);
    border-radius: 1rem;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 100px;
    transition: all .3s ease-in-out;
}

.contact-method:hover{
    /* move the card 8px for subtle popout effect */
    transform: translateY(-8px) scale(1.02);
    /* change the shadow to look bigger and include a promary color tint */
    box-shadow: 0 20px 30px -10px rgba(16, 185, 129, .5), 0 8px 15px -5px rgba(0,0,0,.1);
}

.image-contact-method{
    height: 5rem;
    border-radius: 5rem;
}

/* Designing the form of the contact page */
.form-section{
    background-color: var(--light-grey);
    padding-bottom: 2rem;
}

.form-instructions{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
}

.form-instructions h3{
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
}

.form-instructions p{
    font-size: 1.5rem;
    margin-top: 0;
}

.form-details{
    max-width: 50rem;
    margin: 3rem auto;
    padding: 2.5rem;
    background: #fffffb; /* just use it for the form here, so it has some visual differences */
    border-radius: 2rem;
}

.form-details fieldset{
    border: none;
    display: grid;
    gap: 1.5rem;
}

.form-details label{
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.form-details input,
.form-details select{
    height: 4rem;
    padding: 0 1rem;
    font-size: 1.5rem;
    color: var(--text);
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
    border-radius: 1.2rem;
}

.form-details textarea {
    max-height: 8rem;
    padding:  1rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
    border-radius: 1.2rem;
}

.form-details .submit-button {
    margin-top: 1.5rem;
    text-align: center;
}

.form-details button {
    min-width: 20rem;
    height: 5rem;
    padding: 0 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0071e3 0%, #00c2cb 100%); /* I found different buttons design patters and
    asked chose this one, no way I'd write this by myself */
    border: none;
    border-radius: 1.2rem;
    transition: all 0.3s ease;
}

.form-details button:hover {
    transform: translateY(-4px) scale(1.02);
    background-color: #3575e2;
    color: #fff;
    box-shadow: 0 10px 20px -5px rgba(53, 117, 226, .4);
}

/* Designing some elements on the admin page */
.form-details input[type="file"]::-webkit-file-upload-button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
    border-radius: 1.2rem;
    text-align: center;
}

.form-details small{
    padding: 1rem 2rem;
    font-size: 1.4rem;
}


/* Design the section with the frequently asked questions */
.frequently-asked-questions{
    width: 40%;
    margin: 0 auto
}

.frequently-asked-questions-intro{
    text-align: center;
}

.frequently-asked-questions-intro h2{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
}

.frequently-asked-questions-intro p{
    font-size: 2rem;
}

.question-answer{
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
    border-radius: 1.2rem;
    margin-bottom: 1.5rem;
    min-height: 4rem;
    width: 100%;
}

.question-answer summary,
.question-answer p{
    padding: 0.8rem 0.8rem;
    text-align: left;
}

.question-answer summary{
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    margin-bottom: 0;
}

.question-answer p{
    margin-top: 0.5rem;
    font-size: 1.8vh;
    text-indent: 2rem;
}

/* Adapting this page for tablets and phones */
@media (max-width: 1024px) {

    .intro-contact-page p{
        width: 100%;
        text-indent: 1rem;
    }

    .form-instructions p{
        text-indent: 1rem;
    }

    .form-details{
        margin: 1rem auto;
    }

    .frequently-asked-questions{
        width: 50%;
    }
}

/*
* Designing the login page and registration page
*/
/* I don't set so many configurations, just trying to reuse what I already have */
.login-reg-img-block{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-reg-img img{
    width: 12rem;
    height: auto;
}

.form-instructions-login-reg{
    margin-top: 1rem;
}

/* Making the button to be at the centre */
.form-section div:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 1vh;
}

.register-log-in {
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1.2rem 3rem;
    text-decoration: none;
    border-radius: 5rem;
    background-color: #fff;
    color: #3575e2;
    border: 2px solid #3575e2;
    transition: all 0.3s ease;
}

.register-log-in:hover {
    transform: translateY(-4px) scale(1.02);
    background-color: #3575e2;
    color: #fff;
    box-shadow: 0 10px 20px -5px rgba(53, 117, 226, .4);
}

/*
* Designing the home page
*/
.intro-home{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url("../images/home_page_background_image.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 50rem;
    text-align: center;
}

.intro-home h1{
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    text-indent: 1vh;
}

.intro-home p{
    font-size: 2vh;
    text-indent: 1vh;
}

.restore-actions{
    margin-top: 3rem;
}

/* Designing buttons for the home page */
/* Colours are in the same colours palette but again only use them here */
.button-home-primary {
    background-color: #A7E0D7;
    color: #0A6B5A;
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.button-home-secondary {
    background-color: transparent;
    color: #8ED7CC;
    border: 2px solid #A7E0D7;
    transition: all 0.3s ease;

}

.button-home-primary:hover,
.button-home-secondary:hover{
    box-shadow: 0 10px 20px -5px #A7E0D7;
}

/* Designing a header for the content on the home page */
.info-home-header,
.info-home-page{
    width: 80%;
    margin: 5rem auto;
}

.info-home-header h2{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    text-align: left;
}

/* Designing the layout for the main info on the home page */
.info-home-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(50px,auto);
    gap: 2rem;
}

.ipod-headphones {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.ipod-headphones img {
    height: 50rem;
    border-radius: 1.5rem;
}

.ipod-card {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
}

.ipod-card img{
    width: auto;
    height: 20rem;
    border-radius: 1rem;
}

/* The column for the ipod classic */
.ipod-card:nth-child(1){
    grid-column: 3;
}

/* The column for the ipod mini */
.ipod-card:nth-child(2){
    grid-column: 4;
}

/* The column for the ipod shuffle */
.ipod-card:nth-child(3){
    grid-column: 5;
}

.brand-story {
    grid-column: 3 / -1;
    grid-row: 2;
}

/* Designing some elements for this page */
.ipod-card h4{
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
}

.brand-story {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-story .buttons {
    width: fit-content;
    margin: 0;
    padding: 0;
}

.brand-story .button-about-us {
    display: inline-block;
}

.brand-story h3{
    font-weight: var(--h3-font-weight);
    font-size: var(--h3-font-size);
    margin-bottom: 0;
}

.brand-story p{
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.03rem;
    width: 40ch;
}

.button-about-us {
    background-color: transparent;
    color: #CCCCCC;
    border: 2px solid #CCCCCC;
    transition: all 0.3s ease;
}

.button-about-us:hover{
    box-shadow: 0 10px 20px -5px #CCCCCC;
}

/* Working on the additional information on my home page */
.info-additional{
    width: 80%;
    margin: 3rem auto;
}

.info-additional h3{
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
}

/* I need to reuse it for the home page */
.additional-form-input {
    height: 4rem;
    width: 35%;
    padding: 0 1rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
    border-radius: 1.2rem;
}

.additional-form-button {
    min-width: 15%;
    height: 4rem;
    padding: 0 2rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: #A7E0D7;
    color: #0A6B5A;
    border: 2px solid #fff;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.additional-form-button:hover{
    box-shadow: 0 10px 20px -5px #A7E0D7;
}

/* Applying media query for the home page */
@media (max-width: 1024px)  {
    /* Just decreasing the size of the h1 element */
    .intro-home h1{
        font-size: var(--h2-font-size);
        font-weight: var(--h2-font-weight);
    }

    /* Working with the background image */
    .intro-home{
        background-image: url("../images/home_page_background_image_phone.jpg");
        background-position: center;
    }

    /* Adopting the grid section for phones and tablets */

    /* First of all making it a full width */
    .info-home-header,
    .info-home-page {
        width: 100%;
        margin: 4rem auto;
    }

    .info-home-header h2{
        text-align: center;
    }

    /* Hide the big image */
    .ipod-headphones{
        display: none;
    }

    /* Change the structure to the flex box */
    .info-home-page {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        align-items: flex-start;
    }

    .ipod-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ipod-card img {
        width: 100%;
        height: auto;
        max-height: 18rem;
    }

    .brand-story {
        align-items: center;
    }

    .brand-story p{
        text-indent: 1.2rem;
    }
}

/*
* Designing the shop page
*/
.intro-shop{
    text-align: center;
}

.intro-shop h1{
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
}

.intro-shop p{
    font-size: 1.8rem;
}

.product-section {
    width: 80%;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(50px,auto);
    gap: 2rem;
    text-align: center;
}

.product-card img{
    min-height: 20vh;
    width: 100%;
}

.product-card h3{
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
}

.product-card p{
    font-size: 1.5vh;
}

.product-card a{
    text-decoration: none;
}

.product-description {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: calc(1.4em * 5);
}

.product-description::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    background: linear-gradient(to bottom, transparent, white);
}

@media (max-width: 1024px) {
    /* Changing the size of the h1 element, too big for the mobile devices */
    .intro-shop h1{
        font-size: var(--h2-font-size);
        font-weight: var(--h2-font-weight);
    }
}

/* Customizing the admin page */

/* Customize the success and failure message */
.alert_success,
.alert_failure{
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    width: 50%;
    margin: 3rem auto;
    border: 0.2rem solid #0e0e0e;
    text-align: center;
}

.alert_success{
    background-color: #BADA55;
}

.alert_failure{
    background-color: #e63946;
}

/* Customizing the intro before the form */
.intro-form-admin{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    text-align: center;
}

.admin-dash{
    display: flex;
    justify-content: center;
    align-items: center;
}

.log-out-button-div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vh;
}

.log-out-button {
    padding: 1.2rem 3rem;
    background: linear-gradient(135deg, #A7E0D7, #8ED7CC);
    color: #0A6B5A;
    font-weight: 600;
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: 5rem;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(167, 224, 215, 0.4);
    transition: all 0.3s ease;
}

.log-out-button:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #8ED7CC, #A7E0D7);
    box-shadow: 0 10px 25px rgba(167, 224, 215, 0.6);
}

.update-delete {
    display: flex;
    gap: 1.5rem;
}

.action-button {
    flex: 1;
    margin: 0;
}

.btn-edit,
.btn-delete {
    width: 100%;
    padding: 1.5rem;
    border-radius: 3rem;
    font-size: 1rem;
}

.btn-edit {
    background-color: #2b2c32;
    color: white;
}

.btn-edit:hover {
    background-color: #44454d;
}

.btn-delete {
    background-color: #f2f2f2;
    color: #d00000;
    border: 1px solid #d00000;
}

.btn-delete:hover {
    background-color: #d00000;
    color: white;
}

/* Designing an individual page for each product */
.product-detail{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5vh;

}

.product-image{
    max-width: 50%;
    margin-left: 0.5rem;
}

.product-image img{
    max-width: 100%;
    height: auto;
    border-radius: 2vh;
}

.product-text {
    flex-grow: 1;
    max-width: 45%;
    text-align: center;
    margin: 1vh;

}

.product-text h2{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
}

.product-text p{
    font-size: 2vh;
    font-weight: var(--h4-font-weight);
    text-indent: 1rem;
}

/* Designing the button and an a element for this page */
.product-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.product-actions button,
.product-actions a {
    text-decoration: none;
    font-size: 1.8vh;
    font-weight: var(--h2-font-weight);
    padding: 1.5vh 3vh;
    border-radius: 5vh;
    text-align: center;
    min-width: 5vh;
}

.add-to-card {
    background-color: transparent;
    color: var(--text);
    border: 2px solid var(--text);
}

.back-to-shop {
    background: var(--light-grey);
    color: #999;
    border: 1px solid #ccc;
    opacity: 0.7;
}

.individual-product .info-additional{
    width: 90%;
    margin: 2rem;
}

@media (max-width: 1024px) {
    /* Resetting the size of the images on small screens*/
    .product-image {
        max-width: 100%;
    }

    /* Button Sizing Fix: Use rem for readability and tap-ability on mobile */
    .product-actions a {
        font-size: 1.6rem;
        padding: 1.4rem 2rem;
        border-radius: 4rem;
        flex-basis: 45%;
        min-width: unset;
    }

    .product-actions button{
        font-size: 1.6rem;
        padding: 0.5rem 7rem;
        border-radius: 4rem;
        flex-basis: 45%;
        min-width: unset;
    }
}

@media (max-width: 768px){
    .product-actions a {
        font-size: 1.6rem;
        padding: 1.4rem 3rem;
        border-radius: 4rem;
        flex-basis: 45%;
        min-width: unset;
    }

    .product-actions button{
        font-size: 1.6rem;
        padding: 0.5rem 5rem;
        border-radius: 4rem;
        flex-basis: 45%;
        min-width: unset;
    }
}

/* Designing the personal account page */
.personal-greeting{
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    text-align: center;
}

.thank-message {
    width: 80%;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(50px,auto);
    gap: 2rem;
    text-align: center;
}

.thank-message p{
    font-size: var(--h3-font-size);
    width: 80%;
    margin: 2rem auto;
    padding: 1.2rem 3.2rem;
    background-color: var(--light-grey);
    border: 0.3rem solid var(--light-grey);
    border-radius: 1rem;
    max-width: 200px;
    transition: all .3s ease-in-out;
}

.thank-message p:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 30px -10px rgba(16, 185, 129, .5), 0 8px 15px -5px rgba(0, 0, 0, .1);
}