/*text*/
:root {
  --text-color: #9bafdd;
  --sidebar-text-color: #9bafdd;
}

h1 {
  margin: 150px 100px 150px 80px;
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: #89cff0;
}

a:hover,
a:focus {
  color: #6495ED;
  text-decoration: none;
}



/* main body*/

.container {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px 100px ;
    
    background-image: url("https://file.garden/aF37hRbMOEh1vH_J/luminarie%20background.jpg");
}

.item-1 {
  grid-row: 1 / 4;
  grid-column: 1 / 5;
  border: 7px solid #caf0f8;
  border-radius: 100px;
  margin: 30px 20px 30px 20px;
  background-color: #151b54;
}

.item-2 {
  grid-row: 1 / 4;
  grid-column: 5 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}  

.item-3 {
  grid-row: 4 / 5;
  grid-column: 1 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 15px;
  background-color: #151b54;
}  

.item-4 {
  grid-row: 5 / 20; 
  grid-column: 1 / 4;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}  

.item-5 {
  grid-row: 5 / 10;
  grid-column: 4 / 8;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}  

.item-6 {
  grid-row: 10 / 15;
  grid-column: 4 / 7;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}  

.item-7 {
  grid-row: 10 / 15;
  grid-column: 7 / 8;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}

.item-8 {
  grid-row: 5 / 8;
  grid-column: 8 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}

.item-9 {
  grid-row: 8 / 12;
  grid-column: 8 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}

.item-10 {
  grid-row: 12 / 16;
  grid-column: 8 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  margin: 20px;
  background-color: #151b54;
}

.item-11 {
  grid-row: 20 / 25;
  grid-column: 1 / 10;
  border: 7px solid #caf0f8;
  border-radius: 5px;
  background-color: #151b54;
}

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
p {
  font-family: 'Qastars', sans-serif;  
  margin: 10px 0;
  width: 100%;
  max-width: 500px;
  color: #9bafdd;
}

h1 {
  font-family: 'Qastars', sans-serif;
  color: #9bafdd;
  margin: 0;
}

/* ===== AUTOPLAY ===== */
.buttondiv {
  cursor: pointer;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;
  color: white;
  z-index: 1;
}

.autoplayer button {
  background: darkblue;
  cursor: pointer;
  color: white;
  border: none;
  padding: 1px 4px 0px 4px;
  font-size: 18px;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;
}

.autoplayer a {
  background: darkblue;
  color: white;
  text-decoration: none;
  padding: 2px 10px;
  position: fixed;
  font-size: 14px;
  bottom: 5px;
  z-index: 1;
  left: 50px;
}