@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

body {
  color: rgb(241, 255, 254);
  background-image: url('../assets/bg1.gif');
  font-weight: 400px;

}


/* Links */
a {
    color: rgb(184, 157, 240);
    text-decoration: none;
    
}
a:hover {
    color: rgb(110, 38, 181);
}

.h1{
    font-size: 4.5;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.436);
    background-size: cover;

}

.p1{
    display: block;
    font-size: 1.2em;
    font-family: "Lora", cursive;
    color: rgb(148, 123, 204);
    line-height: 1.5;
}

.h3{
    font-size: 1.1em;
    font-family: "Glass Antiqua", cursive;
    color: rgb(192, 161, 247);
    line-height: 1.5;
}

.inner_pictures{
  display: flex;
  align-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;

}

/*Main centered box*/
.backgroundbox{
    display: flex;
    background-color: rgba(46, 22, 202, 0.322);
    width: 80%;
    max-width: 550px;
    border: 3px solid rgba(151, 20, 245, 0.493);
    border-radius: 3px;
    /*Center the box*/
    margin-left: auto;
    margin-right: auto;
}


.box{
  border: 1px solid rgba(0, 0, 0, 0.629);
  padding: 1em;
  background-color: #f4f4f4;


}

/*Right box*/
#box1{
    width: 30%;
    background-color: rgba(0, 0, 0, 0.436);
    width: 80%;
    max-width: 450px;
    border: 3px solid rgba(87, 8, 143, 0.200);
    border-radius: 3px; 
}

/*Left centered box*/
#box2{
    background-color: rgba(0, 0, 0, 0.436);
    width: 30%;
    max-width: auto;
    border: 3px solid rgba(87, 8, 143, 0.200);
    border-radius: 3px;
    height: fit-content;
}

/* Target the list inside #box2 to remove default styling */
#box2 ul {
  list-style: none; /* Removes the default bullet points */
  padding-left: 0; /* Removes default indentation */
}

/* Style the list items to use a background image as a custom bullet */
#box2 li {
  padding-left: 25px; /* Make space for the custom bullet. Adjust as needed. */
  background-image: url('../assets/icon_1.gif');
  background-size: 20px 20px; /* CHANGE THE SIZE HERE: width height */
  background-repeat: no-repeat;
  background-position: left center; 
  margin-bottom: 10px; /* Adds space between list items */
}