:root {
  --lines-color: rgb(41, 41, 41);
  --bg-color1: rgb(255, 255, 2);
  --bg-color2: purple;
  --shadow-color: rgb(69, 69, 0);
  --box-color1: yellow;
  --box-color2: rgb(95, 95, 0);
  /* --font-color1: rgba(0, 0, 0, 0.79); */
  --font-color1: purple;
  --font-color2: rgb(74, 74, 74);
}

@font-face {
  font-family: beste;
  src: url('StreetRuins.ttf');
}

.block {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  

  border-top: 1px solid var(--lines-color);
  border-left: 1px solid var(--lines-color);
  border-right: 1px solid var(--bg-color2);
  border-bottom: 1px solid var(--bg-color2);
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  
  box-shadow: 10px 10px 15px var(--shadow-color);

  background-color: var(--box-color1);
  
  padding: 10px;
  margin-bottom: 20px;
  flex: 0 0 50% /*calc(50% - 20px)*/;
  
  /* background-image: linear-gradient(var(--box-color1), var(--box-color2)); */
  animation: testAni 0.1s ease;
}


/* .container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
} */

@keyframes testAni {
  0% {
    margin-right: 50%;
    margin-bottom: 400px;
  }
}

body {
  background-color: var(--bg-color1);
  /* background-image: url(ok.png); */
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='diagonalLines' patternUnits='userSpaceOnUse' width='10' height='10' patternTransform='rotate(45)'%3E%3Cline x1='0' y1='0' x2='0' y2='10' stroke='black' stroke-width='2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23diagonalLines)'/%3E%3C/svg%3E");
  /* background-repeat:no-repeat; */

  color: var(--font-color1);
  animation: gradientAnimation 30s ease infinite;

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}

@keyframes gradientAnimation {
  0% {}

  50% {
    background-color: var(--bg-color2);
  }

  100% {
    background-position: var(--bg-color1);
  }
}

#title {
  stroke: var(--font-color2);
  fill: var(--font-color1);
}

#titleb {
  fill: greenyellow;
}

a {
  color: rgb(0, 119, 255);
  transition: color .5s ease;
  transition: background-color .5s ease;
}

a:hover {
  color: yellow;
  background-color: purple;
  /* font-size: 20pt; */
}

hr {
  color: var(--lines-color);
}

#footer {
  font-size: xx-small;
  color: var(--font-color2);
}

#surprise {
  font-size: x-large;
}