:root 
{
  --base-grid: 8px;
  --colour-white: #fff;
  --colour-black: #1a1a1a;
}

*, :after, :before 
{
    box-sizing: border-box;
}

html 
{
  margin: 0;
  padding: 0;
  background-image: linear-gradient(-170deg,#064997 20%,#105ba7);
  background-position: 100%;
}

body 
{
  background-image: ;
  background-size: 112px 112px,112px 112px,56px 56px,56px 56px,28px 28px,28px 28px;
  font-family: Josefin Sans, sans-serif;
    margin: 0;
  padding: 0;
}

.links 
{
  --link-size: calc(var(--base-grid)*20);
  color: var(--colour-black);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}

.links__list 
{
  position: relative;
  list-style: none;
}

.links__item 
{
  width: var(--link-size);
  height: var(--link-size);
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(var(--link-size)/-2);
  margin-left: calc(var(--link-size)/-2);
  --angle: calc(360deg/var(--item-total));
  --rotation: calc(140deg + var(--angle)*var(--item-count));
  transform: rotate(var(--rotation)) translate(calc(var(--link-size) + var(--base-grid)*2)) rotate(calc(var(--rotation)*-1));
}

.links__link 
{
  opacity: 0;
  animation: on-load .3s ease-in-out forwards;
  animation-delay: calc(var(--item-count)*150ms);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background-color: var(--colour-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.links__icon 
{
  width: calc(var(--base-grid)*8);
  height: calc(var(--base-grid)*8);
  transition: all .3s ease-in-out;
  fill: var(--colour-black);
}

.links__text 
{
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  height: calc(var(--base-grid)*2);
  font-size: calc(var(--base-grid)*2);
  display: none;
  bottom: calc(var(--base-grid)*8.5);
  animation: text .3s ease-in-out forwards;
  color: red;
  font-weight: bold;
}

.links__link:after 
{
  content: "";
  background-color: transparent;
  width: var(--link-size);
  height: var(--link-size);
  border: 2px dashed var(--colour-white);
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s cubic-bezier(.53,-.67,.73,.74);
  transform: none;
  opacity: 0;
}

.links__link:hover .links__icon 
{
  transition: all .3s ease-in-out;
  transform: translateY(calc(var(--base-grid)*-1));
}

.links__link:hover .links__text 
{
  display: block;
}

.links__link:hover:after 
{
  transition: all .3s cubic-bezier(.37,.74,.15,1.65);
  transform: scale(1.1);
  opacity: 1;
}

@keyframes on-load 
{
  0% 
  {
    opacity: 0;
    transform: scale(.3);
  }
  70% 
  {
    opacity: .7;
    transform: scale(1.1);
  }
  100% 
  {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes text 
{
  0% 
  {
    opacity: 0;
    transform: scale(0.3) translateY(0);
  }
  100% 
  {
    opacity: 1;
    transform: scale(1) translateY(calc(var(--base-grid)*5));
  }
}

p 
{
    font-family: Verdana, sans-serif;
    color: white;
}

.tabsummary 
{
    font-family: Verdana, sans-serif;
    color: white;
	font-weight: bold;
}

.div1 
{
  width: 800px;
  height: 440px;  
  padding: 0px;
  border: 3px solid red;
  box-sizing: border-box;
}

h1
{
  color: white;
  font-weight: bold;
}

h2
{
  color: YellowGreen;
  font-weight: bold;
}

h3
{
  color: YellowGreen;
  font-weight: bold;
}

h4
{
  color: white;
  font-weight: bold;
  font-style: italic;
}

.ul 
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.li 
{
  float: left;
}

.li a 
{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.li a:hover:not(.active) 
{
  background-color: #111;
}

.active 
{
  background-color: #04AA6D;
}

header 
{ 
    position: relative; /* Establishes a positioning context */ 
    height: 60px; /* Adjust height as needed */ 
    background: #f8f8f8; /* Optional: background color for the header */ 
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
} 

.logoleft 
{ 
    position: absolute; /* Positioning the logo absolutely */ 
    top: 10px; /* Adjust as needed */ 
    left: 10px; /* Adjust as needed */ 
    height: 50px; /* Adjust height as needed */ 
} 

.logoright
{ 
    position: absolute; /* Positioning the logo absolutely */ 
    top: 10px; /* Adjust as needed */ 
    right: 10px; /* Adjust as needed */ 
    height: 150px; /* Adjust height as needed */ 
} 

.logomame
{ 
    position: absolute; /* Positioning the logo absolutely */ 
    top: 10px; /* Adjust as needed */ 
    center: 10px; /* Adjust as needed */ 
    height: 50px; /* Adjust height as needed */ 
} 

.a:link 
{
  color: lightgreen;
  background-color: transparent;
  text-decoration: underline;
}

.a:visited 
{
  color: lightgreen;
  background-color: transparent;
  text-decoration: underline;
}

.a:hover 
{
  color: lightgreen;
  background-color: transparent;
  text-decoration: underline;
}

.a:active 
{
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

@font-face 
{
    font-family: 'ArcadeFontNormal';
    src:url("ARCADE_N.TTF") format('embedded-opentype'), 	/* Internet Explorer */;
	src:url("ARCADE_N.TTF") format('woff2'), 				/* Super Modern Browsers */
	src:url("ARCADE_N.TTF") format('woff'), 				/* Pretty Modern Browsers */
	src:url("ARCADE_N.TTF") format('truetype'), 			/* Safari, Android, iOS */
	src:url("ARCADE_N.TTF") format('svg');					/* Legacy iOS */
}

@font-face 
{
    font-family: 'ArcadeFontInterlaced';
    src:url("ARCADE_I.TTF") format('embedded-opentype'), 	/* Internet Explorer */;
	src:url("ARCADE_I.TTF") format('woff2'), 				/* Super Modern Browsers */
	src:url("ARCADE_I.TTF") format('woff'), 				/* Pretty Modern Browsers */
	src:url("ARCADE_I.TTF") format('truetype'), 			/* Safari, Android, iOS */
	src:url("ARCADE_I.TTF") format('svg');					/* Legacy iOS */
}

@font-face 
{
    font-family: 'ArcadeFontRounded';
    src:url("ARCADE_R.TTF") format('embedded-opentype'), 	/* Internet Explorer */;
	src:url("ARCADE_R.TTF") format('woff2'), 				/* Super Modern Browsers */
	src:url("ARCADE_R.TTF") format('woff'), 				/* Pretty Modern Browsers */
	src:url("ARCADE_R.TTF") format('truetype'), 			/* Safari, Android, iOS */
	src:url("ARCADE_R.TTF") format('svg');					/* Legacy iOS */
}

.arcadefontnormal
{
    font-family: 'ArcadeFontNormal';
}

.arcadefontinterlaced
{
    font-family: 'ArcadeFontInterlaced';
}

.arcadefontrounded
{
    font-family: 'ArcadeFontRounded';
}

.button-download 
{
	display: inline-block;
    background-color: red;
    color: white;
    padding: 12px 18px;
    border: 2px solid white;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
	box-shadow: 0 9px #999;
}

.button-download:hover 
{
  background-color: #04AA6D; /* Green */
  color: white;
}

.button-download:active 
{
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}