/*Root colors, easier to changes colors if need be. Variable names aren't the name of the color for that reason as well*/
:root {
  /*Teal*/
  --background-color: #008080;
  /*White*/
  --main-color: #FFFFFF;
  /*Black*/
  --secondary-color: #000000;
  /*Gray*/
  --tertiary-color: #808080;
  /*Silver*/
  --accent-color: #C0C0C0;
  /*Navy Blue*/
  --bar-color-1: #000080;
  /*Jacksons Purple*/
  --bar-color-2: #1a1a80;
  /*Red*/
  --danger-color: #FF0000;
  /*Anti-Flash White*/
  --text-bg-color: #F0F0F0;
}

/*Use this custom font to look Windowsy*/
@font-face {
  font-family: 'PixelOperator';
  src: url('../fonts/pixeloperator.ttf') format('truetype');
}

/*General body styling, other three fonts are backups, just in case*/
body {
  font-family: 'PixelOperator', 'Tahoma', 'Verdana', sans-serif;
  background-color: var(--background-color);
  color: var(--main-color);
  margin: 0;
  padding: 0;
  font-size: 17px;
}

/*List of the icons using flexbox so they're always at one side*/
#icon-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 20px;
  top: 7px;
}

/*Another one that's further right*/
#icon-column-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  margin-left: 118px;
  top: 7px;
}

/*A third even righter than that*/
#icon-column-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  margin-left: 215px;
  top: 7px;
}

/*Styling for the individual icons*/
#icon-column .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
}

#icon-column-2 .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  margin-bottom: 24px;
}

#icon-column-3 .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  margin-bottom: 24px;
}

/*Styling for the individual icon iimages*/
#icon-column .icon img, #icon-column-2 .icon img, #icon-column-3 .icon img {
  width: 48px;
  height: 48px;
}

/*Make the icon text a little smaller*/
#icon-column .icon span, #icon-column-2 .icon span, #icon-column-3 .icon span {
  font-size: 16px;
}

/*Change the brightness of the icon when hovered over*/
#icon-column .icon:hover img, #icon-column-2 .icon:hover img, #icon-column-3 .icon:hover img {
  filter: brightness(1.2);
}

/*Styling for the search bar*/
.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--main-color);
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  box-shadow: 4px 4px var(--tertiary-color);
  width: 700px;
  height: 40px;
  margin: 20px auto;
  padding: 5px;
}

/*For the little search text next to the "search bar"*/
.search-bar label {
  font-size: 17px;
  margin-right: 10px;
}

/*For the actual dropwdown menu itself*/
.search-bar select {
  flex-grow: 1;
  border: 1px solid var(--secondary-color);
  background-color: var(--accent-color);
  padding: 2px;
  font-family: 'PixelOperator', 'Tahoma', 'Verdana', sans-serif;
  height: 30px;
  font-size: 15px;
}

/*For the windows style title bar above the windows*/
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, var(--bar-color-1), var(--bar-color-2));
  color: var(--main-color);
  padding: 5px;
  font-weight: bold;
  border-bottom: 2px solid var(--secondary-color);
}

/*Just for the name on the bar*/
.title-bar .title {
  flex-grow: 1;
}

/*For the three buttons on the right side of the bar*/
.title-bar .buttons {
  display: flex;
  gap: 5px;
}

/*For the individual buttons in the button group*/
.title-bar .buttons button {
  width: 20px;
  height: 20px;
  background-color: var(--accent-color);
  border: 1px solid var(--secondary-color);
  margin-left: 2px;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
}

/*Anchor tag styling in title-bar*/
.title-bar a {
  color: var(--main-color)
}

/*Just the window part of the window, not the top bar or buttons*/
.window {
  width: 650px;
  height: 650px;
  border: 2px solid var(--secondary-color);
  box-shadow: 4px 4px var(--tertiary-color);
  margin: 50px auto;
  background-color: var(--main-color);
  color: var(--secondary-color);
  position: relative;
  transition: top 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease-in-out; 
}

/*For lists in the windows, mostly for the recycle bin*/
.window ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  padding: 10px;
  list-style-type: none;
  margin: 0;
}

/*For the individual list items in the windows*/
.window li {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*For the images in the recycle-list items, 48x48 since it's always the same image*/
.window #recycle-list img {
  width: 48px;
  height: 48px;
  cursor: pointer;
  margin-bottom: 5px;
}

/*Slight hover effect*/
.window #recycle-list img:hover {
  filter: brightness(1.2);
}

/*Adds the "maximize" when a window gets the "maximizing" class*/
.window.maximizing {
  animation: maximize 0.3s forwards;
}

