@import url('https://fonts.cdnfonts.com/css/retroica');
/* font-family: 'Retroica', sans-serif; */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/* // <weight>: Use a value from 200 to 1000
// <uniquifier>: Use a unique and descriptive class name

.nunito-<uniquifier> {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */


/* index style starts ---------------------- */
* {
    font-family: "Nunito", sans-serif;
    box-sizing: border-box;
    color: white;
}

@keyframes colorBlink {
    50% {
        color: white;
    }

    100% {
        color: #0B4187;
    }
}

@keyframes glowing-back {
    from {
        box-shadow: 0px 0px 100px blue;
    }

    to {
        box-shadow: 0px 0px 100px #0B4187;
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 400% 50%;
    }
}

@keyframes verticalFlow {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 400%;
    }
}

body {
    margin: 0px;
    background: url("img/web-bg.gif");
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: clamp(0.313rem, -3.984rem + 21.48vw, 17.5rem);
    padding-right: clamp(0.313rem, -3.984rem + 21.48vw, 17.5rem);
    transition: 1s;
    scroll-behavior: smooth;
}

@media (max-width: 1463px) {
    .index-2-body {
        padding: clamp(0.313rem, -1.44rem + 8.79vw, 6.25rem) !important;
    }
}

.index-body {
    background-image: url("img/web-bg.jpg") !important;
}

p {
    text-shadow: 3px 2px 0 #0B4187;
}

.yin-index {
    height: 700px;
    width: 700px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.enter-container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(6, 100px);
}

.enter-container div {
    text-align: center;
    grid-area: 3/6/6/10;
}

