@font-face {
    font-family: 'goudy';
    src: url("https://file.garden/aSOlzn3FbjJRlmph/GoudyBookletter1911.otf");
  }

body {
    background-color:#d5ecff;
text-shadow: 0 0 1px black;
max-width:810px;
margin-top:50px;
margin-left: auto;
margin-right: auto;
text-align:center;
    font-family: "goudy";
   
}

header,main,footer, aside, #scroll, #list, #table {
    margin: 4px ;
    border: 1px solid grey;
    border-radius: 2px;
    padding: 5px;
    box-shadow: 0 0 15px #c9c9ca inset;
    background-color: white;
}

#more-info {
    height:300px;
    display: flex;
}

#unc {
    background-color: antiquewhite;
    height: auto;
    border: inset 5px #6b290e;
    box-shadow: 0 0 50px black inset, 0 0 60px black;
}

header {
    height:100px;
    letter-spacing: 3px;
    font-size: x-large;
    background-color:white;
    background-image: url("https://i.pinimg.com/control1/1200x/fb/9e/7a/fb9e7a96c81f6ecf3f4732b033e0b7f1.jpg"); 
    background-position: center;
    background-size: cover;
}

main {
    order:1;
    width: 240px;
    background-image: url("https://i.pinimg.com/control1/736x/9f/e7/3e/9fe73e290bdf5b0b669ccb606676192d.jpg");
    background-size: cover;

}

aside {
    order:2;
   flex:1;
    background-color:white;
}

footer {
    height:60px;
    background-image: url("https://i.pinimg.com/control1/736x/39/c9/99/39c999e36420ca83a1af59b91122a9ff.jpg");
    background-position-y: center;
}

#list , #table {
    border: 1px solid gray;
    margin: 3px;
    background-color: white;
    background-image: none;
}

#list {
    order: 2;
    overflow: scroll;
     flex: 1;
     overflow-x: hidden;
}

#table {
    order: 1;
   width: 300px;
}

#flex {
   display: flex; 
}

h1, h2 , h3{
    font-weight: 100;
}

h3, h4{
 color:#be0b00;   
    font-weight: 100;
}

#heading {
   background: linear-gradient(90deg, #13219f, rgba(31, 28, 207, 0) 60%);
    text-align-last: left;
    padding-left: 8px;
    text-shadow: 1px 0 0 #fff;
    box-shadow: 0 2px 2px black;
}

#heading:hover {
    background: linear-gradient(90deg, #0016d9, rgba(31, 28, 207, 0) 60%);
     box-shadow: 0 3px 3px black;
}

img {
    filter: drop-shadow(0 0 3px);
}

.relationships {
    height: 150px;
    background: linear-gradient(#fbeed0, #fbcc87);
    border: 3px inset #3448ff;
    text-align: left;
    padding: 4px;
    margin-bottom: 5px;
}

.icon {
    height:110px;
    border: 2px solid #001f91 ;
    float: left;
    margin-left: 5px;
    margin: 0 8px 0 5px;
}

.table {
      overflow: scroll;
    overflow-x: hidden;
    padding: 4px;
}

table {
    border-collapse: collapse;
    width: 100%;
   
}

table, td, th {
    border: 1px solid black;
}

th {
    padding: 2px 6px ;
}