:root {
 --birch-source:  url("https://mircuskasarok.neocities.org/images/birch_bg.png");
 --lights-source: url("https://mircuskasarok.neocities.org/images/fenyek.gif");
 --bg-top-color: rgb(230, 157, 0);
 --bg-bottom-color: rgb(0, 0, 0);
 --menu-base-color: rgb(128, 87, 0);
 --menu-hover-color: rgb(179, 122, 0);
 --textfield-bg-color: rgb(255, 231, 179);
 --link-color: rgb(128, 87, 0);
 --link-color-visited: rgb(51, 35, 0);
}

* {
  box-sizing: border-box;
}

html {
    min-height: 100%;
    position:relative;
}

body {
    margin: 0px;
    height:100%;

    background-color: var(--bg-top-color);
    background-image: var(--birch-source);
    
    background: var(--birch-source), linear-gradient(var(--bg-top-color), var(--bg-bottom-color));
    background-size: 500px, auto;

    font-family: Verdana, Tahoma, sans-serif;
    font-size: 15px;
}

#fake-bg{
    background:  var(--lights-source) left repeat-y, var(--lights-source) right repeat-y;
    background-size: 10vw;
    filter: blur(4px);
    min-width: 100%;
    
    position: absolute;
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
    overflow:hidden;
    z-index: -8;
}


header{
    overflow: hidden;
    width: fit-content;
    margin: 0px auto;
    padding: 20px;
}



#menu{
    width: fit-content;
    height: 100%;
    text-align: center;
}
    
#menu ul{
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    float: left;
}
    
#menu li{
    display: inline-block;
    padding: 5px 30px;
    border: 3px solid black;
    border-radius: 4px;
    background-color: var(--menu-base-color);
}

#menu li:hover{
    background-image: var(--lights-source);
    background-size: 50px;
    background-position: bottom;
    background-color: var(--menu-hover-color);
}

#menu a {
    text-decoration: none;
    color: white;
}

#menu a:active {
    color: white;
}

#menu a:visited {
    color: white;
}


.textfield {
    background-color: var(--textfield-bg-color);
    border: 3px solid black;
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    overflow-wrap: break-word;
}

.textfield a {
    color: var(--link-color);
}

.textfield a:visited {
    color: var(--link-color-visited);
}


#main-container {
    max-width: 90vw;
    padding: 100px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
}

#entry-container {
    text-align:center;
}

.entry-image {
    display: block;
    width: auto;
    max-width: 100%;
    min-height: 50px;
    max-height: 250px;
    margin-left: auto;
    margin-right: auto;
    
}


.entry {
    min-width: 250px;
    max-width: 300px;
    
    padding: 15px;
    margin: 5px;
    display: inline-block;

    position: relative;
    vertical-align: middle;
    width: 30%;

}


.date {
    font-style: italic; 
}

#about-container{
    max-width: 90vw;
    margin: auto;
    text-align: center;
    height: fit-content;
}

.aboutfield {
    width:43%; 
    min-width: 200px; 
    display: inline-block; 
    vertical-align: middle;
}

.dev-entry {
    padding-bottom: 20px;
    border-bottom: 2px solid black;
}


@media (max-width: 600px) {
 
 
 .entry{
    max-width: 100%;
    min-width: 0px;
    margin: 5px auto;
    width: 100%;
    
 }
 
 
 .entry-image {
    display: block;
    width: auto;
    max-width: 100%;
    min-height: 0px;
    max-height: 250px;
    margin-left: auto;
    margin-right: auto;
    
}

 
 #main-container {
    width: 60%;
    padding: 0px;
    padding-top: 0px;
}

 
}