@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo&display=swap');
*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}
body {
    /* overflow: scroll; */
    overflow-x: hidden;
  
}

 /* NavBar Start */

 #main{
    color:rgb(233, 238, 247);
    /* background: linear-gradient(rgba(0, 0, 0, 0.3), hsl(203, 100%, 13%, 1)); */
    background: linear-gradient(rgba(0, 0, 0, 0.4), hsl(180, 1%, 23%));
}

.container img{
    width:180px;
}

.container .icons{
    margin-right: 30px;
}

.container .icons a{
    padding: 0 10px;
    font-size: 20px;
}
.container .menuitems{
    color:white;
}
.container .menuitems:hover {
    color: #1aaee8 !important;
  }

/* NavBar End */

/* Start heading section */

.container-fluid{
    background-color:#1e013f;
}

#header {
    margin:0;
    padding-top:50px;
    background:url(./elementPhoto/purple.jpg);
    background-repeat: no-repeat;
    background-size:cover;
}
#head{
    padding: 30px 20px;
}
#head h1 {
    /* letter-spacing:.1em; */
    color:rgb(132, 44, 215);
    /* font-weight:lighter; */
    font-size: 4em;
    font-family: 'Libre Baskerville', serif;
    animation: text 5s;
}
#head p {
    font-family: 'Cardo', serif;
    font-size:0.9em;
    letter-spacing:.07em;
    color:antiquewhite;
    animation-name: text2;
    animation-duration: 5s;
}
@keyframes text{
    from{color: #f4f5f9;}
    to{color:rgb(132,44,215);}
}
@keyframes text2{
    from{color:#2d0755}
    to{color:#f4f5f9}
}

.elementNav{
    /* display:flex; */
    padding-top:100px;
    padding: 0;
    
}
.elementNav ul{
    display:inline;
    text-align:center;
    justify-content: center;
}

.elementNav a{
    padding: 10px 10px;
    margin-bottom: 5px;
    text-decoration: none;
    text-align: center;
    display: block;
    background-color: #1b0536;
    border-bottom: 1px solid #2d0755;
    border-radius: 20px;
    color:#ffffff;
}
    
.elementNav ul{
    list-style-type: none;
    
}
.elementNav a:link{
    color:#ffffff;
}
.elementNav a:hover{
    color:#eeedfb;
    background-color: #5c3e7b;
}

/* End heading section */

.demo{
    /* background-color:#5f0cc5; */
    color:white;
    padding-bottom: 20px;
}

.demo .info h1{
    font-family: 'Libre Baskerville', serif;
}

p{
    font-family: 'Cardo', serif;
}

/* Start  Info*/

.info { 
    text-align: center;
    justify-content: center;
    padding: 40px 60px;;
    animation-name: text2;
    animation-duration: 2s;
}
.info h1{
    color:rgb(132, 44, 215);
    animation-name: text;
    animation-duration: 2s;
}
.info p{
    font-size: 20px;
    animation-name: text2;
    animation-duration: 2s;
}

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

.pic img{
    width: 250px;
    height: auto;
}
/* End Info */



/*  4Signs Start */
#sign{
    padding: 10px 20px;
    color:antiquewhite;
    background: url('./elementPhoto/pur.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    box-shadow: inset 30px 30px 20px #1e013f;
    font-size:large;
    animation-name: text2;
    animation-duration: 4s;
    margin: 30px 0;
    border:none;
}
#signpic{
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
}
#signpic img{
    width: 250px;
    height: auto;
}
#sign h2,h3{
    font-weight:bold;
    text-align:center;
    font-family: 'Libre Baskerville', serif;
}

#sign p{
    font-size: 20px;
}


/* 4Signs End */

/* tarot Start */

.tarot{
    padding: 20px 30px;
    text-align: left;
    color:#BC61F5 ;
    font-size: larger;
    /* margin-top: 50px; */
    /* margin-bottom: 0px; */
    /* background: url('./elementPhoto/pur.jpg'); */
    background-repeat: no-repeat;
    background-size: cover;
}
.tarot h1{
    color:#BC61F5;
    font-family: 'Libre Baskerville', serif;
}

.tarot h4{
    color: #BC61F5;
    font-family: 'Libre Baskerville', serif;
}
.tarot .tarotpic{
    margin-top:10px;
}
.tarot .col-lg-6 #tarotpic img{
    width: 250px;
    height:auto;
}
.tarot .text{
    text-align:center;
    font-size: large;
    
    color:#BC61F5;
    font-weight:bold;
}

.tarot .epic{
    /* line-height: 50px; */
    margin-top: 20px;
    text-align:center;
    font-size: large;
    
    color:#BC61F5;
    font-weight:bold;
}

