/* 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." */

@font-face {
    font-family: "Courier Prime";
    src: url("../fonts/Courier\ Prime.ttf") format("truetype");
}

@font-face {
    font-family: "Chiptune Valentine";
    src: url("../fonts/ChiptuneValentine.ttf") format("truetype");
}

:root, [data-selected-theme="night"] {
  --highlight: #33f9ff;
  --glow: #d8fffc;

  --bg-gradient-1: rgba(163,0,255,1);
  --bg-gradient-2: rgba(41,0,134,1);
  --bg-gradient-3: rgba(0,0,0,1);

  --link-gradient-1: rgba(45,179,245,1);
  --link-gradient-2: rgba(116,0,176,1);

  --link-border: #000;

  --link-hover: rgb(80, 57, 206);
  --link-text-shadow: rgb(133, 237, 255);

  --link-glow-1: rgba(255, 255, 255, 0.8);
  --link-glow-2: rgba(255,255,255,0.2);
  --link-glow-hover: rgba(254, 202, 255, 0.8);

  --text-color: rgb(255, 255, 255);
  --text-shadow: rgb(70, 14, 200);

  --content-gradient-1: rgb(92, 8, 165);
  --content-gradient-2: rgba(0,0,0,1);
  --content-bold: rgb(58, 222, 255);
  --content-italic: rgb(233, 159, 255);
  --content-link-text: rgb(255, 255, 255);
  --content-link-bg: rgb(136, 0, 255);
  --content-link-bg-hover: rgb(0, 162, 255);

  --theme-icon-color: rgb(233, 159, 255);
  --theme-icon-hover: rgb(159, 217, 255);

  --gallery-border: rgb(151, 82, 255);
  --gallery-border-hover: rgb(0, 238, 255);

  --game-btn-hover: rgb(221, 247, 255);
}

[data-selected-theme="day"] {
  --highlight: #bb33ff;
  --glow: #f3d8ff;

  --bg-gradient-1: rgba(171,248,255,1);
  --bg-gradient-2: rgba(255,219,246,1);
  --bg-gradient-3: rgb(255, 255, 255);

  --link-gradient-1: rgb(231, 192, 255);
  --link-gradient-2: rgb(87, 235, 255);

  --link-border: #ffbff5;

  --link-hover: rgb(160, 145, 255);
  --link-text-shadow: rgb(133, 237, 255);

  --link-glow-1: rgba(255, 255, 255, 1);
  --link-glow-2: rgba(255,255,255,0.2);
  --link-glow-hover: rgba(254, 202, 255, 0.8);

  --text-color: rgb(0, 0, 0);
  --text-shadow: rgb(190, 163, 255);

  --content-gradient-1: rgb(200, 247, 255);
  --content-gradient-2: rgb(255, 255, 255);
  
  --content-bold: rgb(36, 105, 255);
  --content-italic: rgb(171, 0, 223);
  --content-link-text: rgb(255, 255, 255);
  --content-link-bg: rgb(136, 0, 255);
  --content-link-bg-hover: rgb(0, 162, 255);

  --theme-icon-color: rgb(136, 0, 255);
  --theme-icon-hover: rgb(0, 162, 255);

  --gallery-border: rgb(235, 157, 255);
  --gallery-border-hover: rgb(102, 0, 255);

  --game-btn-hover: rgb(171, 74, 255);
}

[data-selected-theme="night"] .day_theme {
  display:none;
}

[data-selected-theme="day"] .night_theme {
  display:none;
}

body {
  background-color: var(--bg-gradient-1);
  background-image: linear-gradient(0deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 26%, var(--bg-gradient-3) 57%);

  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-color);
  font-family: "Courier Prime", Verdana;
}

img {
  max-width: 100%;
  height: auto;
} 

h1, h2, h3 {
  font-family: "Chiptune Valentine";
}

h3 {
  font-size: 1.4em;
}

/* container */

#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  /*background-color: #000;*/
  border: 2px solid var(--highlight);
}

.content {
  padding: 2%;
}

.contentbox {
  /* sunset */
  /*
  background-image: linear-gradient(0deg, rgba(255,125,0,1) 0%, rgba(99,0,134,1) 28%, rgba(0,0,0,1) 74%);
  */
  background-image: linear-gradient(0deg, var(--content-gradient-1) 0%, var(--content-gradient-2) 74%);
  padding: 2%;
  box-shadow: 0 0 15px var(--glow);
  border: 2px solid var(--highlight);
}

.contentbox b, strong {
  color: var(--content-bold); 
}

.contentbox i, em {
  color: var(--content-italic); 
}

.contentbox a:not(.theme_icon) {
  background-color: var(--content-link-bg);
  color: var(--content-link-text); 
  text-decoration: none;
}

.contentbox a:hover {
  background-color: var(--content-link-bg-hover);
  color: var(--content-link-text); 
}

.contentbox ul {
  list-style-type: "✦ ";
}

/* navigation */

nav {
  display: flex;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.topnav {
  overflow: hidden;
}

nav a {
  /* color */
  text-shadow: 0 -1px var(--text-shadow);
  background-image: linear-gradient(0deg, var(--link-gradient-1) 0%, var(--link-gradient-2) 100%);
  box-shadow:0 0 4px var(--glow);
  color: var(--text-color);
  text-decoration: none;
  text-align: center;

  /* structure */
  flex:1;
  padding: 8px 16px;
  border: 2px solid var(--link-border);
  position:relative;
  float:left;
  display: block;
}

nav a.icon {
  display: none;
  flex:none;
  width: 70px;
}

/* Change the link color on hover */
nav a:not(.active):hover {
  background-color: var(--link-hover);
  background-image: none;
  text-shadow: 0 0 4px var(--link-text-shadow);
}

/* glass buttons */

nav a:not(.active):after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(var(--link-glow-1), var(--link-glow-2));
}

nav a:hover:after{
	background: linear-gradient(var(--link-glow-hover), var(--link-glow-2));
}

/* theme icons */

#theme_select button {
  background: transparent;
  border: none;
  font-size: large;
  padding-bottom: 0;
  margin-bottom: 0;
  cursor: pointer;
}

.fa-solid.fa-moon, .fa-solid.fa-sun {
  color: var(--theme-icon-color);
}

.fa-solid.fa-moon:hover, .fa-solid.fa-sun:hover {
  color: var(--theme-icon-hover);
}

/* responsive stuff */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a:first-child {text-align: left;}
  .topnav a.icon {
    float: right;
    display: block;
    text-align:center
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    flex-direction: column;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    box-shadow: none;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* footer */

footer {
  display: flex;
  padding: 8px 16px;
  margin: 0;
  max-width: 100%;
  border: 2px solid var(--link-border);
  justify-content: center;

  background-image: linear-gradient(0deg, var(--link-gradient-2) 0%, var(--link-gradient-1) 100%);
  box-shadow:0 0 4px var(--glow);
}

/* gallery */

div.gallery {
  margin: 5px;
  border: 1px solid var(--gallery-border);
  float: left;
  width: 100%;
}

div.gallery:hover {
  border: 1px solid var(--gallery-border-hover);
}

div.gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: var(--bg-gradient-3);
}