/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap&family=Pacifico&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body {
    background-color:#212121;
    color:white;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: clip;
}
/* page header  */
header {
    height: 100vh;
    padding: 20px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 25%;
    position: relative;
}
/* heading Title element */
header h2 {
    font-family: "Coiny", system-ui;
    font-weight: 400;
    margin-top: 10%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(252, 252, 252, 0.998);
    filter: drop-shadow(2px 2px 10px rgba(0, 4, 4, 0.778));
    background: linear-gradient(40deg, rgb(2, 11, 99), rgb(3, 95, 126), rgb(28, 155, 74), rgb(2, 12, 99));
    padding: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(1.5rem, calc(7vw + 0.5rem), 4rem);
    animation: text-fade linear;
    animation-timeline: view();
    animation-range: exit -100px;
}
header p {
    width: min(550px, 80vw);
    padding: min(15px, 5%);
    color: rgb(238, 244, 238);
    font-size: clamp(1rem, calc(2vw + 0.5rem), 1.5rem);
    font-weight: 600;
    font-style: italic;
    background: rgba(62, 84, 150, 0.142);
    backdrop-filter: blur(20px);
    border-radius: 3px;
    animation: text-fade linear;
    animation-timeline: view();
    animation-range: exit -100px;
}
header>.hint {
    font-family: "Coiny", system-ui;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 12px;
    border-radius: 20px;
    anchor-name: --scroll;
    position: relative;
    animation: text-fade linear;
    animation-timeline: view();
    animation-range: exit -150px;
}
header>.hint::after {
    content: "⋙";
    position: absolute;
    height: inherit;
    width: inherit;
    inset: 35px 0 0 0;
    position-anchor: --scroll;
    position-area: bottom center;
    z-index: 1;
    font-size: 2rem;
    transform: rotateZ(90deg);
}
/* background image for header */
header>img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: -9;
    inset: 0 0 0 0;
    animation: fade-in linear;
    animation-timeline: view();
    animation-range: exit;
}
@keyframes text-fade {
    25% {opacity: 1;}
    75%,100% {opacity: 0;}
}
@keyframes fade-in {
    25% {opacity: 1;}
    100% {
        opacity: 0;
        transform: scale(2);
    }
}
/* navigation bar for BigScreens*/
.nav_bar {
    position: sticky;
    top: 0;
    background-color: rgba(135, 207, 235, 0.476);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: space-between;
    gap: clamp(5px, calc(1vw + 1px), 9px);
}
/* menu-box for Smallscreens */
.controll-menubox {position: fixed;}
.nav_bar menu {
    display: flex;
    align-items: center;
    justify-content: start;
    width: max-content;
    overflow-x: hidden;
}
.nav_bar menu li {
    list-style: none;
    transition: background 500ms ease;
    padding-inline: min(20px, 5vw);
    padding-block: 15px;
    cursor: pointer;
}
.nav_bar menu li a {
    text-decoration: none;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}
.nav_bar menu li:hover {
    background: rgba(135, 207, 235, 0.3);
    border-bottom: 2px solid whitesmoke;
}
.nav_bar menu:last-child {padding-right: 15px;}
.nav_bar img {margin-left: min(30px, 2.5%);}
/* kural content page css */
.content-container {
    width: 95vw;
    height: 90vh;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: url(Assets/background_paper.png) no-repeat;
    background-size: cover;
    padding: min(15px, 1.5vw);
    margin-top: 30px;
    filter: drop-shadow(1px 1px 10px black);
    overflow-x: clip;
}
.search_tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}
.search_tags>label {
    align-self: flex-start;
    margin-left: 40px;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px;
    color: rgb(62, 44, 8);
}
.search_tags>.tags-box {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.search_tags>.tags-box>button {
    border: none;
    background: rgba(100, 65, 16, 0.663);
    outline: none;
    padding: 10px;
    color: white;
    font-size: min(14px, 3vw);
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background 400ms;
}
.search_tags>.tags-box>button:hover
 {
    background: rgba(100, 65, 16, 0.893);
    box-shadow: 1px 1px 5px 3px rgb(0, 0, 0, 0.3);
}
.search_tags>.tags-box>button:active {scale: 0.95;}
/* kurals showcase pannel css */
.kural-container-main {
    width: 100%;
    height: 90%;
    border: 1px solid white;
    margin-top: min(20px, 5%);
    padding: min(15px, 2%);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}
.kural-container-main::-webkit-scrollbar,
.kural-container>.text-bg::-webkit-scrollbar {appearance: none;}
.kural-container-main::-webkit-scrollbar-thumb,
.kural-container>.text-bg::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, transparent, rgb(80, 58, 16));
    border-radius: 5px;
    cursor: pointer;
}
.kural-container>.text-bg::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, transparent, rgb(80, 58, 16));
}
.kural-container-main h4 {
    padding: 10px;
    margin: 10px 0px;
    color: rgb(51, 33, 7);
    border-bottom: 2px solid rgb(151, 122, 57);
    width: 100%;
}
.kural-container-main>h4:last-child { margin-bottom: 30px; }
.kural-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: max-content;
    gap: clamp(0.5rem, 50vw, 30px);
}
.ErrorMsg {
    align-items: center;
    justify-content: center;
    color: red;
    font-size: 1.5rem;
    font-weight: 600;
}

