/* global */

*{
    box-sizing: border-box;
}

body{
    background-image: url(ss036.gif);
}

html{

    font-family: Georgia, 'Times New Roman', Times, serif;
    cursor: url(kurzor.png), default;
}



a{
    color: yellow;
    font-weight:bolder;
    text-decoration: none;
}

h1{
    font-size: 37px;
    font-weight:border;
    font-family: serif;
    color: transparent;
    text-align: center;
    animation: effect 2s linear infinite;
}

@keyframes effect {
    0% {
        background: linear-gradient(
            #ff0000, #c29090);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(
            #3CE7D7, #000FFF);
        -webkit-background-clip: text;
    }
}



/* home */

.container{
    margin: 20px;
    padding: 20px;
}

.subforum{
    margin-top: 20px;

}

.forum-tiltle{
    background-color: darkgreen;
    padding: 5px;
    border-radius: 5px;
    margin: 4px;
    position: relative;
    left: 130px;
    width: 30cm;
    height: 100PX;
    background-image: url(Névtelen.jpg);
    
}


#medve {  
    width: 200px;  
    height: 125px;   
    object-fit: none;  
    object-position: 200px 100px; 
    
}  


.subforum-row{
    display: grid;
    grid-template-columns: 7% 60% 13% 20%;
    margin: 4px;
    border-radius: 5px;
    background-image: url(Névtelen.png);
    position: relative;
    left: 130px;
    width: 30cm;
    color: yellow;
    
}

.subforum-colum{
    padding: 10px;
    margin: 4px; 
    border-radius:4px;
    background-color: forestgreen;
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 460){
    .container{
        margin: 10px;
        padding: 10px;

    }

    .subforum-row{
        display: grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: 65% 35%;
    }
    
    .subforum-colum{
        padding: 10px;
        margin: 4px; 
        border-radius:4px;
        background-color: forestgreen;
    }
}

.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-image: url(faoldal.png); /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    align-content: center;
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 6px 6px 6px 25px;
    text-decoration: none;
    font-size: 20px;
    color: #64d86b;
    display: block;
    font-family: monospace;
    
    
  }

  .sidenav p{
    padding:6px 6px 6px 25px ;
    color:#64d86b;
    font-family: monospace;
    font-size: 10px;
  }

  .sidenav img {
    padding: 6px 6px 6px 25px;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  /* Style page content */
  .main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

.gomb1{
    background-image:url(button.gif);
}

.szöveg{ 
    margin: 4px;
    border-radius: 5px;
    background-color: darkgreen;
    position: relative;
    left: 170px;
    width: 30cm;
    
}

.karacsony{
    margin: 4px;
    border-radius: 5px;
    background-image: url(karacson1.gif);
    position: relative;
    left: 170px;
    width: 30cm;
    height: 60px;
}

.linkekfej { 
    margin: 4px;
    border-radius: 5px;
    background-image: url(kiraly.png);
    position: relative;
    left: 170px;
    width: 30cm;
    height: 90px;
}

.linkektest { 
    margin: 4px;
    border-radius: 5px;
    background-image: url(linktest.png);
    position: relative;
    font-size: 16px;
    color: #ff0000;
    left: 170px;
    width: 30cm;
    height: 340px;
}

.main{margin: 4px;
    border-radius: 5px;
    background-color: darkgreen;
    position: relative;
    left: 170px;
    width: 30cm;
    color: #ff0000;
}

.kiskép{
    padding: 410px 6px 16px 5px;
}

.táj{
    margin: 4px;
    border-radius: 5px;
    background-image: url(táj.png);
    position: relative;
    left: 170px;
    width: 30cm;
    height: 650px;

}

    .táj img{
    left: 460px;
    
    position: relative;

    }