@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap");



:root {

  --primary-color: #ffffff;

  --secondary-color: #000000;

}



* {

  margin: 0;

  padding: 0;

}



.page {

  min-height: 100vh;

  background-image: url("images/Pizze_4.jpg");

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}



body {

  font-family: "Popins";

  font-size: 30px;

}



.header_text {

  padding-right: 50px;

  padding-top: 50px;

  font-size: clamp(40px, 10vw, 100px);

  letter-spacing: 6px;

  line-height: 115%;

  font-family: "Great Vibes", cursive;

  color: rgb(255, 255, 255);

}



.link_facebook {

  height: 35px;

}



.link_instagram {

  height: 40px;

}



nav ul {

  list-style: none;

  display: flex;

  justify-content: center;

  gap: 40px;

  background-color: white;

  padding: 20px;

}



.link_ristorante {

  text-decoration: none;

  color: black;

}



.link_ristorante:hover {

  font-size: larger;

}



.link_speisekarte {

  text-decoration: none;

  color: black;

}



.link_speisekarte:hover {

  font-size: larger;

}



.link_mittagsmenu {

  text-decoration: none;

  color: black;

}



.link_mittagsmenu:hover {

  font-size: larger;

}



.link_datenschutz {

  text-decoration: none;

  color: black;

}



.link_datenschutz:hover {

  font-size: larger;

}



.link_mail {

  text-decoration: none;

  color: black;

}



.link_mail:hover {

  font-size: larger;

}



.link_facebook:hover {

  transform: scale(1.2);

}



.link_instagram:hover {

  transform: scale(1.2);

}



.ristorante_detail {

  background-color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 50px;

  width: 100%;

}



.text_wellcome {

  width: 90%;

  max-width: 600px;

  text-align: center;

  font-size: 20px;

  padding-top: 20px;

}



.foto_left {

  width: 120%;

}



.foto_right {

  width: 114%;

}



.welkomme_text {

  font-size: 50px;

  letter-spacing: 6px;

  line-height: 115%;

  font-family: "Great Vibes", cursive;

  text-align: center;

}



.circle_left {

  margin-top: 50px;

  width: 300px;

  height: 300px;

  overflow: hidden;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.circle_right {

  margin-top: 50px;

  width: 300px;

  height: 300px;

  overflow: hidden;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.logo-image {

  width: 400px;

}



.header {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}



.logo-home {

  width: 50px;

  margin-left: 20px;

  padding: 20px;

}



.div_home {

  display: flex;

  align-items: center;

}



.home_link {

  text-decoration: none;

  color: rgb(255, 255, 255);

}



.div_phone {

  display: flex;

  align-items: center;

  color: rgb(255, 255, 255);

}



.logo_phone {

  width: 50px;

  margin-left: 20px;

  padding: 20px;

  color: rgb(255, 255, 255);

}



.div_anfahrt {

  display: flex;

  align-items: center;

}



.logo_map {

  width: 50px;

  margin-left: 20px;

  padding: 20px;

}



.anfahrt_link {

  text-decoration: none;

  color: rgb(255, 255, 255);

}



.logo_menu {

  width: 60px;

  padding: 20px;

  margin-left: 10px;

}



.div_menu {

  display: flex;

  align-items: center;

}



.menu_link {

  text-decoration: none;

  color: rgb(255, 255, 255);

}



.mittagsmenu_link {

  text-decoration: none;

  color: rgb(255, 255, 255);

}



.div_open {

  display: flex;

  align-items: center;

  color: rgb(255, 255, 255);

}



.logo_open {

  width: 60px;

  padding: 20px;

}



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

  .header {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .header_text {

    padding: 0 !important;

    padding-top: 20px !important;

    font-size: 45px;

    white-space: normal;

  }



  .logo-image {

    width: 60%;

    max-width: 250px;

  }

}



.mittagsmenu_title {

  font-size: 50px;

  letter-spacing: 6px;

  line-height: 115%;

  font-family: "Great Vibes", cursive;

  text-align: center;

  background-color: #ffffff;

  padding-top: 150px;

  padding-bottom: 80px;

}



.mittagsmenu_all {

  display: flex;

  background-color: #ffffff;

  padding-left: 20px;

}



th,

td {

  padding-left: 25px;

}



a:hover {

  transform: scale(1, 2);

}



/* Menu content styles */

.menu_content {

  display: none;

}



.menu_content.active {

  display: block;

}



/* Popup styles */

.popup {

  position: fixed;

  top: 0;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.3);

  display: grid;

  place-content: center;

  opacity: 0;

  pointer-events: none;

  transition: 200ms ease-in-out opacity;

}



.popup-content {

  width: clamp(300px, 90vw, 500px);

  background-color: #fff;

  padding: clamp(1.5rem, 100vw, 3rem);

  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);

  border-radius: 0.5em;

  opacity: 0;

  transform: translateY(20%);

  transition: 200ms ease-in-out opacity, 200ms ease-in-out transform;

  position: relative;

}



.popup h1 {

  font-size: smaller;

  position: absolute;

  top: 2rem;

  right: 2rem;

  line-height: 0.5;

  cursor: pointer;

  user-select: none;

}



.popup h1:active {

  transform: scale(0.9);

}



.showPopup {

  opacity: 100;

  transform: translateY(0);

  pointer-events: all;

}



.modal {

  padding: 1em;

  max-width: 50ch;

  border: 0;

  box-shadow: 0 0 1em rgb(0 0 0 / 0.3);

}



.modal>* {

  margin: 0 0 0.5rem 0;

}