* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;

    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

:root {
    --color-primary: #6c63ff;
    --color-success: #00bf8e;
    --color-warning: #f7c94b;
    --color-danger: #f75842;
    --color-danger-variant: rgba(247, 88, 66, 0.4);
    --color-white: #fff;
    --color-light: rgba(255, 255, 255, 0.7);
    --color-black: #000;
    --color-bg: #1f2641;
    --color-bg1: #2e3267;
    --color-bg2: #424890;

    --container-width-1g: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;

    --transition: all 400ms ease;

    --font-one: 'Noto Sans SC', sans-serif;
    --font-two: 'Josefin Sans', sans-serif;
}


body,
p,
div,
span,
ul,
li {
    box-sizing: border-box;
    font-family: var(--font-two);
}

/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100vh;
    background-color: #000;
    background-image: url('https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1517&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

h3 {
    font-size: 1.6rem;
}

a {
    text-decoration: none;
    color: #fff;
}

/* ==================== NAVBAR ==================== */
nav {
    background: rgba(255, 255, 255, 0.1);
    width: 100vw;
    height: 4rem;
    position: fixed;
    top: 0;
    z-index: 11;
}

/*  change navbar styles on scroll*/
.window-scroll {
    background: #9894e2;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.nav__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 6rem 0;
}

nav button {
    display: none;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    list-style-type: none;
}



.nav__menu a {
    font-size: 1rem;
    transition: all 400ms ease;
}

.nav__menu a:hover {
    color: #030516;
}

.action_btn {
    background-color: orange;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}


.action_btn:hover {
    scale: 1.05;
    color: #fff;
}

.action_btn:active {
    scale: 0.95;
}



section#hero {
    margin-top: 8rem;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    text-align: center;
    color: #fff;
    padding: 2rem;
}

#hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* ==================== CATEGORIES ==================== */


