body {
    text-align: center;
    color: white;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.goback {
  color: white;
  position:absolute;
  top: 3vh;
  left: 3vw;
  background-color: #d9d9d93b;
  border-radius: 9px;
  padding: 5px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-decoration: none;
}

.goback:hover {
  background-color: rgba(109, 247, 194, 0.375);
  text-decoration: none;
}


@font-face {
    font-family: 'title'; /*a name to be used later*/
    src: url("../fonts/Retrogression-Regular.ttf"); /*URL to font*/
}

h1 {
    font-family: 'title';
    font-size: 7em;
}

a {
    color: #CB4D68FF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    
    border-radius: 0.5em;
    padding: 20px;
    height: 95vh;
}

.blog {
    float: left;
    width: 49%;
    align-content: center;
    height: 95vh;
}

.board {
    float:left;
    overflow-y: scroll;
    height: 95vh;
    width: 46%;
    align-content: flex-start;
    display:flex;
    flex-direction: row;
    margin: 10px;
    border-radius: 0.5em;
    background: white;
    border: 2px solid #606C81FF;
    box-shadow: 3.3px 6.6px 6.6px #5BB361FF;
    flex-wrap:wrap;
    padding: 10px;
    justify-content: space-around
}

.post {
    color: #606C81FF;
    height: fit-content;
    width: 40%;
    border-radius: 0.5em;
    background: white;
    border: #606C81FF solid;
    margin: 10px;
    box-shadow: 3.3px 6.6px 6.6px #F99252FF;
    padding: 10px;
}

.star {
    height: 70px;
    width: 70px;
    position: absolute;
    animation-name: star-animation;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

@keyframes star-animation {
    0% { transform: translateY(0px);}
    50% { transform: translateY(-10px)}
    100% { transform: translateY(0px)}
  }


@property --a{
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
  }
  @property --p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
  }
  @property --c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  @property --c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
  }
  
  html {
    --s: 80px;
    --_g: #0000, var(--c1) 2deg calc(var(--a) - 2deg),#0000 var(--a);
    background: 
      conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p),var(--_g)),
      conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p),var(--_g)),
      conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p),var(--_g)),
      conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p),var(--_g)),
      conic-gradient(from calc(-135deg - var(--a)/2) at bottom var(--p) left  var(--p),var(--_g)),
      conic-gradient(from calc(-135deg - var(--a)/2) at bottom var(--p) left  var(--p),var(--_g)),
      conic-gradient(from calc( 135deg - var(--a)/2) at bottom var(--p) right var(--p),var(--_g)),
      conic-gradient(from calc( 135deg - var(--a)/2) at bottom var(--p) right var(--p),var(--_g))
      var(--c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: m 2s infinite alternate linear;
  }
  
  @keyframes m {
    0%,15% {
      --a: 135deg;
      --p: 20%;
      --c1: #6A3771FF;
      --c2: #CB4D68FF;
      background-position: 0 0,var(--s) var(--s);
    }
    45%,50% {
      --a: 90deg;
      --p: 25%;
      --c1: #6A3771FF;
      --c2: #CB4D68FF;
      background-position: 0 0,var(--s) var(--s);
    }
    50.01%,55% {
      --a: 90deg;
      --p: 25%;
      --c2: #6A3771FF;
      --c1: #CB4D68FF;
      background-position: var(--s) 0,0 var(--s);
    }
    85%,100% {
      --a: 135deg;
      --p: 20%;
      --c2: #6A3771FF;
      --c1: #CB4D68FF;
      background-position: var(--s) 0,0 var(--s);
    }
  }