/* ---------------------------- */
/* Handle basic element styling */
/* ---------------------------- */


body {
  font:
    1em/150% "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 50em;
  background-image: url("pinkmarble.png");
  background-repeat: no-repeat;
  background-size: cover;
}

@media {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}
ul {
  list-style: none;
}
li {
  background-color: #deadca;
  width: 300px;
  border-radius: 5px;
  border: solid black 1px;
  background-image: linear-gradient(#fcb6e0, #c981ac);
  margin: 2px;
}

/*---------------------------*/
/*------Boxxed elements------*/
/*---------------------------*/

.outer {
  border: 5px solid purple;
  border-radius: 10px;
}

.boxbody {
  padding:30px;
  border-radius: 5px;
  background-color: #f54cb1;
}

.boxheader {
  padding: 20px;
  background-image: linear-gradient(black, purple);
  border-radius: 5px;
  color: white;
}

.boxbreak {
  color: #ffffff
}

article,
#id::first-line {
  width: 600px;
  background-color: white;
  border-color: white;
  padding: 6px;
  border-radius: 5px;
}


/*
.box2 {
  padding: 20px;
  width: calc(60% - 30px);
  background-color: red;
  color: white;
}
*/

/*---------------------------*/
/*--------Links--------------*/
/*---------------------------*/
a:link {
  color: blue;
}

a:visited {
  color: #700445;
}
a:hover {
  color: white;
  text-decoration: none;
}

/* Handle specific elements nested in the DOM */