@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap');

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


/* Sharad Font */
@font-face {
    font-family: sharad;
    src: url(../fonts/Sharad76-Regular.otf);
}
.sharad{
    font-family: sharad;
}

header ul {
    list-style: none;
}


a {
    text-decoration: none !important;
}


html {
    font-size: 90%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.site-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 640px) {
    .site-section {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (min-width: 768px) {
    .site-section {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
}

/* navbar */

.navbar {
    transform: translateX(100%);
    transition: all 0.5s linear;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
}


.active .navbar {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    left: 0;
}

.mobile__nav__btn ion-icon[name="close-outline"] {
    display: none;
}


.active .mobile__nav__btn ion-icon[name="close-outline"] {
    display: block;
}

.active .mobile__nav__btn ion-icon[name="menu-outline"] {
    display: none;
}


@media (min-width:640px) {
    .navbar {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.gal-title {
    font-family: 'Baloo 2', cursive;
    font-size: 2rem;
}


/* Alert Boxes */

.alert_box {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    max-width: 16rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

@media (min-width: 640px) {
    .alert_box {
        bottom: 1.25rem;
        right: 1.25rem;
        left: auto;
    }
}

.alert {
    display: flex;
    align-items: center;
}

.alert> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.alert {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.alert-success {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity));
}

.alert-warning {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(192 199 59);
    --tw-bg-opacity: 1;
    background-color: rgb(251 234 96);
    --tw-text-opacity: 1;
    color: rgb(150 156 28);
}

.message {
    display: block;
}

.input_field {
    width: 100%;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(49 50 50 / var(--tw-border-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}