:root{
    --primary-color:#ffffff;   
    --bg-color:#e9f6ec;
}

@font-face{
    font-family:'lotus';
    src:url('lotus.woff2');
}

*{
    outline:none;
    box-sizing: border-box;
    max-width:100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin:0;
    padding:0;
}

html,body{
    height:100%;
}

body{
    background:var(--bg-color);
    display:flex;
    flex-direction:column;
    text-align:center;
}

header{
    padding:5px 20px;
    background:var(--primary-color);
    border-bottom:3px solid #57b824;
    color:white;
    border-radius:0 0 15px 15px;
}

main{
    flex:1;
}

.holder{
    width:1100px;
    display:inline-block;
}

.view main .holder{
    width:700px;
    background:white;
    background-size:100%;
    padding:20px;
    height:100%;
}

header .right{
    text-align:right;
    flex:1;
    text-align:center;
}
header .right img{
    width:120px;
}
header .right .logo a{
    color:white;
    text-decoration:none;
    font-size:30px;
    font-family:'lotus';
}

header .left{
    text-align:left;
}


.list {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.list a {
    display: inline-block;
    padding: 10px 15px;
    background: #f2f2f2;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.2s;
}

.list a:hover {
    background: #ddd;
}

.card{
    height:260px;
    width:230px;
    position:relative;
    border-radius:4px;
    box-shadow:2px 3px 10px #222222;
}

.cardkernel{
    border-radius:4px;
    position:absolute;
    width:100%;
    bottom:0;
    padding:5px 10px;
    text-align:right;
    background:linear-gradient(#00000033 ,rgb(0 0 0));
    color:white;
}

.c-title{
    margin-bottom:1px;
    font-family:'lotus';
    font-size:19px;
    border:1px solid #afadad;
    display:inline-block;
    padding:3px 10px;
    line-height:23px;
    margin-bottom:10px;
    cursor:pointer;
    background:rgba(255, 255, 255, 0.1);
    border-radius:6px;
}

.c-title:hover{
     background:rgb(255 255 255 / 22%);
}

.c-content{
    margin-bottom:5px;
    font-family:'lotus';
    line-height:16px;
    color:#d7d7d7;
}

.cardkernel a{
    padding:5px;
    text-decoration:none;
    color:#ffffff;
    font-weight:bolder;
    margin-top:5px;
    display:inline-block;
    font-family:'lotus';
}

@media (max-width:516px){ 
    .card{width:100%;}
    .list{ flex-direction:column;}
}

.postkernel{
    height:320px;
    margin:10px 0;
    border-radius:20px;
    box-shadow:2px 2px 8px #000000;
}

.imagekernel{
    display:flex;
    flex-direction:center;
    justify-content:center;
    align-items:center;
    height:100%;
    background:rgba(0,0,0,0.1);
     border-radius:20px;
}
.post .title{
    font-size:30px;
    font-family:'lotus';
    color:#2d2d2d;
    font-weight:600;
    margin-top:20px;
    margin-bottom:30px;
    text-decoration:underline;
    
}

.post .content{
    padding:20px;
    text-align:right;
    font-size:25px;
    font-family:'lotus';
}

 

footer{
    background:#71ca52;
    padding:15px;
    font-size:14px;
    border-radius:15px 15px 0 0;
    color:white;
}

.credits{
    margin-top:10px;
}

footer a{
    text-decoration:none;
    color:white;
}



.banner{
    margin:50px 0;
}

.banner a{
    text-decoration:none;
    color:yellow;
    background:red;
    font-size:25px;
    border-radius:50px;
    padding:20px 30px;
}

.banner a:hover{
    background:yellow;
    color:red;
}