/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



/* Bunch of global styles. Site fonts, and the basic layout of most pages.
   Yes this file was made with only index.html in mind.*/


/* Not sure why Neocities is still complaining that it doesn't fit the fontlight format, maybe for old browser compatibility? */
@font-face { font-family: "windowsXpee"; src: url("windows-xp-tahoma.ttf") format("truetype"); } 

/*The basic styles.*/

#background {
  position: fixed;
  
  z-index: -1;
  top: 0em;
  height: 100%;
  width: 100%;
}

#better-navbar li img {
  display: block;
  position: absolute;

  height: 0.8em;

  left: 0.20em;
}

body {
  position: relative;
  margin: 0mm;
  color: black;
  font-family: windowsXpee;
  font-size: 1.7em; /* Too large and the font will be too high-res... tested on a 1080p laptop. */
  background-color: transparent;
}

p {
  margin: 0.6em;
  text-align: justify;
}



/* The navbar in all its glory. */

#better-navbar {
  margin-top: -1em;
  margin-bottom: 0.5em;
  margin-left: -0.3em;

  display: flex;

  flex-direction: column;
}

#better-navbar li {
  list-style: none;

  padding: 0.1em;
  margin: 0.15em;
}

#better-navbar li a {
  color: #0143CF;
  text-decoration: underline;
}

#better-navbar li a:hover {
  color: #0143CF;
  animation: blinkunderline 300ms linear infinite;
}



/*The main content panel and its subordinate image decorations.*/

#main-content {
  border: 0.8em solid transparent;
  border-image: url(assetsnstuff/windowsxpframe.png) 5 round;

  padding: 10px;

  margin-top: 2em;
  margin-left: 20%;
  margin-right: 20%;

  display: flex;

  justify-content: center;

  align-items: center;
  flex-direction: column;

  background-color: #efeee0;
}

/* Whole buncha window decorations. */
#main-content img#xpwindowbar-left {
  width: 1em;

  position: absolute;

  top: -1.15em; /* Adjusted to align with the header */
  left: 20%;
}

#main-content img#xpwindowbar-right {
  width: 1em;

  position: absolute;

  top: -1.15em;
  right: 20%;
}

#main-content div#xpwindowbar-middle {
  background-image: url(assetsnstuff/xpwindowbar-center.png);
  background-size: 100% 2.225em;
  background-position: 100% 100%;

  top: -2.275em;
  
  height: 2.225em;
  width: calc(100% + 0.6em);

  position: relative;

  /* For some odd reason it seems to leave behind a massive gap */
  margin-bottom: -2em;
}

#main-content #window-title {
  display: flex;
  line-height: 100%;

  z-index: 1;
  position: absolute;

  color: #efeee0;

  font-weight: 1000;
  font-size: 1.5em;

  top: -0.51em;
  left: calc(20% + 0.6em);
}

#main-content #window-divider {
  width: calc(100% + 1em);
  border-color: #0143CF;
  background-color: #0143CF;
  position: relative;
  left: -0.5em;
}

#main-window-buttons {
  z-index: 1;
  position: absolute;

  top: -1.75em;
  right: calc(20% + 0.4em);
}

#main-content #main-window-buttons img {
  height: 1.5em;
}

/* This version intended for the main pages. */
#welcometo {
  margin: 0.3em;
  margin-bottom: -0.5em;

  position: relative;
  left: calc(-28%);
}

/* This one is for subordinate pages not directly linked to the blog. */
#fromtheariralblog {
  margin: 0.3em;
  margin-bottom: -0.5em;
  position: relative;
  left: calc(-50% + 3.5em);
}

/* Rainbow text makes it all the more interesting. */
#headerofgreatinterest {
  background: url("assetsnstuff/rainbowgradient.png");
  background-size: 2em; 

  animation: example 1s linear infinite;

  /* Interesting technique for text styling. */
  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  width: auto;
  font-size: 3em;
  margin: 0em;
  margin-top: -0.1em
}



