* {
    box-sizing: border-box;
    margin:0;
}
@font-face {
    font-family:MSGothic;
    src: url(fonts/MSGOTHIC.TTF);
}
body {
    background-image:url(images/bluelacepattern.gif);
    font-family:MSGothic;            
}
#main {
    margin:auto;
    width:70%;
    margin-top:100px;
}


ul {
    list-style-type: none;
    font-size:20px;
  }
  summary {
    cursor: pointer;
      background: #3e586b;
      color:white;
        border: 1px dashed #fff;
        box-shadow: 0 0 0 3px #3e586b;
        padding: 5px;
        margin:10px;
        transition:0.5s ease all;
        margin-bottom:3px;
  }
  summary:hover {
   letter-spacing:1px;
  }
  details[open] summary ~ * {
       animation: sweep .5s ease-in-out;
  }

  details[open] summary ~ .post {
    width:90%;
    margin:auto;
    margin-top:0;
    padding:15px;
    background-color:transparent;

border-top:none;


   border-width: 7px;
   border-style: solid; 
   border-image: url("https://i.imgur.com/NJa4bp2.png") 5 fill round; 
  



  }
  
  @keyframes sweep {
    0%    {opacity: 0; transform: translateY(-5px)}
    100%  {opacity: 1; transform: translatey(0)}
  }

  .tree {
    margin-bottom:50px;
  }
  span {
    padding:2px;
    background-color: #d6f0e7;
    color:black;
    margin-right:5px;
    font-size:15px;
    display: inline-block;
    vertical-align: middle;
    
 border-radius:10px;
 border: 3px solid #87a9bc;
   
  }

  .header {
    height:300px;
    width:400px;
    margin:auto;
    background-image:url(images/buttonplaidbox.png);
    background-size:contain;
    background-repeat: no-repeat;
    position: relative;
  }
  .header-txt {
    width:100%;
    padding:30px;
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  }
  .header-txt h1 {
margin-bottom:10px;
  }
  
  .signpost {
    border:3.5px solid black;
    border-top:none;
    border-bottom:none;
    width:80%;
    margin:auto;
  }