@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
h1 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}



body {
    margin: 0;
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 0;
    font-style: normal;
}

@keyframes spin {
    from {rotate: 0deg;}
    to {rotate: 360deg;}
}

h2 {
    margin-bottom: 5px;
}

.menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    margin-bottom: 10px;
}

.menu a {
    border: solid;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: black;
}

.menu a:hover {
    border: solid red;
    color: red;
    cursor: pointer;
}

.logo {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.superCSS {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    border-radius: 100%;
    background-color: blue;
}

.articles {
    margin-top: 50px;
}

.article {
    background-color: gray;
    border-radius: 10px;
}

.lowerBody {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 50px;
    grid-column-gap: 10px;
    margin-bottom: 50px;
}

.main {
    grid-column: 2/3;
}

#mainProduct {
    background-color: gold;
}

.textBox {
    border: solid;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
}

.textBox img {
    width: 50%;
    display:block;
    margin-inline: auto;
}

.reviews {
    margin-top: 50px;
}

.review {
    border: solid;
    border-radius: 20px;
    padding: 5px;
    margin-bottom: 10px;
    background-color: palevioletred;
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.review img {
    width:100%;
    aspect-ratio: 2/1;
}

h2 {
    margin-top: 0;
}

img {
    height: 100%;
    width: 100%;
}

.topImg img {
    border-radius: 100%;
    margin-top: auto;
}

.top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    padding-bottom: 200px;
}

.top img {
    aspect-ratio: 3/1;
}

.leaveSuggestion {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 10px;
}

.moreArticles {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 10px;
    background-color: rgb(107, 131, 0);
    padding: 10px;
    text-align: center;
}

.moreArticles table {
    text-align: left;
    margin-inline: auto;
}

.odd {
    background-color:aliceblue;
}

.even {
    background-color:antiquewhite;
}

footer {
    background-color: green;
}

.footerMenu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin-bottom: 10px;
}

.footerMenu div {
    border: solid;
    border-radius: 10px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: black;
}

.data {
    width: 50%;
    margin: 0 auto;
}

.rules {
    border: solid black;
    width: 50%;
    margin-inline: auto;
    background-color: gold;
    padding: 10px;
    border-radius: 10px;
}

.superChat {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    border-inline: solid black;
}

.superChat div {
    border: solid  black;
    height: 600px;
    overflow-y: scroll;
}

.superChat table {
    width: 100%;
    text-align: left;
}

#ARchatBot {
    overflow: scroll;
    height: 510px;
    width: 85%;
    margin: 5px;
    border: solid black;
}
.ARprompt {
    margin: 5px;
    margin-bottom: 50px;
}

.ARchatBox {
    border: solid black;
    border-radius: 10px;
    width: fit-content;
    max-width: 50%;
    margin: 10px;
    padding: 5px;
    overflow-wrap: anywhere;
}
.userChatBox {
    border: solid black;
    border-radius: 10px;
    width: fit-content;
    max-width: 50%;
    margin: 10px 10px 10px auto;
    padding: 5px;
    overflow-wrap: anywhere;
}