@font-face {
    font-family: sajat;
    src: url(fonts/good\ times\ rg.ttf);
}
body{
    margin: 0;
    min-height: 100vh;
    font-family: sajat;
    background-color: black;
    /*background-image: url(images/vecteezy_ocyber-network-protection-future-technology-background_.jpg);
    background-repeat: no-repeat;
    background-size: cover;*/
    color: whitesmoke;   
    font-size: 1rem;
    display: flex;
}
.container{
    margin: auto;
    display: grid;    
    grid-template-rows: 50px auto 1fr auto 80px;
    grid-template-columns: 1fr 8fr 1fr;
    height: 98svh;  
    max-width: 99%;
    grid-template-areas: 
            "header         header          header"
            "left-aside     banner          right-aside"
            "left-aside     main            right-aside"
            "left-aside     low-content     right-aside"
            "footer         footer          footer";
    grid-gap: 15px;
    
}
header {
    padding: 5px;
    grid-area: header;
    border: 1px solid rgb(85, 114, 243); 
    border-radius: 5px;
    box-shadow: 5px 2px 7px 2px #6275c7bd;       
    display: flex;
    flex-direction: row;
    
}
header span{
    display: flex;
    justify-content: start;
}
header ul{
    list-style-type: none;
    margin: 0;
}
header li{
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
}

header li:hover{
    border-radius: 5px;
    box-shadow: 0 0 10px 5px #48abe0;
}
a:link, a:visited, a:active{
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.banner{
    justify-content: center;
    padding: 5px;
    grid-area: banner;
    border: 1px solid rgba(255, 251, 1, 0.568);
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #4e4e4e; */       
}
main{    
    padding: 5px;
    grid-area: main;
    border: 1px solid rgba(76, 161, 240, 0.507);
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #313131; */
}  
.left-aside {
    padding: 5px;
    grid-area: left-aside;  
    border: 1px solid rgba(27, 240, 38, 0.5); 
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #585858;*/   
}
.right-aside {
    padding: 5px;
    grid-area: right-aside;
    border: 1px solid rgba(222, 41, 228, 0.507);
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #585858;*/
}
.low-content{
    padding: 5px;
    grid-area: low-content;
    border: 1px solid rgba(226, 22, 124, 0.541);
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #585858; */      
}
footer {
    padding: 5px;
    grid-area: footer;
    border: 1px solid rgba(52, 127, 226, 0.596);
    border-radius: 5px;
    /*box-shadow: 5px 3px 7px 2px #585858;*/ 
    text-align: center;      
}
@media(max-width:580px){
    .container{
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "banner"
            "left-aside"
            "main"
            "right-aside"
            "low-content"
            "footer";
    }
    header{
        flex-direction: column;
    }
    header li{
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }
}
span{
    color: rgb(92, 105, 223);
}
/*pre tag törés*/
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
  }

img{
    border-radius: 5px;
    filter: blur(1px);
    opacity: 50%;
}
textarea{
    background-color: none;
    color: white;
    float: left;
    width: 100%;
    min-height: 75px;
    outline: none;
    resize: none;
    border: 1px solid grey;
}