/*TEXT SUFF*/
/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Jersey+20&display=swap');
.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}


  /* Text: */
  :root {--font: 'Jersey 10', sans-serif;
  --heading-font: Lucida Console, monospace;
  --font-size: 18px;

  /* Text Colors: */
  --text-color: #201300;
  --sidebar-text-color: #1b0000;
  --link-color-hover:rgb(0, 255, 242);
  --link-color:rgb(38, 0, 255);

  /* Background Colors: */
  --background-image: url("https://64.media.tumblr.com/ed12166807ead424a64986eda5f5505b/2e29e70db6d6fc6c-a7/s250x400/2b68583acc89ca10a36924c08a58f6099d341b47.jpg");
  --background-color: rgb(49, 49, 49);
  --content-background-color:rgb(131, 131, 131);
  --sidebar-background-color: rgb(131, 131, 131);

  /* Other Settings: */
  --margin: 5px;
  --padding: 5px;
  --border: .5px solid #422525;
  --round-borders: 0px;
}
* {
  box-sizing: border-box;
}


/* Links: */
a { color: var(--link-color);
  text-decoration:none;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: underline;
}

body {
  display: grid;
  align-items: end;
  justify-content: stretch;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--padding);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://64.media.tumblr.com/ed12166807ead424a64986eda5f5505b/2e29e70db6d6fc6c-a7/s250x400/2b68583acc89ca10a36924c08a58f6099d341b47.jpg");
  
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: rgba(112, 112, 112, 0); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.178); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7de5ff; 
}




/* END BASIC SETTINGS*/

/* GRID BASE AREA START*/

/* GRID BASE AREA END*/

.parent {
align-items: flex-end;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: max-content;
}

.ul { grid-area: 1 / 1 / 3 / 3; justify-content: center; }
.ur { grid-area: 1 / 3 / 3 / 5; justify-content: center;}
.ll { grid-area: 3 / 1 / 5 / 3; justify-content: center;}
.lr { grid-area: 3 / 3 / 5 / 5; justify-content: center;}
.bed { grid-area: 5 / 1 / 6 / 5; justify-content: center;}
.bottom { grid-area: 4 / 1 / 5 / 5; justify-content: center;

padding: 5px;
width: 100%;
border-radius: 15px;
height: 100px;}