* {
  box-sizing: border-box;
}

:root {
  --bgcolor: #e6e6ff;
  --windowbg: #ccccff;
  --boxshadow: rgba(87, 85, 170, .25);
  --gradient1: #80c1ff;
  --gradient2: #bb99ff;
  --headercolor: #ffffff;
  --bodytextcolor: #624e97;
}

@media (max-width : 1920px){
  /* For desktop */
  .navlink{
    display:inline-block;
  }
}

@media (max-width:750px) {
  /* For mobile phones: */
  .navlink{
    display:block;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-image:url(/ocs/mushrooms/images/mushroom_multicolor.gif);
  background-color:var(--bgcolor);
   background-attachment: fixed;
}

a, a:visited {
  color:var(--gradient2);
  text-decoration:none;
  font-weight:bold;
}

p {
  color: var(--bodytextcolor);
}

ul {
  padding:0;
  margin:20px 20px 20px 30px;
  color:var(--bodytextcolor);
}

li {
  padding:0;
  margin:10px 0 10px 10px;
}

li:nth-child(6n+1){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinygreen.gif);
}

li:nth-child(6n+2){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinylightblue.gif);
}

li:nth-child(6n+3){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinyblue.gif);
}

li:nth-child(6n+4){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinypurple.gif);
}

li:nth-child(6n+5){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinypink.gif);
}

li:nth-child(6n+6){
  list-style-image:url(/graphics/collection/favicons/mushroom_tinyred.gif);
}

#nav, #footer {
  display:flex;
  justify-content: center;
  align-items:flex-end;
}

#footer {
  max-width:90vw;
}

.navlink{
  margin:10px;
  padding:10px 10px 15px 10px;
  box-shadow:
  5px 5px 5px var(--boxshadow),
  0 -7px 0 0 var(--bodytextcolor) inset;
  border-radius: 5px;
}

.navlink:hover{
  padding:8px 10px 13px 10px;
  box-shadow:
  5px 5px 5px var(--boxshadow),
  0 -5px 0 0 var(--bodytextcolor) inset;
}

#nav a, #nav a:visited, #footer a, #footer a:visited {
  color:var(--headercolor) !important;
  text-decoration:none;
}

.gradientbg{
  background: linear-gradient(to right,rgba(255,153,153,1) 0%, rgba(255,204,128,1) 10%, rgba(233,239,143,1) 20%, rgba(172,239,169,1) 30%, rgba(169,239,238,1) 40%, rgba(188,238,246,1) 50%, rgba(184,215,250,1) 60%, rgba(205,183,251,1) 70%, rgba(234,181,253,1) 80%, rgba(254,180,244) 90%, rgba(255, 153, 153) 100%) 
   0 0/200% 400%;;
}

.box{
  border-style:hidden;
  border-radius: 10px;
  padding:0;
  box-shadow: 10px 10px 5px var(--boxshadow);
  background-color: var(--windowbg);
  margin:20px;
}

.boxheader{
  border-style:hidden;
  border-radius: 10px 10px 0 0;
  padding:10px 10px 10px 15px;
  text-align:justify;
  font-size:14px;
  color: var(--headercolor);
  margin:0;
}

.boxbody{
  padding:15px 40px 15px 40px;
  color: var(--bodytextcolor);
  text-align:justify;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
  }

.card {
    flex: 0 0 400px;
    margin: 10px;
    border: hidden;
    border-radius:5px;
    box-shadow: 2px 2px 6px 0px  var(--boxshadow);
    background-color:#fff;
  } 

.card img {
    display:block;
    max-height:200px;
    margin:auto;
  }

.card .text {
    padding: 0 20px 0 20px;
  }
  
.artist {
  text-align: right;
  color:var(--windowbg);
  padding: 0 20px 0 20px;
  margin: -20px 0 0 0;
}