:root {
    /*
    COLOR
    */
    --background-color: rgb(13, 13, 12);
    --navigation-color: rgb(10, 11, 10);
    --primary-color: rgb(239, 231, 210);
    --secondary-color: rgb(96, 95, 92);
    --tertiary-color: rgb(255, 255, 255);

    /*
    SIZE
    */

    /*  */
    --size-0: 0;

    /* % */
    --size-100P: 100%;

    /* VW */
    --size-100vw: 100vw;

    /* PX */
    --size-1px: 1px;
    --size-2px: 2px;
    --size-5px: 5px;
    --size-6px: 6px;
    --size-7px: 7px;
    --size-8px: 8px;
    --size-10px: 10px;
    --size-12px: 12px;
    --size-18px: 18px;
    --size-20px: 20px;
    --size-25px: 25px;
    --size-30px: 30px;
    --size-40px: 40px;
    --size-32px: 32px;
    --size-52px: 52px;
    --size-55px: 55px;
    --size-75px: 75px;
    --size-100px: 100px;
    --size-150px: 150px;
    --size-160px: 160px;
    --size-180px: 180px;
    --size-187HalbPX: 187.50px;
    --size-200px: 200px;
    --size-230px: 230px;
    --size-250px: 250px;
    --size-260px: 260px;
    --size-280px: 280px;
    --size-300px: 300px;
    --size-310px: 310px;
    --size-320px: 320px;
    --size-330px: 330px;
    --size-338px: 338px;
    --size-350px: 350px;
    --size-360px: 360px;
    --size-370px: 370px;
    --size-380px: 380px;
    --size-400px: 400px;
    --size-410px: 410px;
    --size-435px: 435px;
    --size-440px: 440px;
    --size-450px: 450px;
    --size-560px: 560px;
    --size-570px: 570px;
    --size-580px: 580px;
    --size-600px: 600px;
    --size-637px: 637px;
    --size-640px: 640px;
    --size-650px: 650px;
    --size-695px: 695px;
    --size-700px: 700px;
    --size-750px: 750px;

    /* -PX */
    --size-M50px: -50px;
    --size-M150px: -150px;
    --size-M270px: -270px;
}

/*
******* GENERALLY
*/

body{
    position: fixed;
    background-color: var(--background-color);
    color: rgb(51, 51, 48);
    width: var(--size-100vw);
}

.sectionMulti {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: var(--size-560px);
    width: var(--size-100P);
    height: var(--size-100P);
    margin: var(--size-0);
}

/*
******* NAVIGATION
*/

.navigation {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid;
    background-color: var(--navigation-color);
    border-color: var(--secondary-color);
    border-radius: var(--size-10px);
    border-width: var(--size-1px);
    width: var(--size-320px);
    height: var(--size-52px);
    top: var(--size-100px);
    z-index: var(--size-100);
    backdrop-filter: blur(var(--size-8px));
    margin-left: var(--size-187HalbPX);
}

.navigationSmall {
    display: none;
}

.navigation ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-10px);
    margin: var(--size-0);
    padding: var(--size-0);
}

.navigation li {
    list-style-type: none;
}

.navigation .btn {
    background-color: var(--navigation-color);
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    border-width: var(--size-1px);
}

.navigation img {
    width: var(--size-32px);
    height: var(--size-32px);
}

.nav {
    text-decoration: none;
    color: var(--secondary-color);
    padding: var(--size-8px) var(--size-12px);
    border: var(--size-2px) solid transparent;
}

.nav:hover {
    box-shadow: var(--size-0) var(--size-0) var(--size-0) var(--size-1px) var(--secondary-color);
    border-radius: var(--size-10px);
}

/*
******* SEARCH PAGE 
*/

.searchLinks {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    height: var(--size-370px);
    width: var(--size-637px);
    margin-top: var(--size-200px);
}

.searchA {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    padding: var(--size-20px);
    font-size: var(--size-30px);
    color: var(--primary-color);
}

.pSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    border-width: var(--size-1px);
    width: var(--size-695px);
    height: var(--size-55px);
    margin: var(--size-0);
    font-size: var(--size-20px);
    margin-top: var(--size-20px);
}

.sectionSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: var(--size-560px);
    width: var(--size-100P);
    height: var(--size-100P);
    margin: var(--size-0);
}

/*
******* SEARCH PAGE 
*/

.impressumText {
    text-align: center;
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    margin-bottom: var(--size-10px);
}

.impressumText h2 {
    color: var(--primary-color);
}

.impressumText h3 {
    color: var(--primary-color);
}

.impressumText h4 {
    color: var(--primary-color);
}

