🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ../../../../587371.klas4s23.mid-ica.nl/public_html/Memory Game/CSS-MG/start.css

html,
body,
.container {
  height: 100%;
  margin: 0;
  /*background-color: blueviolet;*/
  /*background-image: linear-gradient(rgb(70, 16, 170), bisque, rgb(70, 16, 170));*/
  background: url(/Memory\ Game/Images-MG/Purple.jpg);
  /*background-size: cover;
  background-repeat: no-repeat;*/
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . . . ."
    ". titleArea titleArea titleArea titleArea titleArea titleArea titleArea titleArea ."
    ". . . . . . . . . ."
    ". button-1Area button-1Area button-1Area . . button-2Area button-2Area button-2Area ."
    ". button-1Area button-1Area button-1Area . . button-2Area button-2Area button-2Area ."
    ". . . . . . . . . ."
    ". . . . . . . . . .";
}

.titleArea {
  grid-area: titleArea;
  background-color: bisque;
  text-align: center;
  justify-self: stretch;
  align-self: center;
  border-radius: 100px;
  border: 5px solid black;
}

.button-1Area {
  grid-area: button-1Area;
  align-self: center;
  place-self: center;
}

.button-1 {
  border-radius: 4px;
  background-color: bisque;
  border: 5px solid black;
  color: black;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  border-radius: 100px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button-1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-1 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-1:hover span {
  padding-right: 25px;
}

.button-1:hover span:after {
  opacity: 1;
  right: 0;
}

.button-2Area {
  grid-area: button-2Area;
  align-self: center;
  place-self: center;
}
.button-2 {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: black;
  background-color: bisque;
  border: 5px solid black;
  border-radius: 100px;
  box-shadow: 0 9px #999;
}

.button-2:hover {background-color: bisque}

.button-2:active {
  background-color: bisque;
  box-shadow: 0 5px bisque;
  transform: translateY(4px);
}

🎯 Available Actions