body {
  background-color: rgb(59, 83, 69);
  background-image: url(Assets/Tile.png);
  color: rgb(255, 255, 255);
  font-family: Verdana;
}

.headerText {
  text-align: center; 
  background-color: rgb(134, 105, 87);
  background-image: url(Assets/Wooden\ Tile.png);
  background-size: 225px; 
  width: fit-content;
  margin: auto;
  padding: 5px 20px;
  border-radius: 15px;
  border: dashed 5px; border-color: rgb(228, 153, 103);
  font-family: honey;
  font-size: 5rem;
  letter-spacing: 2px;
}

.topText {
  margin: auto;
  width: fit-content;
  padding: 120px;
  font-family: honey;
  font-size: 50px;
  text-align: center;
}


@font-face {
  font-family: cakecafe;
  src: url(fonts/Cakecafe.ttf);
}

@font-face {
  font-family: Honey;
  src: url(fonts/Honey\ and\ Raspberries.ttf);
}



.dsContainer {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: auto;
  margin-top: 25px;
}

.dsTop , .dsBot {
  height: 400px;
  background-color: rgb(199, 148, 114);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.637) 0px 0px 50px 1px,
    inset 0px 0px 1px 3px rgb(211, 196, 196),
    inset 0px 0px 20px black;
}

.dsMid {
  background-color: rgb(136, 127, 127);
  height: 40px;
  border-radius: 10px;
  box-shadow: 
    inset 0px 0px 10px rgb(158, 157, 157),
    inset -2px -10px 10px rgba(0, 0, 0, 0.418); 
}

.screenTop , .screenBot {
  background-color: white;
  color: black;
  max-width: 575px;
  height: 350px;
  margin: auto;
  margin-top: 25px;
  border-radius: 8px;
  box-shadow: 2px 2px 8px 10px rgba(255, 255, 255, 0.363),
    inset 0px 0px 2px 2px rgba(0, 0, 0, 0.616),
    inset -5px -5px 10px rgba(0, 0, 0, 0.616),
    inset 5px 5px 10px rgba(0, 0, 0, 0.644);

}

.screenBot {
  max-width: 500px;
}