@charset "UTF-8";

@font-face {
  font-family: 'Inconsolata';
  src: url('Inconsolata.otf');
}

/* We begin with Eric Meyer's CSS reset.  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* Optionally, you can reset link styles for visited links */
a:visited {
  color: inherit;
}

/* Remove default link styles */
a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Remove underline */
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  height: 100vh; /* Adjust this value based on your layout */
}

.links {
  text-align: center; /* Center the text horizontally within .links */
}

 img {
      display: block; /* Make the image a block element */
      margin: 0 auto; /* Center the image horizontally */
    }

    .top-img {
      opacity: 0;
    }

    .top-img:hover {
      opacity: 1;
    }

.img-container {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

img {
  position: absolute;
  top: -1.7em;
  left: 50%;
  transform: translateX(-50%); /* Center the image horizontally */
}

#aeris,
#arise,
#mean,
#mane,
#vile,
#live,
#veil,
#pores,
#spore,
#endear,
#neared,
#hatred,
#dearth,
#dread,
#adder,
#seat,
#eats,
#ought,
#ghout,
#spot,
#pots,
#lair,
#rail,
#regal,
#large,
#sent,
#nets,
#terse,
#steer,
#steal,
#stale,
#tales,
#Rhea,
#Hera,
#bread,
#bared,
#state,
#teats,
#leap,
#plea,
#spread,
#spared,
#snail,
#slain,
#Hades,
#heads,
#aid,
#Dia,
#Fates,
#feats,
#oread,
#oared,
#lows,
#owls,
#own,
#petal,
#tepal,
#plate,
#dear,
#dare,
#serin,
#risen,
#alert,
#alter,
#raced,
#arced,
#won,
#nets,
#evil {
  color: black; /* Default color for the links */
  text-decoration: none; /* Remove underline */
  font-weight: normal; /* Set the default font weight */
  text-align: center;
  cursor: pointer;
}

#aeris:hover,
#arise:hover,
#mean:hover,
#mane:hover,
#vile:hover,
#live:hover,
#veil:hover,
#pores:hover,
#spore:hover,
#endear:hover,
#neared:hover,
#hatred:hover,
#dearth:hover,
#dread:hover,
#adder:hover,
#seat:hover,
#eats:hover,
#ought:hover,
#ghout:hover,
#spot:hover,
#pots:hover,
#lair:hover,
#rail:hover,
#regal:hover,
#large:hover,
#sent:hover,
#nest:hover,
#terse:hover,
#steer:hover,
#steal:hover,
#stale:hover,
#tales:hover,
#Rhea:hover,
#Hera:hover,
#bread:hover,
#bared:hover,
#state:hover,
#teats:hover,
#leap:hover,
#plea:hover,
#spread:hover,
#spared:hover,
#snail:hover,
#slain:hover,
#Hades:hover,
#heads:hover,
#aid:hover,
#Dia:hover,
#Fates:hover,
#feats:hover,
#oread:hover,
#oared:hover,
#lows:hover,
#owls:hover,
#own:hover,
#petal:hover,
#tepal:hover,
#plate:hover,
#dear:hover,
#dare:hover,
#serin:hover,
#risen:hover,
#alert:hover,
#alter:hover,
#raced:hover,
#arced:hover,
#won:hover,
#nets:hover,
#evil:hover {
  color: rgb(170, 255, 0); /* Green color for hover state */
  text-align: center;
  cursor: pointer;
}

body {
  font-family: Inconsolata;
  font-size: 155%;
}