body { margin: 0; }
summary {
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    cursor: pointer;
    position: relative;
    font-weight: bold;
}

/*
summary {
  border: 4px solid transparent;
  outline: none;
  &:focus {
    border-color: black;
  }
  padding: 1rem;
  display: block;
  background: #444;
  color: white;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}*/

p {
  max-width: calc(100% - 10%);
  width: calc(100% - 10%);
}

details {
  max-width: calc(100% - 10%);
  width: calc(100% - 10%);
  box-sizing: border-box;
  margin-top: 5px;
  overflow: hidden;
}

@media (min-width: 530px) {
    p {
      max-width: 500px;
      width: calc(500px - 2ch);
    }
    
    details {
      max-width: 500px;
      width: 500px;
      box-sizing: border-box;
      margin-top: 5px;
      overflow: hidden;
    }
}

details summary::-webkit-details-marker {
  display:none;
}

summary div.dropdown {
    display: inline-block;
    color: hotpink;
    transform: rotate(0);
    transition: .25s transform ease;
}

details[open] > summary div.dropdown {
    transform: rotate(90deg);
}

div details {
    margin-left: 1em;
}



    /*
p {
    margin: 0;
    padding-bottom: 10px;
    &:last-child {
        padding: 0;
    }
    padding: 10px;
}*/

main {
    margin-top: 2em;
    margin-bottom: 5em;
    justify-content: center;
    text-align: left;
    display: flex;
    flex-direction: column;
    font-size: large;
    align-items: center;
}
    

.card-head {
    width: 100%;
    background: slateblue;
    /*background: linear-gradient(115deg, slateblue, slateblue 65%, black 65%, black 70%, #A3A3A3 70%, #A3A3A3 75%, white 75%, white 80%, #800080 80%, #800080 85%, slateblue 85%);*/
    height: 40pt;
    text-align: left;
    display: flex;
    margin-top: 0;
}

@media (min-width: 480px) { 
    .card-head {
        background: slateblue;
        /*background: linear-gradient(115deg, slateblue, slateblue 82.5%, black 82.5%, black 85%, #A3A3A3 85%, #A3A3A3 87.5%, white 87.5%, white 90%, #800080 90%, #800080 92.5%, slateblue 92.5%);*/
    }
    .text {
        padding-right : 20%;
        padding-left  : 20%;
    }
}

@media (min-width: 1024px) {
    .card-head {
        background: slateblue;
        /*background: linear-gradient(115deg, slateblue, slateblue 90%, black 90%, black 91.7%, #A3A3A3 91.7%, #A3A3A3 93.4%, white 93.4%, white 95.1%, #800080 95.1%, #800080 96.8%, slateblue 96.8%);*/
    }
}

a:visited {
    color: pink;
    text-decoration: none;
}

a:link {
    color: pink;
    text-decoration: none;
}

.hoverable {
    display: contents;
}

.hoverable .hover-base {
    display: contents;
    font-weight: normal;
}

.hoverable .hover-alt {
    display: none;
    font-weight: normal;
}

.hoverable:hover .hover-base {
    display: none;
}

.hoverable:hover .hover-alt {
    display: contents;
}

.paw-holder {
    transform: rotate(45deg);
    transition: transform .5s;
    margin-right: 0.5em;
    margin-left:  5px;
    margin-top:   0.5em;
}

.paw-holder:hover {
    transform: rotate(0deg);
}

.paw-pad {
    width: 20px;
    height: 20px;
    background: hotpink;
    display: block;
    border-radius: 100%;
    padding: 0;
    margin-left: 11.5px;
    margin-top: -5px;
}

.paw-beans {
    display: flex;
    flex-direction: row;
    font-size: larger;
    padding: 0;
}

.bean {
    width: 10px;
    height: 10px;
    background: hotpink;
    border-radius: 100%;
    padding: 0;
}

.bean-nth-0 {
    margin: 0;
    float: left;
    transform: rotate(-15deg);
    margin-top: 10px;
}

.bean-nth-1 {
    margin: 0;
    transform: rotate(-5deg);
    float: left;
    margin-right: 3px;
}

.bean-nth-2 {
    margin: 0;
    transform: rotate(5deg);
    float: left;
}

.bean-nth-3 {
    margin: 0;
    float: left;
    transform: rotate(15deg);
    margin-top: 10px;
}

h1 {
    font-size: x-large;
    margin-top: 0.5em;
}

.card-body {
    font-size: 10pt;
    text-align: left;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
}