.ff-edwardian {

  font-family:"Edwardian Script ITC";

}

.text-color-company {

  color: #ffffff;

}

.text-color-wheat {

  color: wheat;

}

.bg-wheat {

  background-color: wheat;

}

.navbar-nav .nav-link.active {

  text-decoration: underline;

  text-decoration-color: white;

  cursor: context-menu;

}




  

/* Card */

.card {

  margin-bottom: 45%;

  border-width: 3px;

  border-style:outset;

  border-radius: 1px;

}

.card-title {

  color: #202020;

  font-weight: bold;

}





/**/

.hatter {

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

  margin: 4% 25% 30%;

  padding: 2% 3% 2%;

  width: 49%;

}

.cukorv {

  font-family:"Edwardian Script ITC";

  color: #ffffff;

  font-size: 400%;

  padding: 0% 4% 0%;

  margin-top: 10%;

  text-shadow: 10% 10% 20% black;

}

#kozepre {

  margin-left: 16%;

}



a:link { 

  text-decoration:none;

} 

a:visited { 

  text-decoration: none; 

} 

a:hover { 

  text-decoration: none; 

} 

a:active { 

  text-decoration:none;

}



/* Dropdown Button */

.dropbtn {

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}



/* The container <div> - needed to position the dropdown content */

.dropdown {

  position: relative;

  display: inline-block;

}



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



