body.theme1 {
    --bgcolor1 : #eee;
    --bgcolor2 : #333;
    --textlight : #44444466;
    --icon : #44444466;
    --text1 : #444;
    --text2 : #eee;
    --bgimage : none;
}

body.theme2 {
    --bgcolor1 : #9ACBD0;
    --bgcolor2 : #006A71;
    --textlight : #006A7199;
    --icon : #006A7199;
    --text1 : #006A71;
    --text2 : #F2EFE7;
    --bgimage : none;
} 

body.theme3 {
    --bgcolor1 : #27445D;
    --bgcolor2 : #71BBB2;
    --textlight : #EFE9D566;
    --icon : #EFE9D533;
    --text1 : #EFE9D5;
    --text2 : #27445D;
    --bgimage : none;
}

body.theme4 {
    --bgcolor1 : #578E7E;
    --bgcolor2 : #FFFAEC;
    --textlight : #F5ECD5;
    --icon : #F5ECD5;
    --text1 : #FFFAEC;
    --text2 : #578E7E;
    --bgimage : none;
} 

body.theme5 {
    --bgcolor1 : #CB6040;
    --bgcolor2 : #FD8B51;
    --textlight : #F2E5BFcc;
    --icon : #F2E5BF99;
    --text1 : #F2E5BF;
    --text2 : #F2E5BF;
    --bgimage : none;
}

body.theme6 {
    --bgcolor1 : #333;
    --bgcolor2 : #eee;
    --textlight : #eeeeee66;
    --icon : #eeeeee66;
    --text1 : #eee;
    --text2 : #444;
    --bgimage : none;
}

body.theme7 {
    --bgcolor1 : #eee;
    --bgcolor2 : #333;
    --textlight : #44444466;
    --icon : #44444466;
    --text1 : #444;
    --text2 : #eee;
    --bgimage : url('papirus.jpg');
}

body.theme8 {
    --bgcolor1 : #27445D;
    --bgcolor2 : #71BBB2;
    --textlight : #EFE9D566;
    --icon : #EFE9D533;
    --text1 : #EFE9D5;
    --text2 : #27445D;
    --bgimage : url('darkwood.jpg');
}

body.theme9 {
    --bgcolor1 : #578E7E;
    --bgcolor2 : #FFFAEC;
    --textlight : #F5ECD5;
    --icon : #F5ECD5;
    --text1 : #FFFAEC;
    --text2 : #578E7E;
    --bgimage : url('brownwood.jpg');
} 

body.theme10 {
    --bgcolor1 : #CB6040;
    --bgcolor2 : #FD8B51;
    --textlight : #F2E5BFcc;
    --icon : #F2E5BF99;
    --text1 : #F2E5BF;
    --text2 : #F2E5BF;
    --bgimage : url('darkwood.jpg');
}

body.theme11 {
    --bgcolor1 : #333;
    --bgcolor2 : #eee;
    --textlight : #eeeeee66;
    --icon : #eeeeee66;
    --text1 : #eee;
    --text2 : #444;
    --bgimage : url('brownwood.jpg');
}





* {
  font-family: "Roboto Condensed", sans-serif;
  font-style: normal;
  margin:0;
  padding:0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

html,body{
    height: 100%;
    max-height: 100%;
}

body{
    display:flex;
    flex-direction: column;
    background-color: var(--bgcolor1);
    background-image: var(--bgimage);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    padding:0rem 0rem .5rem 0rem;
}

header{
    display: flex;
    flex-direction: column;
}

svg {
    width:100%;
    height:50px;
    margin:none;
    padding:none;
}

svg.bottom{
    transform: rotate(180deg);
}

svg path{
    fill:var(--text1);
}

header h2{
    text-align: center;
    font-size: 2rem;
    color: var(--text1)
}

header h2 i{
    margin:0rem 1rem;
    color: var(--icon);
}

section.wellcome{
    text-align: center;
    color: var(--text1);
}

.shadow{
    box-shadow: 0px 0px 5px rgba(0,0,0,.3);
}

nav {
    border:solid 1px var(--bgcolor2);
    border-left:none;
    border-right: none;
    padding:.5rem 0rem;
    margin:.5rem 0rem;
}

nav ul{
    padding:.5rem;
    display:flex;
    gap:1rem;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}

nav ul::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

nav ul li{
    border:solid 1px var(--bgcolor2);
    color: var(--text1);
    padding:.5rem 1rem;
    border-radius: .5rem;
    cursor:default;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

nav ul li.active{
    background-color: var(--bgcolor2);
    color: var(--text2);

}

.tabcontent{
    padding:0rem .5rem;
    display:flex;
    flex-direction: column;
    gap:1rem;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}

.tabcontent::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

.tabcontent .item{
    display:flex;
    justify-content: space-between;
    border:solid 1px var(--bgcolor2);
    background-color: var(--bgcolor2);
    padding:2rem 1rem;
    border-radius: .5rem;
    align-items: center;
}

.tabcontent .item .urun{
    font-size: 1rem;
    color:var(--text2);
}

.tabcontent .item .fiyat{
    font-size: 1.5rem;
    color: var(--text2);
}

@media (min-width:1025px){
    html,body{
        min-height: 100%;
        height: auto;
        max-height:fit-content;
    }
    body{
        width: 50%;
        margin:auto;
        padding:0rem 0rem 2rem 0rem;
    }
    .tabcontent{
        overflow:auto;
    }
}