.categories__right {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.category {
    background: #424890;
    padding: 2rem;
    border-radius: 2rem;
    transition: all 400ms ease;
    text-decoration: none;

}

.category:hover {
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 1;
    cursor: pointer;
}

.category:nth-child(2) {
    background: #f75842;
}

.category:nth-child(3) {
    background: #00bf8e;
}

.category:nth-child(4) {
    background: #f7c94b;
}

.category:nth-child(5) {
    background: #00bf8e;
}



.category h4 {
    margin: 0.1rem 0 .7rem;
    color: white;
    font-size: 1.8rem;

}

.category p {
    font-size: 1rem;
    color: white;
}

.intro {
    border: 10px solid #88ff8c;
    margin-top: 4.5rem;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: lightpink;
    /* background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 90%,
            rgba(136, 255, 140, 1) 100%); */
    /*background-image: linear-gradient(to right bottom, #ffffff, #88ff8c);*/
    background-size: 20px 20px;
    padding: 50px 10px;
}



h1 {
    margin: 1rem;
    flex-grow: 0;
    flex-shrink: 1;
}

.intro-buttons {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hskpart {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.button {
    cursor: pointer;
    font-size: 15px;
    border: 3px solid #88ff8c;
    padding: 6px 10px 3px;
    background-color: #c4c2f0;
    color: black;
    border-radius: 10px;
    flex: 1 1 100%;
    margin-bottom: 10px;
}

.button:last-of-type {
    margin-bottom: 0;
}

.button:hover {
    border: 3px solid black;
}

.button:active {
    border: 3px solid #88ff8c;
}

.flashcards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
}

.flashcard {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    perspective: 1000px;
    /* Applies 3d effect on card flip */
}

.flashcard-inner {
    background-color: #9894e2;
    /* box-shadow: 0px 0px 5px #00ff00; */
    width: 100%;
    height: 100%;
    /* padding: 60px 40px; */
    transition: transform 0.6s, background-color 0.15s;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
}

.flashcard:hover {
    cursor: pointer;
}

.flashcard:hover .flashcard-inner {
    /* background-color: #57ff5d; */
    background-color: lightpink;
}

.flashcard.active {
    z-index: 10;
}

.flashcard.flipanimation .flashcard-inner {
    /* transform: rotateY(180deg); */
    transform: rotate3d(0, 1, 0, 180deg);
}

.flashcard .front {
    visibility: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

.flashcard .back {
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: rotateY(180deg);
    flex-grow: 1;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

.flashcard.flipanimation .front {
    visibility: hidden;
}

.flashcard.flipanimation .back {
    visibility: visible;
}

.front,
.back {
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.character {
    font-size: 60px;
    flex-grow: 1;
    margin: 0;
}

.pinyin {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 25px;
    font-family: var(--font-one);
}

.definition {
    font-size: 25px;
    margin: 0;
}

.sound {
    margin-top: 20px;
    width: 20px;
    height: 20px;
    content: url("../res/sound-2.svg");
    position: relative;
    /* visibility: hidden; */
}

.mdbg {
    margin-top: 12px;

    /* visibility: hidden; */
}

.mdbg:before {
    content: "mdbg";
    font-weight: bold;
}

.cloud {
    visibility: hidden;
    position: absolute;
    top: -150px;
    right: 0;
}

.cloud.active {
    visibility: visible;
}

.cloud p {
    padding: 25px;
    position: relative;
    border-left: 11px solid #bbbbbb;
    border-bottom: 11px solid #cccccc;
    border-right: 11px solid #dddddd;
    border-radius: 100px;
    width: 250px;
    z-index: 1;
    background-color: white;
}

.cloudlet {
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    border-radius: 100px;
}

.cloudlet.one {
    width: 100px;
    height: 100px;
    top: -31px;
    right: 30px;
    z-index: 0;
    position: absolute;
    background-color: white;
    border-radius: 100px;
    border-top: 11px solid #f4f4f4;
    border-right: 11px solid #e6e6e6;
}

.cloudlet.two {
    width: 80px;
    height: 80px;
    top: -20px;
    right: 120px;
    z-index: 0;
    border-top: 11px solid #eeeeee;
    border-left: 11px solid #dddddd;
}

.cloudlet.three {
    width: 35px;
    height: 35px;
    bottom: -25px;
    left: 50px;
    border-left: 11px solid #b4b4b4;
    border-bottom: 11px solid #c9c6c6;
    border-right: 11px solid #e8e8e8;
    transform: rotate(30deg);
}

.cloudlet.four {
    width: 25px;
    height: 25px;
    bottom: -35px;
    left: 17px;
    border-left: 6px solid #b4b4b4;
    border-bottom: 6px solid #c9c6c6;
    border-right: 6px solid #e8e8e8;
    transform: rotate(45deg);
}

.tip,
.flip {
    border-radius: 50px;
    border: 3px solid #b5ffb8;
    background-color: transparent;
    position: absolute;
    text-transform: uppercase;
    color: #b5ffb8;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.tip {
    padding: 17px 13px 12px;
    left: 20px;
    bottom: 20px;
}

.flip {
    padding: 16px 6px 14px;
    right: 20px;
    bottom: 20px;
}

.tip:focus,
.flip:focus {
    outline: none;
}





@media screen and (min-width: 666px) {
    .button {
        margin-right: 10px;
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .button:last-of-type {
        margin-right: 0;
    }

}

@media (max-width: 666px) {

    .navbar .links,
    .navbar .action_btn {
        display: none;
    }

    .navbar .toggle_btn {
        display: block;
    }

    .dropdown_menu {
        display: block;
    }
    .hskpart{
        padding: .2rem;
    }
}



@media (max-width: 666px) {
    .dropdown_menu {
        left: 2rem;
        width: unset;
    }

    .categories__right {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 666px) {
    .flashcards {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (min-width: 820px) {
    .flashcards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1024px) {
    .flashcards {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1400px) {
    .flashcards {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}



/* ==== MEDIA QUERIES (TABLETS) ==== */

@media screen and (max-width: 1024px) {
    .container {
        width: 90%;
    }

    h1 {
        font-size: 2.3rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1.2rem;
    }

    /* NAVBAR */

    .nav__container {
        margin: 0 3rem 0;
    }

    nav button {
        display: inline-block;
        background: transparent;
        font-size: 1.8rem;
        color: var(--color-white);
        cursor: pointer;
    }

    nav button#close-menu-btn {
        display: none;
    }

    .nav__menu {
        position: fixed;
        top: 4.03rem;
        right: 5%;
        height: fit-content;
        width: 12rem;
        flex-direction: column;
        gap: 0;
        display: none;
    }

    .nav__menu li {
        width: 100%;
        height: 4.5rem;
        animation: animateNavItems 400ms linear forwards;
        transform-origin: top right;
        opacity: 0;
    }

    .nav__menu li:nth-child(2) {
        animation-delay: 50ms;
    }

    .nav__menu li:nth-child(3) {
        animation-delay: 100ms;
    }

    .nav__menu li:nth-child(4) {
        animation-delay: 150ms;
    }

    .nav__menu li:nth-child(5) {
        animation-delay: 200ms;
    }

    .nav__menu li:nth-child(6) {
        animation-delay: 250ms;
    }

    .nav__menu li:nth-child(7) {
        animation-delay: 300ms;
    }

    .nav__menu li:nth-child(8) {
        animation-delay: 350ms;
    }

    @keyframes animateNavItems {
        0% {
            transform: rotateZ(-90deg) rotateX(90deg) scale(0.1);
        }

        100% {
            transform: rotateZ(0) rotateX(0) scale(1);
            opacity: 1;
        }
    }

    .nav__menu li a {
        background: #9894e2;
        box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
    }

    .nav__menu li a:hover {
        background: var(--color-bg2);
        color: var(--color-white);
    }

}

/* ==== MEDIA QUERIES (PHONES) ==== */

@media screen and (max-width: 666px) {

    h3 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1rem;
    }

    .container {
        width: 94%;
    }

    .nav__container {
        margin: 0 1rem 0;
    }

    .nav__menu {
        right: 3%;
    }

    .nav__menu li {
        height: 3.5rem;
    }

    .intro-buttons {
        gap: 0.3rem;
        text-align: center;
    }

    section#hero {
        margin-top: 3rem;
    }

    .categories__right {
        margin-top: 1.5rem;
        margin-bottom: 0;
    }
    .features ul {
        margin-bottom: 1rem;
    }
    .features h2{
        margin: 0.5rem;
    }
    h4{
        font-size: 1rem;
    }
    .category {
        background: #424890;
        padding: 1.3rem;
        border-radius: 2rem;
        transition: all 400ms ease;
        text-decoration: none;
    
    }
}

#to {
    font-size: 1.8rem;
}


.features {
    max-width: 600px;
    margin: 20px auto;
}

.features h2 {
    color: rgb(202, 215, 240);
    margin: 1rem;
    font-size: 2rem;
}

.features ul {
    list-style-type: disc;
    color: #ffffff;
}

.features li {
    padding-top: 0.5rem;
}