@font-face {
  font-family: voxel;
  src: url(/assets/Voxel.otf);
}


body {
    
    background: radial-gradient(aliceblue, white);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    margin: 50px;
}

/* background: radial-gradient(lavenderblush 55%, pink);
            background-color: lavenderblush;
            background-attachment: fixed;

                        background: radial-gradient(pink, white);
            background-color: lavenderblush;
            background-attachment: fixed;
*/

 article {

     color: #5b3e22;
     text-align: left;
     max-width: 35rem;
     line-height: 1.3       
}

header {
    
}

.sub {
    
    margin: 2px;
    font-style: italic;
    text-align: center;
}
    
.small {
    
    height: 300px;
}

figure {
    
    margin: 0px;
    margin-top: 20px;
}

figure img {
            
    justify-content: center;
    object-fit: cover;
    max-width: 18rem;
    height: 200px;
    width: 90%;

}

.tall {
    
    max-width: 17rem;
}

.notpic {
    

    width: 100%;
    height: 100%;
}

 figure p {
            
            color: grey;
        }

h1 {
    
    font-family: 'voxel', 'baskerville';
    margin: 0px;
    font-style: normal;
    font-size: 2.3rem;
}

        header {
            
            display: flex;
            justify-content: space-between;
        }


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

h2 {
    
    font-size: 20px;
}
h2::before {

    content: '⟣ ';
}

a {
    
    color: orangered;
    text-decoration: none;
}

a:hover {
    
    font-style: italic;
}

 
        table {
            
            
            border-collapse: collapse;
        }
        
        tbody {
            
            vertical-align: middle;
            
        }
        
        th {
            
            background-color: plum;
            padding: 5px 10px;
            font-weight: normal;
            border: 1px solid plum;
        }
        
        td {
            
            
            border: 1px solid plum;
            padding: 5px 10px;
            
        }
        
        tr:nth-child(odd) {
            
            background: white;
        }


li {
            
            list-style: none; 
        }
        
         li::before {
            
            background-image: none;
            content: '⚘ '
        }
        
        summary li:hover {
            
            
            text-decoration: underline dotted 2px inherit;
            color: blue;
            cursor: pointer;
        }
        
        ul p {
            
            margin: 10px 0rem 10px 35px;
        }
        
        details summary {
            
            list-style: none;
        }
        

.pink {
            
    background-color: lavenderblush;
    
}
    
.yellow {

    background-color: #FEF7D4
}
        
.blue {

    background-color: #DBF1FB;    
}

.purple {
    
    background-color: lavender;
}