@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat&display=swap');

 /* accessibility  */

 #skip-nav {
     position: absolute;
     transform: TranslateY(-150%);
     transition: 0.2s;
     padding: 1em;
     background-color: black;
     color: white !important;
 }

 #skip-nav:focus {
     transform: TranslateY(0%);
 }

/* end of accessibility */


:root {
  --main-color: #572961;
  --secondary-color: #C179B9;
  --light-grey: #C0C0C0;
  --dark-grey: #6C756B;
  --main-white: #ffffff;
  --main-black: #000000;
  
  
  --main-font: 'Montserrat', sans-serif;
  --secondary-font: 'Lobster', cursive;
  
}

body{
	background-color: var(--light-grey);
	color: var(--main-black);
	font-family: var(--main-font);
	background-image: url('/dist/img/background.jpg');
    background-size: cover;
}

h1,h2 {
	font-family: var(--secondary-font);
}
h3,h4,h5,h6 {
	font-family: var(--main-font);
}


.invert {
	color:var(--main-white);
}

#hexagon1{
	
  animation: rotating 40s 0s linear infinite, fadeIn 1s 0s linear, draw 1s 1s linear;
  transform-origin: center center;
  opacity:0;
  animation-fill-mode: forwards;
}
#hexagon3{
	
  animation: rotating 50s 1s linear infinite, fadeIn 1s 1.5s linear;
  
  transform-origin: center center;
  
  opacity:0;
  animation-fill-mode: forwards;
}
#hexagon2{
	
  animation: rotating 60s 2s linear infinite, fadeIn 1s 3s linear;
  
  transform-origin: center center;
  
  opacity:0;
  animation-fill-mode: forwards;
}

#textkatie{
	animation:fadeIn 1s 1s linear;
  opacity:0;
  animation-fill-mode: forwards;
}
#textand{
	animation:fadeIn 1s 1.5s linear;
  opacity:0;
  animation-fill-mode: forwards;
}
#textjosh{
	animation:fadeIn 1s 2s linear;
  opacity:0;
  animation-fill-mode: forwards;
}

.fadein-late{
	animation:fadeIn 1s 2s linear;
  opacity:0;
  animation-fill-mode: forwards;
}


@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
	
	}
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
	
	}
}

.bg-actrand
{
	background-color: var(--main-color);
}

.white-link:hover
{
	color: var(--secondary-color) !important;
}


.warning {
	color:red;
	background-color:yellow;
	padding:20px;
	font-family: consolas, sans-serif;
}