*{
    box-sizing: border-box;
    margin: 0; 
    border: 0;
    padding: 0; 
}

@font-face {
    font-family: 'korataki';
    src: url("../fonts/korataki.otf");
}

@font-face {
    font-family: 'korataki_light';
    src: url("../fonts/korataki_light.otf");
}

@font-face{
    font-family: 'league_spartan';
    src: url("../fonts/LeagueSpartan-Bold.ttf")
}

body {
    overflow-x: hidden;
    position: relative;
    width: 100%; 
    padding-top: 100px; /*same as .navbar height*/
}


/* Navbar Section */
.navbar{
    background: #008080;
    height: 100px; 
    width: 100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: fixed;
    top: 0; 
    z-index: 999; 
}

.navbar__container{
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto; 
    padding: 0 50px; 
}

#navbar__logo{
    -webkit-background-clip: text; 
    -moz-background-clip: text;
    background-color: #ffffff; 
    filter: drop-shadow(2px 2px 5px rgba(210, 137, 241, 0.901));
    text-shadow: -2px -2px 0 rgba(210, 137, 241, 0.901), 2px -2px 0 rgba(210, 137, 241, 0.901),
    -2px 2px 0 rgba(210, 137, 241, 0.901), 2px 2px 0 rgba(210, 137, 241, 0.901);
    color: #ffffff; 
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom: 2px; 
    padding-left: 30px; 
    cursor: pointer; 
    text-decoration: none; 
    font-family: 'korataki';
    font-size: 30px; 
    white-space: nowrap;
    overflow: hidden;
}

#navbar__logo:hover{
    background-color: #9d9fe2; 
    filter: drop-shadow(2px 2px 5px rgba(210, 137, 241, 0.901));
    font-family: 'korataki_light'; 
    transition: all 0.6s ease;
}

#navbar__logo:not(:hover){
    font-family: 'korataki';
    transition: all 0.6s ease;
}

.fa-gem{
    margin-right: 0.5rem;
}

.navbar__menu{
    display: flex; 
    align-items: center;
    list-style: none;
    text-align: center;
    font-family: league_spartan;
    font-size: 32px;
}

.navbar__item{
    height: 80px; 
    margin-right: 24px;
}

.navbar__links{
    color:#ffffff; 
    text-shadow: -2px -2px 0 rgba(210, 137, 241, 0.901), 2px -2px 0 rgba(210, 137, 241, 0.901),
    -2px 2px 0 rgba(210, 137, 241, 0.901), 2px 2px 0 rgba(210, 137, 241, 0.901);
    filter: drop-shadow(2px 2px 5px rgba(210, 137, 241, 0.901));
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem; 
    height: 100%; 
}

.navbar__btn{
    display:inline-flex; 
    justify-content: center;
    align-items: center;
    padding: 0 1rem; 
    width: 100%;
}

.button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%; 
    width: 100%; 
    border: none; 
    outline: none; 
    border-radius: 12px; 
    background: rgba(210, 137, 241, 0.901); 
    color: #ffffff; 
    white-space: nowrap;
    overflow: hidden;
}

.button:hover {
    background: rgb(130, 69, 255);
    filter: drop-shadow(0px 0px 15px rgba(255,255,255, 0.901));
    transition: all 0.3s ease; 
}

.button:not(:hover){
    transition: all 0.3s ease; 
}

.navbar__links:hover{
    filter: drop-shadow(2px 2px 15px rgb(255, 255, 255));
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
    transition: all 0.3s ease;
}

.navbar__links:not(:hover){
    transition: all 0.3s ease; 
}


/* Main Header Section */
.main{
    border-color: #008080 ;
    border-style: solid;
    border-width: 10px;
    overflow: hidden;
}

.main__container h1{
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000,
    -2px 2px 0 #000, 2px 5px 0 #000;
    text-align: center;
    font-family: korataki; 
    font-size: 42px;
}

