@font-face {
    font-family: 'Boink';
    src: url("https://file.garden/aSOlzn3FbjJRlmph/Boink%20Std%20Regular.otf");
  }

body {
    background-image:url("https://i.pinimg.com/1200x/7f/10/0a/7f100ae184d28e6f59e1d1bcee95ab82.jpg");
    background-position-x: center;
    background-size: cover;
text-shadow: 0 0 1px black;
max-width:950px;
margin-top:50px;
margin-left: auto;
margin-right: auto;
text-align:center;
    
   
}

header,main,footer,aside, #scroll, #list, #table {
    margin: 4px ;
    background-color: #c664e7;
    border-radius: 2px;
    box-shadow: 0 0 15px #5a0b63 inset;
    border: 4px inset #56eb00;
    font-family: 'Comic Sans MS';
}

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

#unc {
    background-image: url("https://i.pinimg.com/control1/1200x/7b/34/a3/7b34a3737e1bcf3673db5faee3d9e8c3.jpg");
    height: auto;
    border: groove 20px purple;
    box-shadow: 0 0 60px black;
    padding: 5px;
    border-radius: 25px;
    transform: skew(-1deg, -1deg);
}

header {
    font-family: "boink";
    padding-top: 10px;
    height:120px;
    letter-spacing: 3px;
    font-size: x-large;
    background-color:white;
    background-image: url("https://i.pinimg.com/control1/736x/0a/d9/13/0ad9130cef0b797ae6cfced5447ff4c8.jpg"); 
    background-position: center;
    background-size: cover;
    color:#bfff00;
    text-shadow:  0 -2px 0 #fffa00, 3px 0 0 red, 0 3px 0 red;
    
}

main {
    order:1;
    width: 240px;
    background-image: url("https://i.pinimg.com/control1/1200x/b4/a3/8e/b4a38e6087e1c6d9c20504bf675b29f4.jpg");
    background-size: cover;

}

aside {
 
    order:2;
   flex:1;
    
}

footer {
    height:60px;
    background-image: url("https://i.pinimg.com/control1/1200x/cb/f2/5a/cbf25aa94c15b872bb99d58b7b743bf3.jpg");
    background-position-y: center;
}

#list , #table {
     border: 4px inset #56eb00;
    margin: 3px;
    background-color: #c664e7;
}

#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:#136b00;   
    font-weight: 100;
}

#heading {
   background: linear-gradient(0deg, #ffe600, rgb(226, 135, 0) 60%);
    text-align-last: left;
    padding-left: 8px;
    text-shadow: 1px 0 0 #fff;
    box-shadow: 0 2px 2px black;
    border: 1px outset;
    font-family: "boink";
    height: 50px;
}

#heading:hover {
   
     box-shadow: 0 3px 3px black;
}

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

.relationships {
    height: 150px;
    background: linear-gradient(#00b0df, #007368);
    border: 3px inset #e18600;
    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%;
    background-color:#007bff;
    font-size:small;
}

table, td, th {
    border: 1px dotted black;
      
    color:#d92e00;
}

th {
    padding: 2px 6px ;
}