@import url('https://fonts.googleapis.com/css2?family=Castoro&display=swap');

body {
    background-color: #0d1a26;
    width:100%;
    overflow:auto;
    margin:0px;
    font-family: 'Castoro', serif;
}

.headbar {
    background-color: #6d131c;
    position:absolute;
    height:50px;
    top:25px;
    width: 100%;
    padding: 0px;
    border: solid black;
    border-width: 1px;
    overflow:hidden;
    text-align:center;
    max-width:1200px;
    font-family: 'Castoro', serif;
}

.footbar {
    
    background-color: #6d131c;
    color: #dee2e8;
    width: 100%;
    position:absolute;
    padding: 0px;
    height:50px;
    line-height:50px;
    border: solid black;
    border-width: 1px;
    text-align:center;
    max-width:1200px;
}

.footbar a:link {
    text-decoration: none;
    color:white;
}

.footbar a:visited {
    text-decoration: none;
    color:white;
}

.footbar a:hover {
    text-decoration: underline;
    color:#dedede;
}


.content {
    background-color: #dee2e8;
    width:100%;
    padding: 0px;
    margin: auto;
    border: solid black;
    border-width: 1px;
    font-family: 'Castoro', serif;
}


.frame {
    max-width:1200px;
    width:100%;
    margin:auto;
    left:50%;
    
}

.dropbar{
    z-index: -1;
    background-color: #54131c;
    position:absolute;
    height:50px;
    top:35px;
    width:99.9%;
    padding: 0px;
    border: solid black;
    border-width: 1px;
    text-align:center;    
    
}

.dropbar-2{
    z-index: -1;
    background-color: #54131c;
    position:absolute;
    height:50px;
    width:99.9%;
    padding: 0px;
    margin-top:-10px;
    border: solid black;
    border-width: 1px;
    text-align:center;    
    
}

.button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px;
    height:50px;
    float:left;
    color:"#000000";
}

.button:hover {
    
    opacity: .8;
}

.button a:link {
    color:white; 
    font-size: 25px;
    text-decoration:none;
}

.button a:visited {
    color:white; 
    text-decoration:none;
}

.star {
    display:flex;
    align-items:center;
    width:30px;
    height:50px;
    float:left;
}


.main {
    top:80px;
    padding: 20px;
    margin-top: 75px;

    overflow:hidden;
}

#article {

    background-color: #fefefa;
    border-radius: 5px;
    padding: 20px;
    font-family: 'Castoro', serif;
}


#tree-title {
    font-size: 30px;
    
}

/* Remove default bullets */
ul, #myUL {
  list-style-type: none;
    font-size: 15px;
}

.spc {
    height:10px;
    
}

li {
    margin-bottom:10px;
    vertical-align:middle;
}

li a:link {
    color:0D1A26;
    text-decoration:underline;
}

li a:hover {
    color:#0d1a26;
    text-decoration:none;
}

li a:visited {
    color:#696F76;
    text-decoration-line: line-through;
}

/* Remove margins and padding from the parent ul */


li:hover {
    background-color:#E7ECEE;
    
}


/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
    background-color:#fefefa;
}



#end {
    font-size:10px;
    float:right;
    color:black;
}



html {
  font-family: 'Castoro', serif;
  font-size: 14px;
}