.main__intro{
    background-color: rgba(16, 171, 125, 0.715);
    border-color: rgb(16, 171, 125);
    border-style: solid;
    border-width: 20px;
    color: #ffffff; 
}

.main__intro h1{
    padding: 30px; 
}

.main__intro h2{
    font-family: league_spartan; 
    font-size: 36px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 3px 0 #000;
    text-align:justify;
    padding: 20px; 
    line-height: 110%;
}

.intro__color__text{
    color:#9d9fe2; 
}

/* Main Items Section */
.main__item {
    color: #ffffff; 
    font-family: league_spartan; 
    font-size: 24px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
                 -1px 1px 0 #000, 1px 3px 0 #000;
    padding: 30px; 
    border-style: solid;
    border-width: 20px;
    margin: auto;
    overflow: hidden;
}

.main__item__1 {
    background-color: rgba(86, 161, 164, 0.691);
    border-color: rgb(86, 161, 164, 0.691);
    line-height: 150%;
}

.main__item__1 a{
    color: #ffffff; 
    text-decoration: none;
}

.main__item__1 h1{
    padding: 20px; 
}

.main__item__1 h2{
    padding: 20px; 
    font-size: 20px;
}

.card {
    background-color: rgba(112, 181, 196, 0.882);
    display: table-cell;
    width: 30%; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 5px; 
    border-color: rgb(86, 161, 164, 0.691);
    border-style: solid;
    border-width: 10px;
}

.card img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 35%; 
    height: auto;
}

.card h1{
    font-size: 24px;
    line-height: 100%;
}

.card h2{
    padding-top: 15px; 
    text-align: center;
    font-size: 24px;
    line-height: 120%;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
.card__container {
    padding: 2px 16px;
}

.scroll-btn{
    display: none;
}

.text-link{
    color:rgb(34, 204, 59); 
}

.main__item__2 {
    background-color: rgba(220, 163, 56, 0.723);
    border-color: rgb(202, 157, 93);
}

.wide-spacing{
    line-height: 500%;
    text-align: center;
}

.centered-text{
    font-size: 32px;
}

.main__item__3 {
    background-color: rgba(150, 62, 147, 0.65);
    border-color: rgb(150, 62, 147, 0.65);
    text-align: center;
    padding: 30px; 
}

.contact__flex{
    text-align: center;
}

.contact-link{
    color:rgb(106, 240, 200); 
    text-align: center;
}

.social__buttons{
    display: flex;
    flex-direction: column;
}

.social-button img{
    max-width: 10%; 
    height: auto;
    padding-top: 15px; 
    padding-right: 15px; 
}

/* Shop Page */
/* Intro Section */
.main__intro__shop{
    background-color: rgba(80, 67, 202, 0.715);
    border-color: rgba(97, 37, 129, 0.731);
    border-style: solid;
    border-width: 20px;
    color: #ffffff; 
}

.main__intro__shop h1{
    padding: 30px; 
}

.main__intro__shop h2{
    font-family: league_spartan; 
    font-size: 30px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 3px 0 #000;
    padding: 20px; 
    line-height: 110%;
}

.main__item__shop__1 {
    background-color: rgba(0, 0, 0, 0.691);
    border-color: rgba(0, 0, 0, 0.691);
    line-height: 150%;
}

.main__item__shop__1 a{
    color: #ffffff; 
    text-decoration: none;
}

.main__item__shop__1 h1{
    padding: 20px; 
}

.main__item__shop__1 h2{
    padding: 20px; 
    font-size: 20px;
}

.product__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; 
    justify-content: center;
    width: 100%; 
    margin: 0 auto; 
}

.product-link{
    display: grid;
    padding: 10px; 
    max-width: 1000px;
    max-height: 1000px;
    width: 85%; 
    height: 95%;
    border: 4px solid #979797;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.product-link:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
    color: rgb(219, 219, 219);
    font-style: italic;
}

.product-link img{
    align-items: center;
    max-width: 80%;
    border-color: rgba(39, 39, 39, 0.731);
    border-style: solid;
    border-width: 8px;
}