/* Links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #ddd;}



/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {display: block;}



/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {background-color: #3f423f;}





h4 {

  color: white;

}

#Lenkekep {

  padding: 5px 10px 5px;

  margin-top: 150px;

  margin-bottom: 100px;

}

#bemutato {

  color: #f1f1f1;

  line-height: 400%;

}

.hr {

  height: 200px;

}



#nincs {

  color: black;

  height: 50px;

}

h1 {

  color: rgb(27, 25, 139);

}

body {

  font-family: "Lexend Exa", sans-serif;

  font-optical-sizing: auto;

  background-color: black;

}



.kezdolapcim {

  text-align: center;

  padding-left: 300px;

  margin: auto;

}

.igazitottcimek {

  text-align: center;

  padding-left: 30px;

  margin: auto;

}

.felulet {

  text-align: center;

  padding-left: 300px;

  margin: auto;

}

.ikon {

  text-indent: 100px;

  font-size:40px;

  margin: auto;

  padding-left: 6px;

  color: #ffffff;

  font-family: "Edwardian Script ITC";

}

.szin {

  color: #ffffff;

}

h6 {

  color: white;

  font-size: 20px;

}
.feher{
  color: white;
}

.alcim {

  padding-left: 15px;

  color: white;

}

.footermagassag {

  height: 70px;

}

.copyright {

  width: 800px;

  font-size: small;

}

.ikonok {

  padding-left: 15px;

}

.navbar-brand {

  font-family: "Edwardian Script ITC";

}

.navbar {

 padding: 3px 3px 5px 10px;

 background-color: #0e2192;

}



.page-container.home main,

.page-container:not(.home) .heafer-top {

  background-image: url(../img/kilohatter.jpg);

                    
  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transition: 800s;

  animation-name: animate;

  animation-direction: alternate-reverse;

  animation-play-state: running;

  animation-timing-function: ease-in-out;

  animation-duration: 40s;

  animation-fill-mode: forwards;

  animation-iteration-count: infinite;

  text-shadow: 3px 2px black;

  height: max-content;

}



.footerhatter

{

  background-color: #161077;

}

.menupontok{

  color: white;

}

.cukorv{ 

  font-size: 6vmax;

  

}

.centerr{

  text-align: center;

}

.page-container.login,

.page-container.register,

.page-container.profile {

  background-image: url(../img/hatter3_new.png);

  background-size: 95%;

  background-position: center;

  background-blend-mode: hard-light;

  background-repeat: no-repeat;

}

.navbar-toggler-icon {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

.navbar-toggler{

border: 2px solid white;

}

.navbar-toggler:focus{

box-shadow: none;

}

#kapcsolatokCard

{

  margin-bottom: 30%;

  border-width: 3px;

  border-style: outset;

  border-radius: 1px;

  background-color: black;

  border: black;

}



  .kapcsolatname

  {

    float: right;

    margin-right: 180px;

    background-color: black;

    width: 58%;

    content: white;

    color: white;

    

  }

  #kapcsolat3

  {

    padding-left: 300px;

    width: 33%;

    margin-left: 200px;

  }

  .kapcsolatmessage

  {

    float: right;

    margin-right: 180px;

    height: 350px;

    width: 58%;

    background-color: black;

    content: white;

    opacity: 90%;

    color: white;

    align-content: left;





  }

  #kapcsolat5

  {

   

    height: 100px;

    width: 60%;

    background-color: black;

    color: white;

    margin-bottom: 10rem;

    margin-top: 6rem;

    margin-left: 20%;

  }

  .kapcsolat

  {

    padding-left: 1170px;

  }

  .kapcsolat2

  {

    padding-left: 400px;

  }

  .regioldal{

    color:#ffffff;

    text-shadow: 2px 1px gray;

  }

  .elerhetoseg{

    display: block;

    color: white;

  }

  .bejelentkezes, .regisztracio, .profil, .kijelentkezes

  {

    color: #FFFFFF;

  }

  li :hover

  {

    color: #180d7a;

  }

  .szegely

  {

    border-style:outset;

    border-radius: 30px;

    background-color:#0f0f0f;

  }

  header .shopping{

    position: relative;

    text-align: right;

  }

  

  header .shopping span{

    background: red;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    position: absolute;

    top: -5px;

    left: 80%;

    padding: 3px 10px;

  }

  .list{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 20px;

    row-gap: 20px;

    margin-top: 50px;

  }

  .list .item{

    text-align: center;

    background-color: #DCE0E1;

    padding: 20px;

    box-shadow: 0 50px 50px #757676;

    letter-spacing: 1px;

  }

  .list .item img{

    width: 90%;

    height: 430px;

    object-fit: cover;

  }

  .list .item .title{

    font-weight: 600;

  }

  .list .item .price{

    margin: 10px;

  }

  .list .item button{

    background-color: #1C1F25;

    color: #fff;

    width: 100%;

    padding: 10px;

  }

  .card1{

    position: fixed;

    top:0;

    left: 100%;

    width: 500px;

    background-color: #453E3B;

    height: 100vh;

    transition: 0.5s;

  }

  .active .card1{

    left: calc(100% - 500px);

  }

  .active .container{

   transform: translateX(-200px);

  }

  .card1 h1{

    color: #E8BC0E;

    font-weight: 100;

    margin: 0;

    padding: 0 20px;

    height: 80px;

    display: flex;

    align-items: center;

  }

  .card1 .checkOut{

    position: absolute;

    bottom: 0;

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

  

  }

  .card1 .checkOut div{

    background-color: #E8BC0E;

    width: 100%;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;

    cursor: pointer;

  }

  .card1 .checkOut div:nth-child(2){

    background-color: #1C1F25;

    color: #fff;

  }

  .listCard li{

    display: grid;

    grid-template-columns: 100px repeat(3, 1fr);

    color: #fff;

    row-gap: 10px;

  }

  .listCard li div{

    display: flex;

    justify-content: center;

    align-items: center;

  }

  .listCard li img{

    width: 90%;

  }

  .listCard li button{

    background-color: #fff5;

    border: none;

  }

  .listCard .count{

    margin: 0 10px;

  }

  .containerszelesseg{

    width: 98%;

  }

  .szín{

    color: wheat;

  }

  .szovegtav{



    margin-bottom: 40px;

    line-height: 3;

  }

  .page-container.receptek{

    background-image: url(../img/modern-flowers-concept-with-elegant-stylee_new.jpg);

    background-size: 100%;

    background-position: center;

    background-blend-mode: hard-light;

    background-repeat: no-repeat;

  }

  

  .page-container.bolt,.page-container.fejlesztok{

    

    background-image: url(../img/lovely-flowers-concept-with-white-stones_new.jpg);

    background-size: 100%;

    background-position: center;

    background-blend-mode: hard-light;

    background-repeat: no-repeat;

  }

  .page-container.Kapcsolat,.page-container.presing_lenke,.page-container.galeria,.page-container.Kosar, .page-container.order{

    background-image: url(../img/toilettpaperr.jpeg);

    background-size: 100%;

    background-position: center;

    background-blend-mode: hard-light;

    background-repeat: no-repeat;

  }

  .marginn{

    margin-bottom: 100px;

  }

  #termekjel, #termekar

  {

    margin-top: 5%;

    margin-left: 35%;

    margin-bottom: 5%;

    color: white;

    font-size: 150%;

  }

  .termekkep

  {

    

    height: 80%;

    width: 40%;

  }

  .termekcsik

  {

    margin-left: 20%;

    width: 55%;

    color: white;



  }

  .termeknev

  {

    margin-left: 25%;

    color: white;

  }

  .kosar

  {

    margin-top: 5%;

    margin-left: 25%;

    margin-bottom: 5%;

    color: white;

    font-size: 150%;

    border: #FFFFFF;

  }

  .kosarcsik

  {

    margin-left: 20%;

    margin-bottom: 20%;

    width: 55%;

    color: white;



  }

  .developercard {

    margin-bottom: 15%;

    border-width: 3px;

    border-style:outset;

    border-radius: 1px;

    padding: 5px;

   

  } 

  .input-group

{

  margin-left: 9%;

  margin-bottom: 10%;

}

.modal-content {

  border-radius: 20px !important;

}

.developercard

{

  border-radius: 10px;

}

.felso{



  padding: 30px;

}

.gallery-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.card {

  flex: 0 0 calc(33.333% - 50px); 

  margin-bottom: 20px; 

}

.gallery-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.card {

  flex: 0 0 calc(33.333% - 50px); 

  margin-bottom: 20px; 

}



.btn-outline-orange {

  --bs-btn-color: #E8BC0E;

  --bs-btn-border-color: #E8BC0E;

  --bs-btn-hover-color: #fff;

  --bs-btn-hover-bg: #E8BC0E;

  --bs-btn-hover-border-color: #E8BC0E;

  --bs-btn-focus-shadow-rgb: 13, 110, 253;

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg: #E8BC0E;

  --bs-btn-active-border-color: #E8BC0E;

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #E8BC0E;

  --bs-btn-disabled-bg: transparent;

  --bs-btn-disabled-border-color: #E8BC0E;

  --bs-gradient: none;

}