/*Hide almost the entire window when minimized*/
.window.minimized {
  height: 30px;
  overflow: hidden;
}

/*Fade out the window when it's being closed*/
.window.fade-out {
  animation: fadeOut 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

/*Hide the content of the window when minimized*/
.window.minimized .content {
  display: none;
}

/*Styling for content images*/
.window .content img {
  max-width: 50%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/*Ensure a maximum of three icons per row in the "My Skills" window*/
.window.skills-window .content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

/*The actual content of the windows*/
.content {
  padding: 10px;
  max-height: 575px;
  overflow: auto;
  transition: all 0.3s ease-in-out;
}

/*Adds an animation to the content when minimizing*/
.content.minimizing {
  animation: minimizeContent 0.3s forwards;
}

/*Content paragraphs*/
.content p {
  background-color: var(--text-bg-color);
  padding: 10px;
  border-radius: 5px;
}

/*Round the edges of an image*/
.round {
	border-radius: 25px;
}

/*Adds an animation to windows when they slide up from the window above is deleted*/
.slide-up {
  animation: slideUp 1s forwards;
}

/*For the start bar at the bottom of the page*/
.start-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--accent-color);
  border-top: 2px solid var(--secondary-color);
  display: flex;
  align-items: center;
  height: 40px;
  box-shadow: 0 -2px 4px var(--tertiary-color) inset;
  z-index: 999;
}

/*For the start buttons in the start bar*/
.start-button {
  display: flex;
  align-items: center;
  background-color: var(--accent-color);
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  font-family: 'PixelOperator', 'Tahoma', 'Verdana', sans-serif;
}

/*For the start button icons*/
.start-button img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

/*Slight hover effect for the start buttons*/
.start-button:hover {
  filter: brightness(1.2);
}

/*To make the button a tags look like normal text*/
.a-button {
  font-weight: normal;
  text-decoration: none;
  color: var(--secondary-color);
}

/*The actual minesweeper game board*/
#minesweeper-board {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-gap: 2px;
  justify-content: center;
  margin: 10px auto;
}

/*For the individual cells in the minesweeper board*/
.cell {
  width: 40px;
  height: 40px;
  background-color: var(--accent-color);
  border: 1px solid var(--secondary-color);
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

/*For the cells that have been revealed*/
.cell.revealed {
  background-color: var(--main-color);
  cursor: default;
}

/*For the cells that have been revealed that have bombs on them*/
.cell.bomb {
  background-color: var(--danger-color);
  color: var(--main-color);
}

/*For the cells that have been revealed that have numbers on them*/
.cell.number {
  color: var(--bar-color-1);
}

/*The restart button for the minesweeper game*/
#restart-button {
  display: block;
  margin: 10px auto;
  padding: 5px 15px;
  font-size: 16px;
  background-color: var(--accent-color);
  border: 1px solid var(--secondary-color);
  cursor: pointer;
}

/*Slight hover effect for the restart button*/
#restart-button:hover {
  filter: brightness(1.2);
}

/*iframe styling*/
iframe {
  display: block;
  margin: 20px auto;
  border-radius: 15px;
  overflow: hidden;
  width: 560px;
  height: 315px;
  border: none;
}

/*Lists of cards styling*/
.card {
	padding: auto;
	height: 140px;
	width: 140px;
	margin: auto;
}

.card:hover {
  filter: brightness(1.2);
}

.cards {	
	padding: 25px;
	max-width: 1980px;
	display: grid;
	gap: 16px;
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text {
  margin-top: 10px;
  font-size: 20px;
  text-align: center;
}

/*PDF styling*/
.pdf {
	width: 100%;
	aspect-ratio: 4 / 3;
}

/*Animation for the content of a window*/
@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

/*Animation for the window sliding up*/
@keyframes slideUp {
  from {
      transform: translateY(0);
  }
  to {
      transform: translateY(-100%);
  }
}

/*Animation for the content of a window minimizing*/
@keyframes minimizeContent {
  from { height: auto; opacity: 1; }
  to { height: 0; opacity: 0; }
}

/*Animation for the window maximizing*/
@keyframes maximize {
  from { transform: scale(0.5); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}

@media (max-width: 908px) {
  #icon-column {
    display: none;
  }
}

@media (max-width: 1108px) {
  #icon-column-2 {
    display: none;
  }
}

@media (max-width: 1108px) {
  #icon-column-2 {
    display: none;
  }
}

@media (max-width: 1200px) {
  #icon-column-3 {
    display: none;
  }
}