.btn-main {
  cursor: pointer;
  width: 80px;
  padding: 8px;
  font-size: 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 14px 6px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 0px #000;
}

.btn-main:hover { background:#fff;box-shadow:none; }

#tree { width:30%;float:left;text-align:center; }
#tree .tree { position:relative; }
#tree img { width:100%;max-width:333px;border-radius: 18px; }
#tree .name { position:absolute; bottom:5px;left: 50%;transform: translate(-50%, 0);background: #ffffffd4;border-bottom: 2px solid #000;
  padding:2px 6px;color:#000;font-family:papyrus,fantasy;font-weight:900; }

#blog { width:calc(70% - 8px);float:left;margin:0 4px; }
#blog a.button-main { width: 99%;display: block;padding: 8px 0;font-size: 22px; }
#blog a.button { background-color: #6d664e;margin: 18px auto 14px;display: block; }
#blog a.button:hover { background-color: transparent; }

.btn-main span { display:block;font-size:12px;font-weight: 700; }

.custom-list {
    list-style: none;
    padding-left: 4px;
    text-align: left;
    margin:5px 0;
    paddin:0 8px;
}
.custom-list li { border-bottom: 1px solid #ddd;padding: 6px 0; }
.custom-list li::before {
    content: "🗡️";
    padding-right: 4px;
    color: green;
}
.post div { text-align:justify; }
.fancy {
  line-height: 1;
  text-align: center;
  height: 25px;
  overflow: hidden;
  font-size: 16px;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  top: 5px;
  width: 800px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/* xxxx */

.concave-box {
  position: relative;
  width: calc(100% - 220px);
  background-color: #4caf50;
  overflow: hidden;
  float: right;
  color: #fff;
  padding: 8px 24px;
  text-align: justify;
  font-size: 12px;
  min-height: 135px;
}

#witaj { float:left;margin-left: 14px; }

.concave-box p { background-color: #ffffff17;padding: 4px 8px;border-radius: 14px; }
.concave-box a { color:brown;font-weight:900; }
a.button h5 { display:inline-block;font-weight:900;margin:8px 0; }

/* Wspólny styl dla wszystkich narożników */
.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
}

/* Górny lewy */
.top-left {
  top: -20px;
  left: -20px;
}

/* Górny prawy */
.top-right {
  top: -20px;
  right: -20px;
}

/* Dolny lewy */
.bottom-left {
  bottom: -20px;
  left: -20px;
}

/* Dolny prawy */
.bottom-right {
  bottom: -20px;
  right: -20px;
}

/* xxx */

@media all and (max-width: 460px) {
  .btn-main { width: 92% !important;display: block;margin: 5px auto; }
  .btn-main span { display:inline-block;font-size:18px; }
}

@media all and (max-width: 740px) {
  #tree { width: 100%; }
  #blog { width: calc(100% - 8px); }
  #blog a.button { margin: 18px auto;font-size:20px; }
  .concave-box { float:none !important;width:100% !important;box-sizing: border-box; }
  #witaj { float:none;margin:0 auto 14px;display:block; }
  .noned { display:none; }
}