.product-link h2{
    font-size: 28px;
    line-height: 100%;
    padding: 10px;
}

@media screen and (max-width: 1000px) {
    body{
        white-space: wrap;
        word-break: break-word;
        padding-top: 100px; 
    }
    
    /*Navbar Section for Mobile*/
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;
    }
  
    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.2s ease;
        height: 50vh;
        z-index: -1;
    }
  
    .navbar__menu.active {
        background: rgba(0, 128, 128, 0.98);
        top: 100%;
        opacity: 1;
        transition: all 0.2s ease;
        z-index: 99;
        height: 50vh;
        font-size: 1.6rem;
    }
  
    #navbar__logo {
        align-content: center;
        font-size: 18px;
        overflow: hidden;
    }

    #navbar__logo .hover{
        font-size: 20px;
    }
  
    .navbar__toggle .bar {
        width: 35px;
        height: 3px;
        margin-top: 5px;
        padding-top: 8px;
        transition: all 0.2s ease-in-out;
        background: #fff;
        display: block;
        cursor: pointer;
    }
  
    .navbar__item {
        width: 100%;
    }
  
    .navbar__links {
        font-size: 28px;
        text-shadow: 2px 2px 5px #000000;
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }
  
    .navbar__links:hover {
        color: #ffffff; 
    }
  
    .button {
        display: center;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 70px;
        margin: 0;
    }
  
    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }
  
    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
  
    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(13.5px) rotate(45deg);
    }
  
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-13px) rotate(-45deg);
    }

    /*Main Section for Mobile*/
    .main__container h1{
        font-size: 28px;
    }

    .main__container h2{
        font-size: 30px;
    }

    .main__item {
        position: relative;
        width: 100%;
        max-width: 1300px;
        max-height: 70%;
        margin: auto;
        overflow: hidden; 
        text-align: center;
        display: flex;
        flex-direction: column;
        font-size: 15px;
        line-height: 200%;
    }
    
    .scrollable {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        scroll-behavior: smooth;
        width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none; 
    }
    
    .scrollable::-webkit-scrollbar {
        display: none;
    }
    
    .card {
        flex: 0 0 100vw; 
        max-width: 100%;
        max-height: fit-content; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2px;
        scroll-snap-align: center;
        color: white;
        border-radius: 10px;
        box-shadow: unset; 
        text-align: center;
        line-height: 0px;
    }
    
    .card img {
        max-width: 50%;
        max-height: 50%; 
        border-radius: 8px;
        margin-bottom: 15px;
    }


    .card h1{
        font-size: 20px;
    }
    .card h2{
        font-size: 22px;
    }
    
    .scroll-btn {
        display: unset; 
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        background-color: rgba(15, 63, 111, 0.7);
        color: rgba(255, 255, 255, 0.691);
        border: none;
        padding: 15px 20px;
        cursor: pointer;
        font-size: 20px;
        border-radius: 50%;
        z-index: 10;
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    
    .scroll-btn:hover {
        opacity: 1;
    }
    
    .left {
        left: 20px;
    }
    
    .right {
        right: 20px;
    }

    .centered-text{
        font-size: 30px;
        line-height: 10px;
        padding: 1px; 
        text-align: center;
    }

    .main__item__2{
        text-align: center;
    }

    .main__item__2 h2{
        font-size: 22px;
    }

    .main__item__3{
        text-align: justify;
        text-overflow: ellipsis;
    }

    .main__item__3 h2{
        font-size: 22px;
        text-align: justify;
    }

    .main__item__3 h3{
        font-size: 22px;
    }

    .wide-spacing{
        text-align: center;
    }

    .social-button img{
        max-width: 25%; 
    }

    /*Shop Page Mobile Section*/
    .product__container{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;  
    }

    .product-link{
        min-width: fit-content;
        padding: 5px;
    }
  }

  @media screen and (max-width: 500px) {
    *{
        max-width: 100%;
    }
    .product__container{
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;  
    }

}