body {
background: linear-gradient(#749bfc, #749bfc, #749bfc, #a6f7f6, white);
color: floralwhite;
  font-family: "DM sans", sans-serif;
z-index: 1;
    margin:20px;
}


.writing {
    width:500px;
border-style: dotted;
       
    border-radius:10px;
    
}


details {
    
      padding: 10px;;
  border-radius: 5px;
    border-style: dotted;
 overflow-y: auto;
    max-width:600px;
    max-height: 200px;
    margin-top: 10px;
}

.tree {
    height:100%;
    position:absolute;
    bottom:0px;
    right:0px;
    z-index: -1;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;

    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.footer {
    
    position:absolute;
    bottom:0px;
    left:0px;
/*    border-style: dotted;*/
    color:749bfc;
/*    margin:20px;*/
    padding:20px;
/*    padding-top: 3px;*/
/*    padding-bottom:3px;*/
/*    border-radius: 10px;*/
    
}



.sitebox {
    float:left;
    width:100px;
    height:130px;
    border-radius: 10px;
    border-style: dashed;
    padding: 10px;
    margin: 10px
}

.sitebox:hover {
 transform: scale(1.1);   
    
}

.icon {
    max-height: 100px;
    margin-bottom: 10px
}

a:link {
  color: floralwhite;
    opacity: 50%;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
    opacity: 50%;
  color: floralwhite;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: floralwhite;
    opacity:100%;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: floralwhite;
    opacity: 100%;
  background-color: transparent;
  text-decoration: underline;
}

.return {
    color:red;
    
}

p1 {
    text-align: center;
}