.closebutton{
    cursor: inherit; background-color: rgb(255, 8, 8);padding-left: 16px; padding-right: 16px; border-radius: 4px;color:black" 
}
.window{
border: solid; width: 1000px;  border-radius: 16px; padding: 12px; position: absolute; top: 50%; left: 50%; 
transform: translate(-50%, -50%); background-color: rgb(210, 210, 210);
flex-direction: column;
}
.windowheader{
border: solid; width: 100%;  border-radius: 20px; background-color: rgb(232, 232, 232); color: #fff; align-items: flex-start; display: flex; justify-content: space-between; height: 20px; 
}
#timeElement{

    margin: 0 16px 0 0; 
    padding: 4px 12px;

    font-family: 'Bahnschrift', Arial, sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;

    text-shadow:
      0 0 3px white,
      0 0 7px rgba(255, 255, 255, 0.1);
      
}

#welcome {

  border: 6px solid #a6ff6b;
  border-radius: 3px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
}

#welcomeheader {
  background: linear-gradient(to bottom, #51f3ff, #2fb5b3);
  border: none;
  border-radius: 2px 2px 0 0;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Arial, Verdana, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#welcome .closebutton {
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #c93030);
  color: #ffffff;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 10px;
  padding: 0;
}

#welcome h1,
#welcome h2:not(#Richard),
#welcome h3 {
  color: #4da5cb !important;
  font-family: Arial, Verdana, sans-serif;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(55, 190, 209, 0.5);
}

#welcome h1 {
  text-transform: uppercase;
  letter-spacing: 1px;
}

#welcome .retroBtn {
  display: inline-block;
  background: linear-gradient(to bottom, #b9edf2, #37bed1);
  color: #ffffff !important;
  padding: 3px 14px;
  border-radius: 6px;
  border: 1px solid #4da5cb;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75em;
  box-shadow: 0 2px 3px rgba(13, 100, 40, 0.3);
}

#welcome .retroBtn:hover {
  background: linear-gradient(to bottom, #d0f5f8, #4da5cb);
}

#Richard {
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, blue, indigo, violet, red
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rainbow-flow 3s linear infinite;
}

@keyframes rainbow-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.windowheader p {
  margin: 0;
}

#cam {
  width: 380px !important;
  border: 2px solid #ffffff !important;
  border-radius: 12px !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
}

#camVideo {
  border: 2px solid #ffffff;
  box-sizing: border-box;
}

#camheader {
  background: #649599;
  border: none;
  border-radius: 9px 9px 0 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  height: 18px;
  align-items: center;
  padding: 0 6px;
}

#camheader p {
  margin: 0;
}

#cam .closebutton {
  background: transparent;
  color: #ffffff;
  font-size: 11px;
  padding: 0 4px;
  border-radius: 0;
}

html, body {
  height: 100%;
  margin: 0;
  cursor: url('./cursor.png') 4 4, auto;
  overflow: hidden;
}


html:active, body:active {
  cursor: url('./cursor.png') 0 0, auto;
}

#calculator {
  width: 600px;
  height: auto;

  padding: 10px;

  background: #d7dbdd;

  border: 5px solid #edf1f2;
  border-radius: 3px;

  box-shadow:
    0 0 0 2px #9ca5a8,
    5px 6px 0 rgba(0, 0, 0, 0.15);

  box-sizing: border-box;
}

#calculatorheader {
  width: 100%;
  height: 48px;

  box-sizing: border-box;

  background: #edf0f1;

  border: none;
  border-radius: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 7px;
}


#calculatorTitle {
  margin: 0;

  font-family: "Arial Rounded MT Bold", Arial, sans-serif;

  font-size: 29px;
  font-weight: bold;

  letter-spacing: 3px;

  color: white;

  text-shadow:
    -2px -2px 0 #c5cbcd,
     2px -2px 0 #c5cbcd,
    -2px  2px 0 #c5cbcd,
     2px  2px 0 #c5cbcd;
}

#calculatorWindowControls {
  display: flex;
  align-items: center;

  gap: 8px;
}


#calculatorWindowControls span {
  width: 35px;
  height: 35px;

  display: flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;

  color: white;

  cursor: inherit;

  padding: 0;
}