.enter-container h1,
.wiki-logo h1 {
    padding: 0px 10px 0px 10px;
    margin: 0;
    font-size: clamp(1.875rem, 0.972rem + 4.53vw, 5.5rem);
    font-family: 'Retroica', sans-serif;
    color: white;
    background: linear-gradient(180deg,
            #f8faff,
            /* very light blue / almost white */
            #75bcff,
            /* pure white */
            #52abff
            /* soft blue at the bottom */
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.enter-container p {
    margin: 0px;
    color: #FFFFFF;
    text-shadow: 3px 2px 0 #0B4187;
}

.enter-container a {
    color: yellow;
    cursor: pointer;
    font-size: 26px;
    font-weight: bold;
}

.enter-container a:hover {
    color: rgb(190, 190, 0);
}

@media (max-width: 900px) {
    .enter-container div {
        grid-column: 1/11;
    }
}

/* index2 style starts------------------ */
marquee p {
    font-size: 11px;
}
/* for index2loading  */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9669; 
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


#loader img {
    width: 150px; 
    filter: drop-shadow(0px 20px 30px rgb(255, 255, 255));
}


.index2-container {
    background-color: black;
    border: 3px solid white;
    animation: glowing-back 2s infinite alternate;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(16, 80px);
}

.item {
    /* background-color: gray; */
    border: 2px dashed #0B4187;
    border-radius: 10px;
}

.top-bar {
    grid-area: 1/1/3/11;
}

.about-yin {
    grid-area: 3/1/4/8;
}

.music-container {
    grid-area: 3/8/4/11;
}

.appearance-small {
    grid-area: 4/1/7/4;
}

.background-yin {
    grid-area: 4/4/7/8;
    background-image: url("img/yinbgremoved2.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.chat-box {
    grid-area: 4/8/7/11;
}

.personality {
    grid-area: 7/1/10/6;
    background-image: url("img/yinbgremoved.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.abilities {
    grid-area: 7/6/10/11;
}

.part-in-the-story-btn {
    grid-area: 10/1/11/11;
    background-image: url("img/partinthestorygif.gif");
}

.appearance-big-btn {
    grid-area: 11/1/12/11;
    background-image: url("img/appearance.gif");
}

.gallery-btn {
    grid-area: 12/1/13/11;
    background-image: url("img/gallerygif.gif");
}

.trivia {
    grid-area: 13/1/15/5;
}

.voting {
    grid-area: 13/5/15/8;
}

.moon {
    grid-area: 13/8/15/11;
}

.gifs-yin {
    grid-area: 15/1/16/11;
}

.footer {
    grid-area: 16/1/17/11;
}


/* ------------------------- */
.top-bar {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0px 20px;
    justify-items: center;
    align-items: center;
}

.top-bar div {
    /* background-color: gray; */
    /* border: 3px solid green; */
}

.pp-yin img {
    height: 157px;
    width: 157px;
    border-radius: 10px;
}

.wiki-logo {
    text-align: center;
}



.wiki-logo p {
    margin: 0px;
    color: white;
    font-style: italic;
    font-size: 13px;
}

.nav-bar-res {
    display: none;
}

.nav-bar label {
    display: none;
}

.nav-bar {
    text-align: right;
}

.nav-bar a {
    color: white;
    cursor: pointer;
}

.nav-bar a:hover {
    color: lightblue;
}



/* -------------------- */
.about-yin,
.appearance-small,
.background-yin,
.personality,
.abilities,
.trivia {
    padding: 2px 7px 2px 7px;
}

.yin-young-img img {
    width: 120px;
    border-radius: 10px;
    float: right;
}

.abilities img {
    width: 180px;
    border-radius: 10px;

}


.about-yin h2,
.about-yin p,
.appearance-small p,
.appearance-small h2,
.background-yin p,
.background-yin h2,
.personality p,
.personality h2,
.abilities p,
.abilities h2 {
    margin: 0px;
}

.about-yin p,
.appearance-small p,
.background-yin p,
.abilities p,
.trivia p {
    font-size: 13px;
}

.personality p {
    font-size: 12px;
}

.background-yin p,
.personality p {
    letter-spacing: -0.67px;
}

.about-yin h2,
.appearance-small h2,
.background-yin h2,
.personality h2,
.abilities h2,
.trivia h2 {
    font-size: 22px;
}


/* --------------------- */
.music-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: center;
}

.audio-box {
    grid-area: 2/1/3/2;
}

.audio-box audio {
    width: 140px;
    padding: none;
    margin: none;
    background-color: none;
}

.audio-pic {
    grid-area: 1/2/3/3;
}

.audio-pic img {
    width: 70px;
    border-radius: 10px;
}

.controls button {
    border: none;
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
    background: none;
}

.controls button:hover {
    transform: scale(1.2);
}

.progress-container {
    width: 100%;
    height: 8px;
    background: #555;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.progress-filled {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #1e90ff);
    border-radius: 4px;
    transition: width 0.1s linear;
}

.controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}


/* ------------------------ */
.blinking-animation {
    color: white;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #0B4187, #00BFFF, #FFFFFF, #0B4187, #00BFFF);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 12s linear infinite;
}

.index2-grid-btn {
    display: grid;
    justify-content: center;
    align-content: center;
}

.index2-grid-btn a:hover {
    animation-play-state: paused;

}

/* ------------ */
.gifs-yin {
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    grid-gap: 7px 4px;
}

.gifs-yin img {
    width: 100px;
}


/* ------------------- */
.footer {
    display: grid;
    justify-content: center;
    align-content: center;
}



/* gallery design starts ------------- */
.gallery-section {
    background-color: black;
    border: 3px solid white;
    animation: glowing-back 2s infinite alternate;
    border-radius: 10px;
    padding: 10px;

}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center;
    align-items: center;
    grid-gap: 15px 15px;
}

.gallery-title {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 20px 0px 40px 0px;
}

.gallery-title h1 {
    font-family: 'Retroica', sans-serif;
}

.grid-gallery-item {
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #1C1F32 0%, #121424 50%, #0A0B1A 100%);
    border-radius: 10px;
}

.gallery-container img {
    width: 100%;
    border-radius: 10px;
}

.go-home {
    position: fixed;
    right: 30px;
    bottom: 20px;
}

.go-home a {
    color: white;
}