.kural-container>.text-bg {
    background: url(Assets/kural_card.png) no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100px;
    width: 550px;
    overflow-x: auto;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 500ms linear;
}
.kural-container>.text-bg.show {
    opacity: 1;
    transform: translateX(0px);
}
.kural-container>.text-bg>.text {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    inset: 0;
    top: 50%;
    left: calc(50% + 50px);
    transform: translate(-50%, -50%);
    width: max-content;
    color: rgb(43, 30, 2);
    font-size: clamp(0.6rem, 4.5vw, 1.125rem);
}
/* thiruvalluvar history details element css */
.About {
    padding: 20px;
    width: 100vw;
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
}
.image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.image-card>figcaption { font-style: italic;}
.About>.image-card>.image-box {
    display: flex;
    width: 300px;
    aspect-ratio: 1;
    position: relative;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    animation: VallurImageShow linear;
    animation-timeline: view();
    animation-range: 40% 70%;
    cursor: pointer;
    anchor-name: --image-line;
}
.About>.image-card>.image-box>img {
    position: absolute;
    inset: 0 0 0 0;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    backface-visibility: hidden;
    filter: drop-shadow(2px 2px 10px black);
}
.About>.image-card>.image-box>img:first-child {transform: rotateY(180deg);}

@keyframes VallurImageShow {
    10% {transform: rotateY(80deg);}
    50%,100% {transform: rotateY(180deg);}
}
.About>.content {
    width: min(650px, 80%);
    text-align: start;
    padding: min(25px, 5%);
    font-size: clamp(14px, 3vw, 1rem);
    border-radius: 3px;
    background: rgba(67, 92, 168, 0.303);
    backdrop-filter: blur(30px);
    filter: drop-shadow(2px 2px 20px rgb(75, 142, 197));
    animation: textshow linear;
    animation-timeline: view();
    animation-range: entry 0%;
}


@keyframes textshow {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* footer page for AboutUs */
.site-footer {
    background-color: rgba(22, 21, 21, 0.422);
    margin-top: 30px;
    padding: 10px;
    width: 100vw;
    height: max-content;
    display: flex;
    box-shadow: 0px 0px 20px black;
    flex-direction: column;
}
.footer-content {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    justify-content: flex-start;
}
.footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}
.footer-section>h4{
    margin-bottom: 5px;
    position: relative;
    padding: 5px;
}
.footer-section>h4::after{
    content:"";
    width: 55%;
    height: 2px;
    position: absolute;
    inset: 95% 0 0 25%;
    border-radius:5px ;
    z-index: 3;
    background-color: rgb(55, 88, 145);
}
.footer-section>p a,.footer-section>a{
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0 5px;
    color:rgb(97, 125, 210);
}
/* social link update */
.footer-section>.footer-social-link{
    display: flex;
    gap:1rem;
    transition:all 400ms linear;
}
.footer-social-link>.github,.footer-social-link>.linkedin {
    background: url(Assets/Github_logo.png) no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
    width: 30px;
    aspect-ratio: 1;
}
.footer-social-link>.linkedin {
    background: url(Assets/linkedin_logo.png) no-repeat;
    background-size: cover;
}
.footer-social-link>a:hover {
    filter: drop-shadow(1px 1px 20px rgba(255, 255, 255, 0.419));
}

.footer-section a:hover{
border-bottom: 2px solid wheat;
}
.footer-bottom {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.footer-bottom::after {
    width: 80%;
    content: "";
    inset: -25% 0% 0% 10%;
    text-align: center;
    height: 2px;
    background-color: aliceblue;
    position: absolute;
}

/* Media query Responsive WebDesign */
@media screen and (max-width:780px){
    .About {
        flex-direction: column;
        padding: 20px 5px;
    }
    .About>.content {width: 100%;}
    .About>.image-card>.image-box {animation-range: 40% 100%;}
}
/* media query for SmallMobile screen  */
@media screen and (max-width:390px) {.kural-container>.text-bg {width: 100%;}}
/* Media query for MediumMobile */
@media screen and (max-width:580px) {
    :root {overflow-x: hidden;}
    .nav_bar {
        align-self: flex-start;
        justify-content: start;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        position: fixed;
        height: 100vh;
        width: 45vw;
        transition: transform 600ms ease;
        transform: translateX(-110%);
    }
    .nav_bar.navshow {transform: translateX(0%);}
    /* controll menubox */
    .controll-menubox {
        padding: 2px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        inset: 20px 0 0 15px;
        z-index: 11;
        background: rgba(144, 178, 180, 0.557);
        backdrop-filter: blur(20px);
        height: max-content;
        width: max-content;
        border-radius: 2px;
        transition: all 400ms linear;
    }
    .controll-menubox.movebox {inset: 20px 0 0 30%;}
    .controll-menubox>.box {
        margin: 2px;
        background-color: rgba(15, 41, 44, 0.775);
        height: 5px;
        width: 30px;
        transition: transform 400ms ease;
    }
    .controll-menubox .box.change:nth-child(1) {
        transform: rotateZ(45deg) translate(7px, 7px);
    }
    .controll-menubox .box.change:nth-child(2) {opacity: 0;}
    .controll-menubox .box.change:nth-child(3) {
        transform: rotateZ(-45deg) translate(6px, -6px);
    }
    .nav_bar menu {
        margin-top: 30px;
        flex-direction: column;
        display: flex;
        align-items: start;
        width: 100%;
    }
    .nav_bar menu li {
        padding: 20px;
        width: 100%;
    }
    .search_tags {flex-direction: column;}
    .content-container {width: 100vw;}
    .kural-container {height: 50vh;}
    .kural-container>.text-bg {
        background: url(Assets/kural_card_mobile.png) no-repeat;
        background-size: cover;
        background-position: center;
        zoom: 80%;
        opacity: 0;
    }
    .kural-container>.text-bg>.text {
        left: calc(50% + 40px);
        line-height: 1.7;
    }
}