/* https://colorhunt.co/palette/77bef0ffcb61ff894fea5b6f */

    @import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Overpass:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');
        /* 
        font-family: "Arvo", serif;     https://fonts.google.com/specimen/Arvo
        font-family: "Quicksand", sans-serif;     https://fonts.google.com/specimen/Quicksand
        font-family: "Overpass", sans-serif;     https://fonts.google.com/specimen/Overpass
        */

body {
  background-color: #fcfbf5;
  color: #3D3D3D;
  font-family: "Overpass", sans-serif;
  font-size:14px;
}

p{
  color: #3D3D3D;
}

b{
  font-family: "Quicksand", sans-serif;
  color:#FF894F;
  font-weight:700;
}

a{
  color: #77BEF0;
  font-size: 16px;
  transition: color 1s ease 0s;
}

a:hover{
  color: #BBDEF7;
}

h1{
  font-family: "Arvo", serif;
  font-weight:normal;
  font-size:30px;
  text-decoration:wavy underline;
  text-decoration-color:#EA5B6F;
  text-decoration-thickness:1.5px;
}

h2{
  font-family: "Quicksand", sans-serif;
  font-size:18px;
  font-weight:500;
}

h3{
  font-family: "Quicksand", sans-serif;
  font-size:15px;
  font-weight:normal;
}

ul{
  margin-left:32px;
}

li{
  line-height:30px;
  list-style-image: url("/img/02lrty.gif");
}

img{
  max-width:100%;
  max-height:100%;
}

.stuff{
  margin-top:100px;
  margin-left:368px;
  margin-bottom:20px;
  width:800px;
}

.linklist{
   --scaleX: 1.05;
  --rotate: -2deg;
  color: #77BEF0;
  font-size: 16px;
  text-decoration: none;
  position: relative;
}

.linklist:before{
  position: absolute;
  content: '';
  width: 100%;
  z-index: -1;
  transition: transform 0.1s;
  height: 2px;
  background: #FFCB61;
  bottom: 0px;
  transform: skew(-20deg) rotate(var(--rotate)) scaleX(var(--scaleX));
}

.linklist:hover{
  --scaleX: 1.15;
}

.stuff img{
  padding:8px;
}

.footer{
  margin-left:260px;
  width:1000px;
  padding:8px;
  background-color:#efefef;
  font-size:12px;
  text-align:center;
}

.footer p{
  margin:auto;
  display:block;
  max-width:800px;
  text-align:justify;
  text-align-last:justify;
}

.footer a{
  font-size:12px;
}

.footer img{
  margin:auto;
  display:inline-block;
  padding: 0 8px;
}


/* new collapsibles lets try this again */

.collapsible {
  background-color: rgba(234, 91, 111, 0.64);
  font-family: "Arvo", serif;
  font-weight:normal;
  font-size:20px;
  text-align: left;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  color: #3D3D3D;
  background: #e0e0e0;
  border-radius: 7px;
  border:none;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.collapsible:after {
  content: '\002B';
  color: #FF894F;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.active, .collapsible:hover {
  background-color: #cccccc;
}

.content {
  width:100%;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: transparent;
  margin-top:5px;
  margin-bottom:40px;
}