@media (max-width: 1116px) {
    .index2-container {
        grid-template-rows: repeat(20, 80px) auto 80px;
    }

    .top-bar {
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(10, 10%);
        grid-template-rows: repeat(5, 20%);
        grid-gap: 0px;
    }

    .pp-yin {
        grid-area: 1/1/6/3;
    }

    .wiki-logo {
        grid-area: 1/3/4/11;
        align-self: center;
        justify-self: center;
    }

    .nav-bar br {
        display: none;
    }

    .nav-bar {
        grid-area: 4/3/6/11;
        display: grid;
        justify-self: right;
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        justify-items: center;
        align-items: center;
        border: 2px dashed #0B4187;
    }

    .background-yin p {
        letter-spacing: -1px;
    }

    /* --------------------- */
    /* .about-yin {
        grid-area: 3/1/4/11;
    }

    .music-container {
        grid-area: 13/1/14/11;
    }

    .appearance-small {
        grid-area: 4/1/8/6;
    }

    .background-yin {
        grid-area: 4/6/8/11;
    }

    .chat-box {
        grid-area: 14/1/17/5;
    }

    .personality {
        grid-area: 8/1/13/6;
    }

    .abilities {
        grid-area: 8/6/13/11;
    }

    .part-in-the-story-btn {
        grid-area: 14/5/15/11;
    }

    .appearance-big-btn {
        grid-area: 15/5/16/11;
    }

    .gallery-btn {
        grid-area: 16/5/17/11;
    }

    .trivia {
        grid-area: 17/1/19/11;
    }

    .voting {
        grid-area: 19/1/21/6;
    }

    .moon {
        grid-area: 19/6/21/11;
    }

    .gifs-yin {
        grid-area: 21/1/22/11;
    }

    .footer {
        grid-area: 22/1/23/11;
    } */
}

@media (max-width: 880px) {
    .nav-bar {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        border: none;
    }

    .menuLink {
        display: none;
    }

    .nav-bar label {
        display: inline-block;
    }

    .nav-bar-res {
        position: fixed;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        text-align: center;
        background-color: white;
        border-radius: 10px;
        z-index: 100;
        width: 100%;
        top: -260px;
        left: 50%;
        transform: translateX(-50%);
        transition: 1s;
    }

    .nav-bar-res a,
    .nav-bar-res label {
        color: black;
        padding: 14px 18px;
        width: 100%;

    }

    .nav-bar-res a:hover {
        background-color: #0B4187;
    }

    #toggle-trigger:checked+.toggle-button+.nav-bar-res {
        top: 0px;
    }
}

/* @media (max-width: 580px) {
    .index2-container {
        grid-template-rows: repeat(23, 80px) auto repeat(2, 80px);
    }

    .about-yin {
        grid-row: 3/5;
    }

    .music-container {
        grid-area: 16/1/17/11;
    }

    .appearance-small {
        grid-area: 5/1/10/6;
    }

    .background-yin {
        grid-area: 5/6/10/11;
    }

    .chat-box {
        grid-area: 17/1/20/5;
    }

    .personality {
        grid-area: 10/1/16/6;
    }

    .abilities {
        grid-area: 10/6/16/11;
    }

    .part-in-the-story-btn {
        grid-area: 17/5/18/11;
    }

    .appearance-big-btn {
        grid-area: 18/5/19/11;
    }

    .gallery-btn {
        grid-area: 19/5/20/11;
    }

    .trivia {
        grid-area: 20/1/22/11;
    }

    .voting {
        grid-area: 22/1/24/6;
    }

    .moon {
        grid-area: 22/6/24/11;
    }

    .gifs-yin {
        grid-area: 24/1/25/11;
    }

    .footer {
        grid-area: 26/1/27/11;
    }

} */

@media (max-width: 1030px) {
    .index2-container {
        grid-template-rows: repeat(20, auto);
    }

    .about-yin {
        grid-column: 1/11;
        grid-row: 3/4;
    }

    .music-container {
        grid-area: 8/1/9/11;
        padding: 10px 0px;
    }

    .appearance-small {
        grid-area: 4/1/5/11;
    }

    .background-yin {
        grid-area: 5/1/6/11;
    }

    .chat-box {
        grid-area: 9/1/10/11;
        height: 300px;
    }

    .personality {
        grid-area: 6/1/7/11;
    }

    .abilities {
        grid-area: 7/1/8/11;
    }

    .part-in-the-story-btn {
        grid-area: 10/1/11/11;
        padding: 17px 0px;
    }

    .appearance-big-btn {
        grid-area: 11/1/12/11;
        padding: 17px 0px;
    }

    .gallery-btn {
        grid-area: 12/1/13/11;
        padding: 17px 0px;
    }

    .trivia {
        grid-area: 13/1/14/11;
    }

    .voting {
        grid-area: 14/1/15/11;
        padding: 10px 0px;
    }

    .moon {
        grid-area: 15/1/16/11;
        padding: 10px 0px;
    }

    .gifs-yin {
        grid-area: 16/1/17/11;
        padding: 13px 0px;
    }

    .footer {
        text-align: center;
        grid-area: 17/1/18/11;
        padding: 26px 6px;
    }

}

