/*style.css-------------------*/
/* comment out section vvvvv ---
html {background-color:black;}
body {background-color:gray;}
/*----------------------------*/
/*global----------------------*/

html {background-color:black;}
body {background-color:rgb(34, 34, 34);}
.content, .menu {
    background-color:rgb(164, 164, 164);
}
/*----------------------------*/
.container {

border-radius: 20px;
background: #acacaf;
box-shadow: inset -3px -3px 12px #4b4a4a,
            inset 3px 3px 15px #f0f0f0;
}


.screen {

border-radius: 3px;
background: #141414;
box-shadow: inset 3px 3px 7px #242424,
            inset -3px -3px 7px #040404;

background: #9c9c9d url('../images/background.jpg') no-repeat center center;     
background-size: cover;    
}


.glass-card {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 12px 6px rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.glass-card:nth-child(1)  { background: #b71c1c; }
.glass-card:nth-child(2)  { background: #880e4f; }
.glass-card:nth-child(3)  { background: #4a148c; }
.glass-card:nth-child(4)  { background: #311b92; }
.glass-card:nth-child(5)  { background: #0d47a1; }
.glass-card:nth-child(6)  { background: #006064; }
.glass-card:nth-child(7)  { background: #1b5e20; }
.glass-card:nth-child(8)  { background: #33691e; }
.glass-card:nth-child(9)  { background: #f57f17; }
.glass-card:nth-child(10) { background: #ff6f00; }
.glass-card:nth-child(11) { background: #e65100; }
.glass-card:nth-child(12) { background: #3e2723; }
.glass-card:nth-child(13) { background: #263238; }
.glass-card:nth-child(14) { background: #01579b; }
.glass-card:nth-child(15) { background: #00695c; }
.glass-card:nth-child(16) { background: #827717; }

.glass-card.small {
  width: 50px;
  height: 50px;
}
.glass-card.medium {
  width: 75px;
  height: 75px;
}
.glass-card.large {
  width: 100px;
  height: 100px;
}







/*----------------------------*/