:root {
    --frame-width: 1cm;
}

html, body{
    margin:0
}

.full-screen{
    position: fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
}


.css-effect-area.blur{
    backdrop-filter: blur(30px);
    background: #3335;
    background: radial-gradient(circle, #3335 65%, rgba(42,55,45,1) 100%);
    animation: 60s blurAnimation infinite;
}
@keyframes blurAnimation {
    from {opacity: .8 ;}
    10%  {opacity: .5; }
    15%  {opacity: .25;}
    45%  {opacity: .30;}
    55%  {opacity: .5; }  
    70%  {opacity: .25;}  
    to   {opacity: .81;}
  }


.frame {
    display:grid;
    grid-template-columns: var(--frame-width) 1fr var(--frame-width);
    grid-template-rows: var(--frame-width) 1fr var(--frame-width);
}
.frame .top {background: linear-gradient(0deg, rgba(68,74,54,1) 0%, rgb(146, 135, 90,1) 49%, rgba(133,121,81,1) 49%, rgba(134,111,89,1) 100%);}
.frame .bottom {background: linear-gradient(180deg, rgba(68,74,54,1) 0%, rgb(146, 135, 90,1) 49%, rgba(133,121,81,1) 49%, rgba(134,111,89,1) 100%);}
.frame .left {background: linear-gradient(270deg, rgba(68,74,54,1) 0%, rgb(146, 135, 90,1) 49%, rgba(133,121,81,1) 49%, rgba(134,111,89,1) 100%);}
.frame .right {background: linear-gradient(90deg, rgba(68,74,54,1) 0%, rgba(159,140,104,1) 49%, rgba(133,121,81,1) 49%, rgba(134,111,89,1) 100%);}
.frame .top-left {background: linear-gradient(-45deg, rgba(68,74,54,1) 0%, rgba(159,140,104,1) 24%, rgba(133,121,81,1) 24%, rgba(134,111,89,1) 100%);}
.frame .top-right {background: linear-gradient(45deg, rgba(68,74,54,1) 0%, rgba(159,140,104,1) 24%, rgba(133,121,81,1) 24%, rgba(134,111,89,1) 100%);}
.frame .bottom-left {background: linear-gradient(-135deg, rgba(68,74,54,1) 0%, rgba(159,140,104,1) 24%, rgba(133,121,81,1) 24%, rgba(134,111,89,1) 100%);}
.frame .bottom-right {background: linear-gradient(135deg, rgba(68,74,54,1) 0%, rgb(146, 135, 90,1) 24%, rgba(133,121,81,1) 24%, rgba(134,111,89,1) 100%);}