@media (max-width: 560px) {

    .wiki-logo,
    .nav-bar {
        grid-column: 5/11;
    }
}

@media (max-width: 395px) {
    .pp-yin img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width:355px) {
    .pp-yin img {
        width: 80px;
        height: 80px;
    }

}

/* appearances style starts here */
.appearance-container {
    background-color: black;
    border: 3px solid white;
    animation: glowing-back 2s infinite alternate;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(8, 80px);
}

.appearance-grid-child {
    /* background-color: #555; */
    border: 2px dashed #0B4187;
    border-radius: 10px;
}

.appearance-title {
    grid-area: 1/1/2/11;
    text-align: center;
}

.appearance-title h1,
.table-of-contents h2 {
    font-family: 'Retroica', sans-serif;

}

.appearance-content {
    height: 560px;
    width: 100%;
    grid-area: 2/1/9/8;
    padding: 10px;
    background-image: url("img/apperance-content-bg-with-bg.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: 2s;
}

.appearance-content p {
    font-size: 13px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #eee;
}

::-webkit-scrollbar-thumb {
    background-color: #0B4187;
}

.table-of-contents {
    grid-area: 2/8/6/11;
    padding: 10px;
}


.table-of-contents ol {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 35px);
    align-items: center;
}

.table-of-contents a {
    display: inline-block;
    padding: 10px 0px 10px 0px;
    font-size: 14px;
}

.go-table-of-contents {
    display: none;
}

.appearance-idle-box {
    grid-area: 6/8/9/11;
    padding: 4px;
    display: grid;
    justify-content: center;
    align-content: center;
}

.appearance-idle-box img {
    height: clamp(8.75rem, 7.349rem + 7.03vw, 14.375rem);
    display: block;
    border-radius: 10px;
}

@media (max-width: 1100px) {
    .appearance-container {
        grid-template-rows: repeat(11, 87px);
    }

    .table-of-contents {
        grid-area: 2/1/5/6;
    }

    .appearance-idle-box {
        grid-area: 2/6/5/11;
    }

    .appearance-content {
        grid-area: 5/1/12/11;
    }

    .table-of-contents ol {
        padding-left: 13px;
        grid-template-rows: repeat(6, 30px);
    }

    .go-table-of-contents {
        display: block;
        position: fixed;
        left: 30px;
        bottom: 20px;
    }

    .table-of-contents a {
        padding: 5px 0px;
        letter-spacing: -1px;
        font-size: 13px;
    }
}




/* contact style starts here */
.contact-section {
    background-color: black;
    border: 3px solid white;
    animation: glowing-back 2s infinite alternate;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(8, 80px);
}

.contact-title,
.contact-form,
.contact-container,
.maps {
    border: 2px dashed #0B4187;
}

.contact-title {
    padding: 20px;
    grid-area: 1/1/2/11;
    display: grid;
    justify-content: center;
    align-content: center;
}

.contact-title h1,
.contact-container h2,
.contact-form h2 {
    font-family: 'Retroica', sans-serif;
}

.contact-container {
    padding: 20px;
    grid-area: 2/1/4/6;
}

.maps {
    padding: 20px;
    border-radius: 10px;
    grid-area: 4/1/9/6;
}

.maps iframe {
    border-radius: 10px;
}

.contact-form {
    padding: 20px;
    grid-area: 2/6/9/11;
}

.contact-form input,
textarea {
    width: 100%;
    border: none;
    background-color: white;
    border: none;
    outline: none;
    color: black;
    padding: 2px 2px;
    font-weight: 700;
    border-radius: 5px;
}

.contact-form input {
    height: 35px;
}

.contact-form textarea {
    height: 200px;
}

.contact-form button {
    padding: 7px 22px;
    color: white;
    border: none;
    background-color: black;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 5px;
}

.contact-form button:hover {
    background-color: white;
    color: black;
}

@media (max-width: 913px) {
    .contact-section {
        grid-template-rows: repeat(15, 80px);
    }

    .contact-container {
        grid-column: 1/11;
    }

    .maps {
        grid-column: 1/11;
    }

    .contact-form {
        grid-column: 1/11;
        grid-row: 9/16;
    }
}