:root{
    --header-color: #769c18;
    --text-main: #ec901e;
    --bg: #a3c8a3;
    --content-bg: white;
    --font-main: "Helvetica Neue", Arial, sans-serif;
}

.text-primary, a{
    color: var(--text-main) !important;
}

header .navbar{
    background-color: var(--header-color) !important;
}

footer{
    background-color: var(--header-color) !important;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

footer h3{
    color: var(--text-main);
    text-align: center;
}

.nav-link, .nav-link-active {
    font-size: 1.2rem !important;
    font-weight: bold;
    padding: 0.5rem 1rem;
}

.nav-link-active {
    font-style: italic;
}

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

.main{
    background-color: var(--content-bg);
    padding-bottom: 2rem;
}

.sidebar{
    padding-left: 2.4rem;
    text-align: start;
    position: relative;
    
}

.sidebar-content {
    background-image: url("../content/background.jpg");
    background-size: cover;
    background-position: center;
    padding: 1rem;
    width: 15rem;
    color: black !important; 
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2),
        4px 0 6px rgba(0, 0, 0, 0.1),
        -4px 0 6px rgba(0, 0, 0, 0.1); 
}
.main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main h1, .main h2 {
    text-align: center;
    color: var(--header-color);
}

.main h3{
    padding-left: 30px;
    color: var(--text-main);
}


.main h4{
    padding-left: 30px;
    color: var(--header-color);
    font-size: 22px;
}

.sidebar-content a:link{
    color: black !important; 
}

.sidebar-content a:visited {
    color: gray !important;
}

.cikkek .row{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.cikkek h3{
    color: var(--header-color);
}

.col-4 img {
  width: 26rem;
  height: auto;
  padding: 1rem
}

.odd .col-8{
    text-align: right;
}

.odd .col-8 h1{
    text-align: right;
}
.even .col-8{
    text-align: left;
}

.even .col-8 h1{
    text-align: left;
    padding-left: 2rem;
}

.order-md-last h1{
    text-align: center;
}

.recept{
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.tablazat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

table {
  width: 20rem;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 1rem;
}

th, td {
  border: 1px solid black;
  padding: 8px 12px;
  text-align: left;
}

.recept img{
    padding: 2rem;
}

.form{
    background-color: var(--header-color);
    box-shadow: 0 0 15px gray;
}

.form h1{
    padding-top: 1rem;
    text-align: center;
}

.vege h1{
    padding-top: 2rem;
}

.forrasok{
    width: 100%;
    border-collapse: collapse;
}

video {
  width: 100%;
  height: auto; 
}