@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/*Colours*/
:root {
  --RoseKiss: #F877A3; 
  --VibrantCoral: #FF545D; 
  --Violet: #FB95EB; 
  --PinkCarnation: #FB96CE; 
  --MayaBlue: #76BEF2; 
  --FrozenWater: #c5f4e0;
  --MidnightViolet: #242038;
  --BubblegumFizz: #F85DC3; /* rgb(248, 93, 195) */
  --spiral-font-family: 'Source Code Pro', "SFMono-Regular", Menlo, Consolas, Monaco, monospace;
}

/*Fonts*/

@font-face {
  font-family: "ComputerFont";
  src: url('../Fonts/ComputerFont/Computerfont.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/ComputerFont/Computerfont.woff') format('woff'), 
	     url('../Fonts/ComputerFont/Computerfont.ttf') format('truetype'),
	     url('../Fonts/ComputerFont/Computerfont.svg') format('svg');
}

@font-face {
  font-family: "BytePolice";
  src: url('../Fonts/BytePolice/bytepolice.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/BytePolice/bytepolice.woff') format('woff'), 
	     url('../Fonts/BytePolice/bytepolice.ttf') format('truetype'),
	     url('../Fonts/BytePolice/bytepolice.svg') format('svg');
}

@font-face {
  font-family: "ChintzyCPU";
  src: url('../Fonts/ChintzyCPU/Computerfont.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/ChintzyCPU/Computerfont.woff') format('woff'), 
	     url('../Fonts/ChintzyCPU/chintzy.ttf') format('truetype'),
	     url('../Fonts/ChintzyCPU/Computerfont.svg') format('svg');
}

@font-face {
  font-family: "ChintzyCPUHollow";
  src: url('../Fonts/ChintzyCPU/Computerfont.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/ChintzyCPU/Computerfont.woff') format('woff'), 
	     url('../Fonts/ChintzyCPU/chintzys.ttf') format('truetype'),
	     url('../Fonts/ChintzyCPU/Computerfont.svg') format('svg');
}

body {
  background-image: url('../../Media/blobz.gif');
  background-repeat: repeat;
  color: white;
  font-family: ChintzyCPU;
  letter-spacing: 0.125em;
  font-size: 1.5rem;
  padding-left: 2rem;
}

h1 {
  font-family:BytePolice;
  font-size: 3rem;
  padding-left: 2rem;
  text-shadow: 0.06rem 0 0.06rem #ea36af,
              -0.125rem 0 0.06rem #75fa69;
  animation-duration: 0.01s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  
}

ul {
  list-style-type: circle;
}

p{
  margin-left: 1rem;
  margin-bottom: -0.5rem;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  
}

.glass {
  height: 80%;
  width: 70%;
  box-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  
  /* From https://css.glass */
  background: rgba(118, 190, 242, 0.32);
  border-radius: 2px;
  /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
  backdrop-filter: blur(1.3px);
  -webkit-backdrop-filter: blur(1.3px);
  border: 1px solid rgba(118, 190, 242, 1);
}

.glass-2 {
  height: 80%;
  width: 15%;
  margin: 1rem;
  box-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  
  /* From https://css.glass */
  background: rgba(118, 190, 242, 0.32);
  border-radius: 2px;
  /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
  backdrop-filter: blur(1.3px);
  -webkit-backdrop-filter: blur(1.3px);
  border: 1px solid rgba(118, 190, 242, 1);
}

ws-widget {
  padding-right: 1rem;
  
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  
}

h4 {
  font-family:BytePolice;
  text-shadow: 0.06rem 0 0.06rem #ea36af,
              -0.125rem 0 0.06rem #75fa69;
  animation-duration: 0.01s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin-left: 0.5rem;
}

ul {
  font-size: 1rem;
}

@keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }
    to {
      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
    }
  }
  
#footer {   
   position:fixed;
   left:10px;
   bottom:0px;
   width:100%;
}