#calculatorMinimize {
  background: #cbd0d2;

  text-shadow:
    1px 1px #aeb5b7;
}

#calculatorMaximize {
  background: #72cdb6;

  text-shadow:
    1px 1px #55a994;
}

#calculatorclose {
  background: #5bd8d3 !important;

  width: 35px !important;
  height: 35px !important;

  padding: 0 !important;

  border-radius: 50% !important;

  font-size: 27px !important;

  color: white !important;
}

#calculatorDisplay {
  height: 92px;

  margin: 8px 5px 13px 5px;

  background: #dadfc7;

  border-top: 7px solid #afb4a3;
  border-left: 7px solid #afb4a3;

  border-right: 7px solid #eff1dc;
  border-bottom: 7px solid #eff1dc;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  overflow: hidden;
}


#calculatorScreen {
  width: 100%;

  padding: 10px 15px;

  box-sizing: border-box;

  text-align: right;

  font-family: "Arial Rounded MT Bold", Arial, sans-serif;

  font-size: 42px;
  font-weight: bold;

  color: #74786c;

  white-space: nowrap;
  overflow: hidden;
}

#calculatorButtons {
  display: grid;

  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 100px);

  gap: 7px;

  padding: 0 5px 5px 5px;
}

.calcBtn {
  background: #d6dadd;

  border-radius: 6px;

  border-top: 4px solid #f2f4f5;
  border-left: 4px solid #f2f4f5;

  border-right: 4px solid #a9b0b3;
  border-bottom: 4px solid #a9b0b3;

  box-shadow:
    2px 2px 0 #959da0;

  font-family: "Arial Rounded MT Bold", Arial, sans-serif;

  font-size: 47px;
  font-weight: bold;

  color: white;

  text-shadow:
    -2px -2px 0 #a7adb0,
     2px -2px 0 #a7adb0,
    -2px  2px 0 #a7adb0,
     2px  2px 0 #a7adb0;

  cursor: inherit;

  user-select: none;

  padding: 0;
}
.calcBtn:hover {
  background: #dde1e3;
}
.calcBtn:active {
  transform: translate(2px, 2px);

  box-shadow: none;

  border-top-color: #acb3b6;
  border-left-color: #acb3b6;

  border-right-color: #eef1f2;
  border-bottom-color: #eef1f2;
}
.calcSmallText {
  font-size: 38px;
}
.calcBackspace {
  font-size: 42px;
}
#zeroButton {
  grid-column: 1 / 3;
}
#equalsButton {
  grid-column: 5;
  grid-row: 4 / 6;
}

#news {
  border: 6px solid #a6ff6b;
  border-radius: 3px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
}

#newsheader {
  background: linear-gradient(to bottom, #51f3ff, #2fb5b3);
  border: none;
  border-radius: 2px 2px 0 0;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Arial, Verdana, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#news .closebutton {
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #c93030);
  color: #ffffff;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 10px;
  padding: 0;
}

#darwin {
  border: 6px solid #a6ff6b;
  border-radius: 3px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
}

#darwinheader {
  background: linear-gradient(to bottom, #51f3ff, #2fb5b3);
  border: none;
  border-radius: 2px 2px 0 0;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Arial, Verdana, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#darwin .closebutton  {
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #c93030);
  color: #ffffff;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 10px;
  padding: 0;
}

#notes {
  border: 6px solid #a6ff6b;
  border-radius: 3px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
}

#notesheader {
  background: linear-gradient(to bottom, #51f3ff, #2fb5b3);
  border: none;
  border-radius: 2px 2px 0 0;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Arial, Verdana, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#notes .closebutton  {
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #c93030);
  color: #ffffff;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 10px;
  padding: 0;
}

#nicole {
  border: 6px solid #a6ff6b;
  border-radius: 3px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
}

#nicoleheader {
  background: linear-gradient(to bottom, #51f3ff, #2fb5b3);
  border: none;
  border-radius: 2px 2px 0 0;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Arial, Verdana, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#nicole .closebutton  {
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #c93030);
  color: #ffffff;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 10px;
  padding: 0;
}

#explosionOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: black;
  align-items: center;
  justify-content: center;
}

@keyframes crashShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(6px, 4px); }
  100% { transform: translate(0, 0); }
}

body.crashing {
  animation: crashShake 0.4s ease-in-out;
}