@font-face { font-family: 'Baloo2'; src: url('/fonts/Baloo2-VariableFont_wght.ttf'); }

/* css clean up */

*{
	font-family: 'Baloo2', sans-serif; font-weight: 300;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
    text-decoration: none;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;

    word-wrap: break-word;

    /*border: 1px solid red;*/
}

h1, h2, h3, h4, h5, h6, p {
    cursor: default;
}

.selectable {
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;

    cursor: text;
}

.inpextra {
    position: fixed;
    left: -500vw; right: -500vw;
    opacity: 0;
    pointer-events: none;
}

.hidden {
    pointer-events: none;
}

span {
    all: inherit;
    display: inline;
}

:root {
    /* colors */

    --main-dark: #ffffff;
    --main: #fffff9;
    --main: #faf9ef;
    --main-medium: #1e1d21;
    --main-light: #2c283c;
    --main-opaque: #1a191dcc;
    --main-accent: #c94dda;
    --text-dark: #cbc7c0;
    --text: #f0ece4bb;
    --text-light: #f8f5eebb;
    --text-full: #B6B4B0;
}

textarea{
    min-height: 68px;
    max-height: 300px;
    field-sizing: content;
    resize: vertical;
}

body {
    background-color: var(--main);
}

.no-phone {
    display: block;
}
.no-desk {
    display: none;
}

nav {
    position: fixed;
    width: 20rem; height: calc(100dvh - 4rem);
    top: 2rem; left: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 15px 0 rgb(200, 193, 168);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

nav p {
    color: #867b68;
    transition: scale .2s ease, opacity .2s ease;
    transform-origin: 0%;
    cursor: pointer;
}
    nav p:hover {
    scale: 1.1;
    opacity: .7;
}

#logo {
    width: 10rem;
}


.product {
    min-width: 20rem;
    max-width: 40rem;
    flex-grow: 1;
    /* border: 1px solid red; */
    display: grid;
    row-gap: 1.3rem;
    align-items: center;
    grid-template-rows: 15rem 2rem;
    grid-template-areas: "img img"
                         "price buy";
}
.product .imaage {
    box-shadow: 0 0 15px 0 rgb(200, 193, 168);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    grid-area: img;
    width: 100%; height: 100%;
}
.image-inside {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}
.product button {
    cursor: pointer;
    box-shadow: 0 0 15px 0 rgb(200, 193, 168);
    border-radius: .5rem;
    border: 1px solid #867B68;
    padding: .4rem;
    background-color: white;
    grid-area: buy;
    color: #867B68;
        transition: scale .2s ease, opacity .2s ease;
}

.product button:hover {
    scale: 1.1;
    opacity: .7;
}

.product h2 {
    grid-area: price;
    color: #867B68;
}

.nav-cont {
    width: 100%; height: 100%;
    overflow: scroll;
    display: flex;
    padding: 2rem 1.5rem;
    gap: .3rem;
    flex-direction: column;
    mask-image: linear-gradient(rgba(0, 0, 0, 0), black 2rem, black calc(100% - 2rem), rgba(0, 0, 0, 0));
}
.nav-cont p {
    font-size: 1.3rem;
}

.produkte {
    width: calc(100vw - 20rem - 2rem);
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    float: right;
    padding: 2rem;
    overflow: scroll;
    height: calc(100dvh - 2rem - 2rem - 2rem);
    mask-image: linear-gradient(rgba(0, 0, 0, 0), black 2rem, black calc(100% - 2rem), rgba(0, 0, 0, 0));
}

.imaage p {
    position: absolute;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.699));
    z-index: 100;
    bottom: 0; left: 0;
    width: 100%;
    color: white;
    padding: 2rem 1rem 1rem 1rem;
    font-size: 1.3rem;
}

#search {
    all: unset;
    box-sizing: border-box;
    display: block;
    margin: 2rem 2rem 0 0;
    height: 2rem;
    float: right;
    width: calc(100vw - 20rem - 2rem - 2rem - 2rem);
    box-shadow: 0 0 15px 0 rgb(200, 193, 168);
    padding: .7rem;
    border-radius: .5rem;
}

/* components */

/* elements */

/*!! REMs and PXs https://www.youtube.com/watch?v=Op3hhQhNKIc !!*/

/* footer */

footer {
    display: none;
}

/* media-thin */

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

}

/* media-phone */

@media only screen and (max-width: 700px) {
    .no-phone {
        display: none;
    }
    .no-desk {
        display: block;
    }
}

/* media-thin-phone */

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

}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none;
    }
}


/* overwrites */

.hover {
    transition: opacity .2s ease;
}
.hover:hover {
    opacity: .6;   
}

.hover-scale {
    transition: scale .2s ease, opacity .2s ease;
}
.hover-scale:hover {
    opacity: .6;
    scale: .93;
}
.selectable::selection {
    color: #F23317;
}