.link1{
    text-align: center;
    background-color: #2d0755;
    border:1px solid #1b0536;
    border-radius: 20px;
    padding:10px 15px 15px 15px;
    /* float:right; */
    margin:0;
    box-sizing: border-box;
    box-shadow:inset -3px -5px 5px #9b48cf;
}
.link1 a{
    text-decoration: none;
    text-emphasis: none;
    color:#BC61F5;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.link1 a:hover{
    color:#d2dc42;
}

/* tarot End */

/* See More Start */

.extra{
    display: none;
}
input[type="checkbox"]{
    height: 7px;
    display: block;
    appearance: none;
}
label{
    position: relative;
    padding: 5px;
    background-color: #1b3050;
    color:#fff;
    cursor: pointer;
    border-radius: 2px;
    width: 150px;
    margin-bottom: 30px;
}
label:before{
    content: "Read More....";

}
input[type="checkbox" ]:checked~label:before{
    content: "Read Less....";
}
.extra:has(~input[type="checkbox" ]:checked){
    display: inline-block;
}
.extra1{
    display: none;
}
.extra1:has(~input[type="checkbox" ]:checked){
    display: inline-block;
}
.extra2{
    display: none;
}
.extra2:has(~input[type="checkbox" ]:checked){
    display: inline-block;
}
.extra3{
    display: none;
}
.extra3:has(~input[type="checkbox" ]:checked){
    display: inline-block;
}

/* See More End */

  /* Start Footer */
  #container-fluid{
    width: 100%;
    height: auto;
    
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(7, 5, 16);
}

#container-fluid .row{
    padding: 20px;
}

.logo img{
    width: 30%;
}

.link{
    padding-top: 10px;
}

.link a{
    padding: 3px;
    text-decoration: none;
    color: rgb(244, 245, 245);
    font-style: italic;
    font-size: 16px;
}
.link a:hover{
    color: #22aca7;
}

.follow{
    padding-top: 30px;
}
.follow a{
    color: rgb(250, 244, 246);
    /* margin-top: 20px; */
    margin-right: 10px;
    font-size:20px;
}
.follow a:hover{
    color:rgb(60, 137, 181);
}

#last{
    align-items: center;
    justify-content: center;
}