/*A free-to-move div designed like a window.*/

#veryindependentdiv {
  position: relative;
  border: 0.6em solid transparent;
  background-color: #efeee0;
  padding: 0px;
  border-image: url(assetsnstuff/windowsxpframe.png) 5 round;
}

#veryindependentdiv img#xpwindowbar-left {
  width: 0.7em;

  position: relative;

  top: -1em;
  left: -0.6em;
}

#veryindependentdiv div#xpwindowbar-middle {
  background-image: url(assetsnstuff/xpwindowbar-center.png);
  background-size: 100% 1.55em;
  background-position: 100% 100%;

  position: relative;

  top: -2.7em;

  height: 1.575em;
  width: 100%;

  position: relative;

  margin-bottom: -2.7em;
}

#veryindependentdiv img#xpwindowbar-right {
  width: 0.7em;

  position: relative;

  top: -1em;
  right: calc(-100% + 0.975em);
}

#veryindependentdiv #window-title {
  display: flex;
  line-height: 100%;

  z-index: 1;
  position: relative;

  color: #efeee0;

  font-weight: 1000;
  font-size: 1.1em;

  top: -1.25em;
  left: 0%;

  margin-bottom: -1.2em;
}

#veryindependentdiv #window-buttons {
    z-index: 1;
  position: absolute;

  top: -1.75em;
  right: calc(0% - 0.3em);
}

#veryindependentdiv #window-buttons img {
  height: 1.05em;
}



@keyframes example {
  0% {
  background-position: 0em 50%;
  }
  100% {
  background-position: 2em 50%;
  }
}

@keyframes jiggle {
  0% {
  left: 50%;
  }
  25% {
  left: 100%;
  }
  50% {
  left: 50%;
  }
  75% {
  left: 0%;
  }
  100% {
  left: 50%;
  }
}

@keyframes blinkunderline {
  0% { text-decoration: none; }
  100% { text-decoration: underline; }
}

/* Less independent div designed for side panels. */

#notsoindependentdiv {
  position: absolute;
  left: 2em;      /* Adjust as needed for your margin */
  top: 5em;       /* Adjust as needed */
  width: 13%;
  height: fit-content;
  border: 0.6em solid transparent;
  border-image: url(assetsnstuff/windowsxpframe.png) 5 round;
  background-color: #efeee0;
  z-index: 2;
}

#notsoindependentdiv img#xpwindowbar-left {
  width: 0.7em;
  position: relative;
  top: -1em;
  left: -0.6em;
}

#notsoindependentdiv div#xpwindowbar-middle {
  background-image: url(assetsnstuff/xpwindowbar-center.png);
  background-size: 100% 1.55em;
  background-position: 100% 100%;

  position: relative;

  top: -2.7em;
  
  height: 1.575em;
  width: 100%;

  position: relative;

  margin-bottom: -2.6em;
}

#notsoindependentdiv img#xpwindowbar-right {
  width: 0.7em;
  position: relative;
  top: -1em;
  right: calc(-100% + 0.96em);
}

#notsoindependentdiv #window-title {
  display: flex;
  line-height: 100%;

  z-index: 1;
  position: relative;

  color: #efeee0;

  font-weight: 1000;
  font-size: 1.1em;

  top: -0.99em;
  left: 0%;

  margin-bottom: -1.2em;
}

#notsoindependentdiv #window-buttons {
    z-index: 1;
  position: absolute;

  top: -1.9em;
  right: calc(0% - 0.3em);
}

#notsoindependentdiv #window-buttons img {
  height: 0.95em;
}



/* Navbar, not yet implemented. */

div#main-navbar {
  flex-direction: column;
  width: auto;
  justify-content: space-evenly;
}

div#main-navbar a {
  display: inline;
  padding: 0.3em;
  background-color:aquamarine;
}