.impressumText table {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: var(--size-30px);
}

.impressumText ul {
    list-style-type: none;
    padding: var(--size-0);
}

.impressumText li {
    padding: var(--size-0) var(--size-20px) var(--size-0) var(--size-20px);
}

.hinweis {
    padding: var(--size-20px);
}

/*
******* MAIN PAGE 
*/

.mainRightBlock{
    margin-bottom: var(--size-8px);
    height: var(--size-338px);
}

.aIMG {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    height: var(--size-338px);
    width: var(--size-637px);
}

.mainH3 {
    writing-mode: vertical-rl;
    transform: rotate(-360deg);
    margin-left: var(--size-650px);
    margin-top: var(--size-M270px);
    font-size: var(--size-30px);
    color: var(--primary-color);
}

/*
******* MENU 
*/

.leftSVG {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
}

.rightSideOverflowY {
    overflow-y: auto;
    width: var(--size-695px);
    height: var(--size-750px);
    padding: var(--size-10px);
}

.menuBorder {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    margin-bottom: var(--size-10px);
}

.kategorieBoard {
    width: 75%;
    margin: var(--size-30px) var(--size-75px);
}

.kategorie {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: var(--size-2px);
}

.kategorieValue {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    padding: var(--size-8px);
    margin: var(--size-2px);
}

.kategorieValue a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: var(--size-12px);
}

.groceriesRow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: var(--size-40px);
}

.menuH4{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--size-30px);
    margin: var(--size-0);
    padding-bottom: var(--size-10px);
    color: var(--primary-color);
}

.groceries {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: var(--size-40px);
}

.groceries h4{
    font-size: var(--size-30px);
    margin: var(--size-0);
    padding-bottom: var(--size-10px);
    color: var(--primary-color);
}

.cuisine {
    color: var(--secondary-color);
}

.td {
    padding-right: var(--size-100px);
}

.pMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-style: solid;
    border-color: var(--secondary-color);
    border-radius: var(--size-10px);
    border-width: var(--size-1px);
    width: var(--size-695px);
    height: var(--size-55px);
    margin: var(--size-0);
    font-size: var(--size-20px);
}

/*
******* ABOUT ME SITE
*/

.leftSide {
    padding: var(--size-10px);
}

.doenerSVG {
    border-style: solid;
    border-radius: var(--size-10px);
    border-color: var(--secondary-color);
    width: var(--size-695px);
    height: var(--size-750px);
}

.doenerSVG2{
    display: none;
}

.rightIMG2 {
    display: none;
}

.helalIMG2 {
    display: none;
}

.rightTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: var(--size-7px);
    padding-bottom: var(--size-6px);
}

.tiH3 {
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-color: var(--secondary-color);
    border-width: var(--size-1px);
    border-radius: var(--size-10px);
    width: var(--size-435px);
    height: var(--size-250px);
    margin: var(--size-0);
    padding: var(--size-0);
    font-size: var(--size-32px);
}

.rightSide {
    width: var(--size-695px);
    height: var(--size-750px);
    padding: var(--size-10px);
}

.rightIMG{
    width: var(--size-250px);
    height: var(--size-250px);
    border-radius: var(--size-10px);
}

.rightMiddle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: var(--size-5px);
    padding-bottom: var(--size-6px);
}

.value {
    border-style: solid;
    border-color: var(--secondary-color);
    border-width: var(--size-1px);
    border-radius: var(--size-10px);
    width: var(--size-250px);
    height: var(--size-160px);
}

.helalIMG {
    width: var(--size-180px);
    height: var(--size-160px);
    border-radius: var(--size-10px);
}

.star {
    color: var(--tertiary-color);
    padding: var(--size-32px) var(--size-0) var(--size-10px) var(--size-0);
}

.value p {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: var(--size-0);
}

.value span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: var(--size-0);
    padding-top: var(--size-5px);
    font-size: var(--size-12px);
}

.rightBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: var(--size-5px);
    padding-bottom: var(--size-6px);
}

.court {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: var(--secondary-color);
    border-width: var(--size-1px);
    border-radius: var(--size-10px);
    width: var(--size-435px);
    height: var(--size-250px);
    margin: var(--size-0);
    font-size: var(--size-20px);
}

.court p{
   font-size: var(--size-20px);
   padding: var(--size-10px);
   margin: var(--size-0);
}

.p {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-style: solid;
    border-color: var(--secondary-color);
    border-radius: var(--size-10px);
    border-width: var(--size-1px);
    width: var(--size-695px);
    height: var(--size-55px);
    margin: var(--size-0);
    font-size: var(--size-20px);
}