.para{
    margin-top: 25px;
    padding: 5px;
    color: aliceblue;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.para h3{
    text-align: left;
}

.privacy{
    padding: 5px;
    margin-top: 25px;
}
.privacy a{
    text-decoration: none;
    color: rgb(241, 239, 247);
}
.privacy a:hover{
    color: rgb(23, 14, 126);
}
.like{
    padding: 5px;
    margin-top: 10px;
    color: aliceblue;
}
.like i{
    font-size: 20px;
}
.like .fa-thumbs-up:hover{
    color:aquamarine;
}
.like .fa-thumbs-down:hover{
    color:rgb(231, 61, 61);
}
.cross{
    padding: 5px;
    color: aliceblue;
}
.copy{
    /* margin-top: 120px; */
    color: rgb(250, 251, 252);
}


/* End Footer */


/* ------------Start For Desktop ------------------------------------------------------------------- */
@media only screen and (min-width:768px){
    body{
        overflow-x: hidden;
    }
    /* NavBar Start */

    #main{
        color:rgb(233, 238, 247);
        /* background: linear-gradient(rgba(0, 0, 0, 0.3), hsl(203, 100%, 13%, 1)); */
        background: linear-gradient(rgba(0, 0, 0, 0.4), hsl(180, 1%, 23%));
    }

    .container img{
        width:180px;
    }

    .container .icons{
        margin-right: 30px;
    }

    .container .icons a{
        padding: 0 10px;
        font-size: 20px;
    }
    .container .menuitems{
        color:white;
    }
    .container .menuitems:hover {
        color: #1aaee8 !important;
      }

    /* NavBar End */

    /* Start heading section */

    #header {
        /* margin-top: 70px; */
        padding:50px;
        background:url(./elementPhoto/purple.jpg);
        background-repeat: no-repeat;
        background-size:cover;
        
    }
    #head{
        padding: 70px 30px;
    }
    #header .col-md-4{
        padding: 90px 30px 0 0;
    }
   
    #head h1 {
        font-size:1.8em;
        letter-spacing:.1em;
        color:rgb(132, 44, 215);
        font-weight:lighter;
        font-size:  5em;
        font-family: 'Libre Baskerville', serif;
        animation: text 0.8s;
    }

    #head p {
        /* padding:10px 20px 0 2px; */
        font-size:20px;
        letter-spacing:.07em;
        color:antiquewhite;
        animation-name: text2;
        animation-duration: 0.8s;
        font-family: 'Cardo', serif;
    }

    nav{
        margin:auto;
    }

    .elementNav a{
        /* padding: 10px 30px; */
        margin-bottom: 5px;
        text-decoration: none;
        text-align: center;
        display: block;
        /* background-color: #5f0cc5; */
        border-bottom: 1px solid #2d0755;
        border-radius: 20px;
        color:#ffffff;
    }
    
    .elementNav ul{
        list-style-type: none;
    
    }



    /* End heading section */

    /* Start  Info*/

    .info { 
        text-align: center;
        justify-content: center;
        padding: 50px 70px;
        
    }

    .info p{
        font-size: 22px;
    }
    /* End Info */

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

    .pic img{
        width: 500px;
        height: auto;
    }

    /*  4Signs Start */
    #sign{
        padding: 80px 20px;
        color:antiquewhite;
        
        font-size:large;
        animation-name: text2;
        animation-duration: 4s;
    }
    #sign h2,h3{
        font-weight:bold;
        text-align: center;
        font-family: 'Libre Baskerville', serif;
    }
    #sign{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    #sign img{
        width: 300px;
        height: auto;
    }
    #sign #singinfo p{
        padding: 0 40px; 
    }


    /* 4Signs End */

    /* tarot Start */

    .tarot{
        /* background: url('./elementPhoto/pur.jpg'); */
        background-repeat: no-repeat;
        background-size: cover;
        padding: 30px 70px;
        text-align: left;
        color:#BC61F5 ;
        font-size: larger;
        /* margin-top: 50px; */
        /* margin-bottom: 0px; */
    }
    .tarot h1{
        color:#BC61F5;

    }

    .tarot h4{
        color: #BC61F5;
    }

    .tarot .col-lg-6 #tarotpic{
        display:flex;
        align-items: end;
        justify-content: end;
        margin-top: 35px;
    }

    .tarot .col-lg-6 #tarotpic img{
        width: 350px;
        height: 320px;
    }

    #signpic{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    #signpic img{
        width:300px;
    }

    .tarot .epic{
        /* line-height: 50px; */
        margin-top: 10%;
        text-align:left;
        font-size: large;
        
        color:#BC61F5;
        font-weight:bold;
    }

    .tarot h1,h4{
        margin-left: 35%;
    }

    .link1{
        text-align: center;
        background-color: #2d0755;
        border:1px solid #1b0536;
        border-radius: 20px;
        padding: 20px;
        /* float:right; */
        display:inline-block;
        box-sizing: border-box;
        box-shadow:inset -3px -5px 5px #9b48cf;
    }
    .link1 a{
        text-decoration: none;
        text-emphasis: none;
        color:#BC61F5;
        font-size: large;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
    }
    .link1 a:hover{
        color:#d2dc42;
    
    }

    #tarotpic{
        display: flex;
        align-items: left;
        justify-content: left;
    }

    /* tarot End */



    /* Start Footer */

    #container-fluid{
        width: 100%;
        height: auto;
        padding: 5px 10px;
        justify-content: space-evenly;
        align-items: center;
        background-color: rgb(7, 5, 16);
    }

    #container-fluid .row{
        padding: 10px 20px;
    }

    .logo img{
        width: 30%;
    }

    .link{
         padding-top: 10px;
    }

    .link a{
        padding: 3px;
        text-decoration: none;
        color: rgb(244, 245, 245);
        font-style: italic;
        font-size: 1.2em;
    }
    .link a:hover{
        color: #22aca7;
    }

    .follow{
        padding-top: 100px;
    }

    .follow a{
        color: rgb(250, 244, 246);
        margin-right: 10px;
        font-size:20px;
    }
    .follow a:hover{
        color:rgb(60, 137, 181);
    }

    .para{
        margin-top: 25px;
        padding: 5px;
        color: aliceblue;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    .para h3{
        text-align: left;
    }

    .privacy{
        padding: 5px;
        margin-top: 25px;
    }

    .privacy a{
        text-decoration: none;
        color: rgb(241, 239, 247);
    }

    .privacy a:hover{
        color: rgb(23, 14, 126);
    }

    .like{
        padding: 5px;
        margin-top: 10px;
        color: aliceblue;
    }

    .like i{
        font-size: 20px;
    }

    .like .fa-thumbs-up:hover{
        color:aquamarine;
    }

    .like .fa-thumbs-down:hover{
        color:rgb(231, 61, 61);
    }

    .cross{
        padding: 5px;
        color: aliceblue;
    }

    .copy{
        /* margin-top: 120px; */
        color: rgb(250, 251, 252);
    }


    /* End Footer */
}

/* -------------End For Desktop----------------------------------------------------------- */

@media(min-height: 1000px){
    .tarot h1,h4{
        margin-left:10%;
    }
    .tarot .col-lg-6 #tarotpic{
        display:flex;
        align-items: center;
        justify-content: center;
        margin-top: 35px;
    }
    .tarot .col-lg-6 .epic p,.link1{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    


}