@font-face {
  font-family: LinuxLibertine;
  src:url("./fonts/LinLibertine_RI.ttf");
}

@font-face {
  font-family: Chintzy;
  src:url("./fonts/chintzy.ttf");
}

@font-face {
  font-family: GoodOldDos;
  src:url("./fonts/Good\ Old\ DOS.ttf");
}

* {
  margin: 0px;
  padding:0px;
  font-family:"LinuxLibertine";
  font-size: 15px;
  font-weight: 250;
  color:#f2f300;
}

{
  scrollbar-width: thin;
  scrollbar-color: transparent;
}

body {
  background-color: #C9AB00;
  color: #0f1a12;
  background-image: url(../ss1.gif);
}

.info {
  margin: 25px;
  padding-left: 3px;
  padding-right: 5px;
  position: relative;
  display: inline-block;
  border: 1px solid #f2f300;
  border-radius: 8px;
}

div { aspect-ratio: 1 }

.img-circle {
  --d: 6.5em; /* image size */
  --rel: 1; /* how much extra space we want between images, 1 = 1 image size */
  --ba: 1turn/var(--m);  /* base angle = 1 full turn divided by number of edges */
  /* (1 + var(--rel))*var(--d) = polygon edge = img size + extra space */
  --r: calc(.5*(1 + var(--rel))*var(--d)/tan(.5*var(--ba))); /* circle radius */
  display: grid;
  width: calc(2*var(--r) + var(--d)); /* container size */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.img-circle a {
  text-decoration: none;
  grid-area: 1/ 1;
  place-self: center;
  width: var(--d);
  --ca: calc(var(--i)*var(--ba));
  transform: 
    rotate(var(--ca)) 
    translate(var(--r))
    rotate(calc(-1*var(--ca)))
}

img { max-width: 100% }

.internal-circle {
  font-size: 100px;
}