/* 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." */
:root{
  --xp-blue: #245DDA;
  --xp-red: #C23B22;
  --purple: #4B1664; /* i reeeeeealy like this purple, feels nice to look at */
  --bg-black: #000000; /*i just wanted to be clear its apart of the palette*/
}

body {
  background-color: black;
  color: white;
  font-family: Verdana;
}

body::-webkit-scrollbar {
      display: none;
    }


/* window timing */

.win {
  position:absolute;
  background: black;
  border: 1px solid var(--purple);
  /*box-shadow:0 6px 18px rgba(0,0,0,0.6);*/
  transition:transform 330ms cubic-bezier(.2,.9,.2,1),
             opacity 250ms ease,
             width 300ms ease,
             height 300ms ease;
  pointer-events: hidden;
  overflow:hidden;
}

.mainwin {
  width:750px;
  height:420px;
  left:50%;
  top:6vh;
}

.realsize {
  width:550px;
  height:400px;
}

.headerwin {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 4px;
  /*background: transparent;*/
}





/* me when hitting the open and close button on a tab */
.controller{
  display: flex;
  gap: 6px;
}

.controller.right{
  margin-left: auto;
}
.controller.left{
  margin-right: auto;
}


.control{
  width: 28px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid rgba(0,0,0,0.3);
  background: var(--xp-blue);
  color: white;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor :pointer;
  transition:background 220ms ease, transform 180ms ease;
  outline: none;
}
.minimizedwin{
  height:28px !important;
  transform: scale(0.99);
  opacity: 0;
}
.minimizedwin .minimiser{
  background: var(--xp-red);
}














/* THE STARS SECTION */
/*
body, html { 
        padding: 0;
        margin: 0;
      }
canvas {
        position: absolute;
      }
      */ /* IF I WANT IT AS A SIMPLE BOX, HERE USE THIS */
      
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
}

#canvas {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  display: block;
}