body {
font-family: 'hind';
    font-weight: normal;
    font-style: normal; 
    font-size: 12pt; 
    background-image: url("pics/greenplaid.jpg");
    background-size:200px;
    margin:auto;
    overflow:auto;
}

@font-face {
    font-family: 'Polea';
    src: url('fonts/polea-extra-bold-demo/Polea Extra Bold DEMO.otf') format('opentype');
}

@font-face {
    font-family: 'Hind';
    src: url('fonts/Hind/Hind-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
      }
      
      
@font-face {
        font-family: 'Hind';
        src: url('fonts/Hind/Hind-Bold.ttf') format('opentype');
        font-weight: bold;
          }


main {
    width:90%;
    max-width: 700px;
    margin: 20px;
    float:right;
    padding: 5px;
    position:absolute;
    left:700px;
   background-blend-mode: overlay;
    background-size:cover;
    text-align:left;
    background: linear-gradient(#fffd82 0.2%, #fff067 0.5%, #ff8f27 5%,
     #ff8e43 95%, #ff793b 99.5%, #ff5303 99.8%);
    border-radius: 200px 20px 20px 20px;
    border-width: 2px;
    border-color:#ff5656;
    border-style: solid;
}

.container {
     margin:5px;
    gap: 5px;
    display:grid;
    height:900px;
    grid-template-areas: 'header header' 'menu menu' 'blog dates';
    grid-template-columns: 70% 30%;
    grid-template-rows: 25% 3% 70%;

}

.header {
    background-image: url("pics/BayerDithering.png"), url("pics/plantwindow.jpg");
    background-position:center;
    grid-area: header;

    background-blend-mode:overlay;
    max-width:700px;
    position: relative;
    float: right;
    border-radius: 195px 15px 8px 8px;
    border: 1px #42b848 solid;
    
}


.title {
    float: right;
    margin-top: 120px;
    margin-right: 15px;
    font-size: 50px;
    -webkit-text-stroke: 2px #e63213;
    background-clip: text;
    background-image: linear-gradient(to right, rgb(255, 182, 71), rgb(255, 211, 66));
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Polea;
    
}

.menu {
    grid-area: menu;
    background: linear-gradient(#d6f71e,#e8fc37 50%, #b4eb36 50%, #70da33);
    border-radius:8px;
    border: 1px solid #61ac00;
    text-align: center;
}

.blogcontainer {
    grid-area: blog;
    background: linear-gradient(#e6ff58 0.5%, #e8fc37 1%, #cce927 5%, #cce927 95%, #a3ec2c 98.5%, #89e411 100%);
    border-radius:8px;
    box-sizing: border-box;
    grid-template-areas: 'box';
    grid-template-rows: 10%;
    padding:10px;
    border: solid #59940c 1px;
}

.blogcontainer2 {
    background: url("pics/BayerDithering.png"), #ecff80 ;
    height:97%;
    background-blend-mode: overlay;
    box-sizing:content-box;
    grid-area: box;
    border-radius: 8px;
    padding: 12px;
    border: dashed #829e07 1px;
    overflow: auto;

}

.blogheading {
    background:url("pics/BayerDithering.png"),  #b8df2c;
    width: 60%;

    height: 7%;
    background-blend-mode:overlay;
    border-radius: 10px;
}

.blogentry {
    color:#355511;
    text-indent: 2em;
}

.datescontainer {
    grid-area: dates;
    border-radius:8px;
        background: linear-gradient(#e6ff58 0.5%, #e8fc37 1%, #cce927 5%, #cce927 95%, #a3ec2c 98.5%, #89e411 100%);
    padding:10px;
    border: solid #59940c 1px;
}

.datescontainer2 {
    display: flex;
    background-blend-mode: overlay;;
     background: url("pics/BayerDithering.png"), #ecff80 ;
    height:97%;
    box-sizing:content-box;
    grid-area: box;
    border-radius: 8px;
    padding: 8px;
    border: dashed #829e07 1px;
    overflow: auto;
    flex-direction: column;
    gap: 10px;

}

.datebutton {
    background: url("pics/BayerDithering.png"), #ffb13d;
    display:flex;
    
    background-blend-mode: overlay;
    width: 80%;
    border: 1px #fd6b31 solid;
    border-radius: 5px;
    margin: 5px;
    text-align: center;
    justify-content:center;
}

.datebutton a {
    color:#b33a15;
    font-weight:bold;
    text-shadow:0 0 3px #ffdbab, 0 0 5px  #ff9100;
}
 
.menu a {
    color:#ff4800;
    text-shadow:0 0 3px #1fc427, 0 0 5px #aa9900;
}

h1 {
    font-size: 28px;
    color:#355511;
}