* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    max-width: 100%;
    height: 500vh;
}
body img {
    border-radius: 10px;
}
a {
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    cursor: pointer;
}
.pangolin-regular {
    font-family: "Pangolin", cursive;
    font-weight: 400;
    font-style: normal; }
main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, 100vh);
}
button.order {
    background-color: #feb431;
    color: #a60311;
    font-family: "Pangolin", cursive;
    font-weight: 400;
    font-size: 1rem;
    border: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 5px 5px 25px #e9decd;
    float: left;
    cursor: pointer;
}
button.order:hover {
    box-shadow: none;
    background-color: #ffffff;
    font-size: 1.1rem;
}
button.order:active {
    box-shadow: none;
    background-color: #a60311;
    color: white;
}
.min {
    font-size: x-small;
}
/*TOP*/
.top {
    height: 100vh;
    max-width: 100%;
    background: url(/images/divination.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: grid;
    grid-template-columns: 25% 60%;
    grid-template-rows: 40% 45%;
    column-gap: 15%;
    row-gap: 25%;
}
h1, .title-tarot h2 {
    color: #feb431;
    font-family: "Pangolin", cursive;
    font-size: 15vh;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 5px 5px 5px black;
}
.call, .question {
    align-self: flex-end;
    text-align: right;
}
.call{
    justify-self: flex-end;
}
.question {
    justify-self: center;
    padding-bottom: 9%;
    padding-left: 45%;
}
p.text-top {
    color: #ffc643;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 2.8rem;
    text-transform: uppercase;
    font-family: "Pangolin", cursive;
    word-spacing: 0.3rem;
    margin-top: 2%;
}
.text-top a {
    margin-top: 15px;
}
.less {
    font-size: calc(100% / 1.4);
}
/*квітка-анімація*/
.draw-line {
    stroke: #ffc643;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: draw 5s ease-out forwards;
    animation-play-state: paused;
        /* не запускається одразу */
 }   
.draw-line.animate {
        animation-play-state: running;
        /* запускається */
}
.draw-line.animate-fill {
        animation: draw 5s ease-out forwards, fillIn 1s ease-out 5s forwards;
}
/* Вимальовування */
@keyframes draw {
to {
 stroke-dashoffset: 0;
}
}
/* Заливка після ліній (починається через 5s) */
 @keyframes fillIn {
from {
fill: transparent;
}
to {
 fill: #feb431;
}
}
/*TAROT*/
.tarot {
    display: grid;
    max-width: 100%;
    height: 100vh;
    padding-left: 7%;
    padding-top: 3%;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 55% 45%;
    background-color: #a60311;
}
.cards {
    grid-area: 1/2/3/3;
    justify-self: center;
    align-self: center;
}
.tarot_mob {
    display: none;
}
.potion {
    justify-self: end;
    align-self: end;
}
.cards img {
    max-width: 120%;
}
.title-tarot {
    justify-self: center;
    align-self: center;
}
.crystal {
    justify-self: center;
    align-self: start;
}
.appeal {
    position: absolute;
    top: 118vh;
    left: 28%;
    width: 320px;
    height: 100px;
    border-radius: 10px;
    padding: 10px;
    background-color: #feb431;
    color: black;
    font-family: "Pangolin", cursive;
    text-align: center;
    line-height: 1.5rem;
}
/*RUNES*/
.runes {
    max-width: 100%;
    height: 100vh;
    background-color: #fde7cf;
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: 33% 33% 33%;
}
.candle {
    grid-area: 1/1/4/2;
    justify-self: end;
    align-self: center;
    color: #51594c;
    font-family: "Pangolin", cursive;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 0 5%;
}
.candle>img {
    margin-bottom: 35px;
}
.exercise>p {
    color: #51594c;
    font-family: "Pangolin", cursive;
    text-transform: uppercase;
    font-size: 2.5rem;
    text-align: left;
    padding: 0 5%;
    line-height: 4rem;
    letter-spacing: 1px;
    word-spacing: 0.5rem;
}
.exercise, .bag, .flower {
    justify-self: center;
    align-self: center;
}
.bag img {
    transform: rotate(90deg); 
}
/*LENORMAND*/
.lenormand {
    background-color: #51594c;
    max-width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 40% 20% 40%;
    grid-template-rows: 45% 45%;
    padding-top: 10%;
}
.lenormand h3 {
    color: #feb431;
    font-family: "Pangolin", cursive;
    font-size: 8vh;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.title-lenormand {
    justify-self: center;
    align-self: center;
    padding-left: 15%;
}
.lenormand-exercise {
    justify-self: end;
        align-self: center;
        padding-left: 15%;
}
.lenormand-exercise>p {
    color: #ffc643;
    font-family: "Pangolin", cursive;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 2.5rem;
    word-spacing: 0.5rem;
    text-align: left;
    margin-left: 50px;
}
.lenormand-card {
    justify-self: center;
    align-self: center;
}
.lenormand-card img {
transform: scale(1.3);
}
.lenormand-appeal {
    justify-self: center;
    align-self: end;
    padding-bottom: 3rem;
}
.lenormand-button {
    background-color: #a60311;
    color: #feb431;
    width: 75%;
    padding: 7px;
    height: 5rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5rem;
}
.lenormand-button:hover {
    background-color: #feb431;
    color: #a60311;
}
/*CONTACTS*/
.contacts {
    background: url(/images/runes-image.png);
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 80% 20%;
}
.contacts h2 {
    color: #ffc643;
    font-family: "Pangolin", cursive;
    font-size: 12vh;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 15vh 3%;
    text-shadow: 5px 5px 5px black;
}
.bottom {
    background-color: #a60311;
    color: white;
    font-family: "Pangolin", cursive;
    text-align: center;
    text-transform: uppercase;
    line-height: 3rem;
    font-size: 1.7rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100%;
    justify-content: center;
    align-items: center;
}
.bottom p {
    font-size: 1rem;
}
.bottom button {
    float: none;
}
.bottom-img img {
    width: 100px;
    height: 100px;
}
.botton-mob {
    display: none;
}
/*HIT*/
body.hit {
    background-color: #fde7cf;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% auto 13%;
}
header {
background-color: #51594c;
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr 3fr;
grid-template-rows: 100%;
color: #ffc643;
text-transform: uppercase;
font-size: 1.5rem;
font-family: "Pangolin", cursive;
font-weight: 600;
padding-top: 2%;
padding-bottom: 2%;
position: relative;
word-spacing: 0.5rem;
justify-items: center;
align-items: center;
}
footer {
background-color: #a60311;
}
.logo {
    width: 10vh;
    position: absolute;
    top: 5px;
    left: 2rem;
}
main.info-layout {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    padding: 2% 5%;
}
main.luck {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-items: center;
    padding-left: 5%;
}
.luck h1, .info-layout h1 {
    color: #51594c;
    font-family: "Pangolin", cursive;
    font-size: 3.5rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: none;
    padding-bottom: 4vh;
    padding-top: 50px;
    word-spacing: 5vh;
    line-height: 4rem;
}
.luck, .info-layout {
    color: #51594c;
    font-family: "Pangolin", cursive;
    font-size: 3vh;
    line-height: 4vh;
    word-spacing: 1vh;
}
.order.order-layout {
    float: none;
}
.card-layout {
    grid-area: 1/2/4/3;
}
.mobile-nav {
    display: none; }
.wizardry p {
    margin: 35px 0;
}
.wizardry p, h1, h2 {
    text-align: center;
}
/*Для менших екранів комп'юторів і для ноутбуків////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1224px) and (max-width: 1440px) {
.potion img, .cards img, .crystal img, .bag img, .lenormand-card img {
    width: 85%;
}
.appeal {
    top: 122vh;
    left: 22%;
    width: 250px;
    height: 80px;
    padding: 6px;
    font-size: 18px;
}
.title-tarot {
    justify-self: start;
    align-self: start;
}
.tarot {
    grid-template-columns: 27% 40% 30%;
    padding-left: 3%;
}
.title-tarot h2 {
    font-size: 14vh;
}
.flower {
    justify-self: start;
}
.exercise>p {
    font-size: 2rem;
    line-height: 3rem;
}
.lenormand-card, .lenormand-appeal {
    justify-self: end;
}
.bottom {
    line-height: 2rem;
    padding: 10px 0;
}
.bottom h3 {
    font-size: 1.5rem;
}
.bottom p {
    font-size: 1rem;
}
/*HIT*/
body.hit {
    background-color: #fde7cf;
    height: auto;
    min-height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 5% auto auto;
    position: relative;
}
main.luck {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    padding-left: 5%;
}
footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #a60311;
}
.bottom p:first-child {
    margin-bottom: 0;
}
header {
    font-size: 1rem;
    position: relative;
    padding-top: 3%;
    padding-bottom: 3%;
}
.logo {
    width: 8vh;
}
.card-layout {
    grid-area: 1/1/2/2;
    padding: 50px 0;
}
.card-layout img{
    width: 80%;
}
}
/*Для планшетів/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 768px) and (max-width: 1223px) {
/*TOP*/
body {
        height: auto;
}
main {
        height: auto;
        width: 100%;
        grid-template-rows: repeat(5, auto);
}
.top {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 0;
}
h1 {
    font-size: 8vh;
    text-align: center;
    padding-top: 150px;
    padding-left: 30%;
    text-shadow: 5px 5px 5px black;
}
.title-tarot h2 {
    font-size: 8vh;
}
.call>p.text-top {
    font-size: 22px;
    text-shadow: 1px 1px 1px black;
}
.question>p.text-top {
    text-shadow: 3px 3px 3px black;
}
.br-mobile {
    display: none;
}
.call {
    padding: 15px;
    justify-self: start;
}
.empty {
    display: none;
}
/*TAROT*/
.tarot {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    height: auto;
    padding: 0;
}
.crystal {
    display: none;
}
.title-tarot {
    grid-area: 2/1/3/3;
}
.cards {
    grid-area: 3/1/4/3;
    padding: 5%;
}
.flowers {
    grid-area: 1/1/2/2;
}
.potion {
    justify-self: center;
    align-self: center;
    padding: 5%;
}
.appeal {
    box-shadow: 10px 5px 5px black;;
}
/*RUNES*/
.runes {
    height: auto;
    width: 100%;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(3, auto);
}
.candle img {
    max-width: 350px;
}
.exercise {
    grid-area: 1/1/2/2;
    text-align: center;
}
.exercise>p {
    font-size: 36px;
    line-height: auto;
    margin: 3%;
    text-align: center;
}
.candle>p {
    margin-left: 3%;
    margin-bottom: 3%;
}
.candle {
    grid-area: 2/1/3/2;
}
/*LENORMAND*/
.lenormand {
    grid-template-columns: auto auto;
    grid-template-rows:auto auto;
    padding-left: 20px;
    height: auto;
     width: 100%;
}
.lenormand-exercise p {
    margin: 0;
    text-align: center;
}
.lenormand h3 {
    font-size: 6vh;
}
.lenormand-card img {
    width: 300px;
    height: 300px;
}
.lenormand-button {
    padding: 0.6rem;
    font-weight: 400;
    font-size: 1.2rem;
    padding: 8px 3px;
}
.bottom-img img {
    width: 75px;
    height: 75px;
}
.bottom button {
    width: 90px;
    height: 90px;
    font-size: 1rem;
    margin-top: 7px;
    margin-left: 7px;
}
/*HIT*/
body.hit {
    height: auto;
    position: relative;
    min-height: 100vh;
    grid-template-rows: auto auto auto;
}
footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #a60311;
}
header {
    font-size: 1rem;
}
.logo {
    width: 5vh;
    top: 5px;
    left: 2rem;
}
.luck h1, .info-layout h1 {
    padding: 15px;
    font-size: 3rem;
}
.bottom {
    padding: 20px 0;
}
.luck {
    font-size: 24px;
}
main.luck {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    padding: 5%;
}
.card-layout {
    grid-area: 1/1/2/2;
}
}
/*Для мобільних телефонів////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width:767px) {
body {
    height: auto;
}
main {
    height: auto;
    width: 100%;
    grid-template-rows: repeat(5, auto);
}
h1, .luck h1, .info-layout h1, .title-tarot h2 {
    padding: 15px;
    font-size: 2.5rem;
    text-align: center;
}
h1 {
    text-shadow: 5px 5px 5px black,
    10px 10px 10px black,
    -7px -7px 10px black,
    -12px -12px 20px brown;
}
.top {
    background: url(/images/divination_mob.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 0;
}
p.text-top {
    font-size: 1.2rem;
    line-height: 2rem;
}
.call>p.text-top {
    font-size: 0.7rem;
    line-height: 1rem;
    backdrop-filter: blur(3rem);
    backdrop-filter: contrast(300%);
    margin-right: 0;
}
.question {
    text-align: center;
    justify-self: center;
    align-self: center;
}
.empty {
    display: none;
}
.call {
    grid-area: 3/1/4/2;
    width: 100%;
    justify-self: center;
    align-self: end;
    text-align: center;
}
button.order {
    margin-left: 25px;
    margin-bottom: 15px;
}
.br-mobile {
    display: none;
}
.question {
    grid-area: 1/1/2/2;
}
.heading {
    grid-area: 2/1/3/2;
}
.tarot {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    height: auto;
    padding: 0;
}
.tarot_mob {
    display: block;
}
.crystal, .tarot_img {
    display: none;
}
.bag img {
    width: 250px;
    height: auto;
}
.candle img {
    width: 300px;
    height: auto;
}
.title-tarot {
    grid-area: 2/1/3/2;
}
.cards {
    grid-area: 3/1/4/2;
}
.flowers {
    grid-area: 4/1/5/2;
}
.potion {
    justify-self: center;
    align-self: center;
    padding: 5%;
}
.appeal {
    position: absolute;
    top: 135vh;
    left: 16%;
    width: 250px;
    height: 90px;
    padding: 4px;
    font-size: 16px;
}
.runes {
    height: auto;
    width: 100%;
    grid-template-columns: auto;
    grid-template-rows: repeat(4, auto);
}
.candle img {
    max-width: 350px;
}
.exercise {
    grid-area: 1/1/2/2;
    text-align: center;
}
.exercise>p {
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin: 3%;
    text-align: center;
}
.candle {
    grid-area: 2/1/3/2;
}
.lenormand {
    height: auto;
    width: 100%;
    grid-template-columns: auto;
    grid-template-rows: repeat(5, auto);
}
.title-lenormand {
    padding: 0;
    justify-self: center;
    text-align: center;
}
.lenormand h3 {
    font-size: 1.5rem;
    font-weight: 600;
}
.lenormand-appeal {
    padding-bottom: 30px;
}
.lenormand-button {
    padding: 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    margin-left: 10px;
}
.layout {
    justify-self: center;
    align-self: center;
    text-align: center;
    padding: 5% 0;
}
.layout img, .lenormand-card img {
    width: 60%;
}
.lenormand-appeal {
    text-align: center;
    justify-self: center;
}
.lenormand-card {
    text-align: center;
}
.lenormand-exercise {
    margin: 0;
    padding: 0 10px;
    text-align: center;
}
.lenormand-exercise>p {
    padding: 0;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.2rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
}
.contacts h2 {
    font-size: 56px;
    letter-spacing: 1px;
    margin: 5% 5% 55% 0;
    text-align: center;
}
.contacts {
    height: auto;
    grid-template-rows: auto auto;
}
.bottom {
    height: auto;
    font-size: 1rem; 
    line-height: 2rem;
    grid-template-rows: 50% 50%;
    grid-template-columns: 37% 21% 21% 21%;
}
.bottom-forma {
    grid-area: 1/1/3/2;
}
.bottom-img img {
    width: 50px;
    height: 50px;
}
.bottom button {
    width: 75px;
    height: 75px;
    font-size: 0.8em;
    margin-top: 7px;
    margin-left: 7px;
}
.pc img {
    width: 32px;
    height: 32px;
}
/*HIT*/
body.hit {
    height: auto;
    position: relative;
    grid-template-rows: auto auto auto;
    min-height: 100vh;
}
footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #a60311;
}
header {
    font-size: 1rem;
}
.logo {
    width: 8vh;
    top: 5px;
    left: 2rem;
}
.luck h1 {
    padding: 15px;
    font-size: 1.7rem;
    line-height: 2.2rem;
    font-weight: 600;
}
main.luck {
    font-size: 24px;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    padding: 15px;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}
main.info-layout {
    padding: 2%;
}
.card-layout {
grid-area: 4/1/5/2;
text-align: center;
}
.card-layout img {
    width: 60%;
    padding: 15px;
}
/*GAMBURGER*/
.nope {
    display: none;
}
.menu-toggle,
.mobile-menu {
    display: none;
}
.mobile-nav {
    display: block;
    position: relative;
    z-index: 1000;
    width: 150px;
    margin-left: 150px;
}
.menu-toggle {
    display: block;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #ffc643;
}
.mobile-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #51594c;
}
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu li {
    padding: 12px 20px;
    border-bottom: 1px solid #ffc643;
}
.mobile-menu.active {
    display: block;
}
}