@keyframes wiggle{
        0% {
        transform: rotate(-2.5deg);
        }
         
        10% {
        transform: rotate(3.5deg);
        }
         
        30% {
        transform: rotate(-7deg);
        }
         
        50%, 100& {
        transform: rotate(0deg);
        }
    }

@keyframes jerky {
        0% {
        transform: rotate(2deg);
        }

        50% {
        transform: rotate(2deg);
        }

        51% {
        transform: rotate(-2deg);
        }

        100% {
        transform: rotate(-2deg);
        }
    }    

* { box-sizing: border-box; }

html{ 
    background-image: url("Images/nya.png");
    background-size: 50%;
    font-family: "ms pgothic";
    /*background-repeat: no-repeat;*/
    }

body { 
    width: 900px; 
    position: relative; 
    margin: 10px auto;
    }

.page{ display: none; 
    padding: 0px 12px 5px 15px;
    margin: 10px;
    }
.defaultOpen{ display: block; }

sidebar,main{ 
    padding: 0;
    border: 20px solid transparent;
    border-image: url('images/ivorylacelarge.png') 34 round;
    border-radius: 25px;
    }

main{ background: rgba(255,255,255,1);
    background-clip: padding-box; 
    }

sidebar{
    width:250px; 
    text-align: center; 
    max-height: 100%; 
    overflow: scroll;
    padding-top: 3px;
    background: rgba(255,255,255,0.85);
    background-clip: padding-box;   
    
    }
    
sidebar li{
        margin: 2.5px 0px 2.5px 0px;
}    

.pageLink, .pageLink a{
    color: inherit;
    text-decoration: none;
}

.pageLink:hover{
    text-decoration: underline;
    cursor: pointer;
}

#leftdeco img{ width: 100px; 
    margin: 5px auto 0 auto;
    }

#rightdeco img{ width: 200px; 
    border: 2px solid; 
    margin: 5px auto 0 auto; 
    }
#rightdeco a{    
        color: inherit;
    text-decoration: none;
}

#dolly img{
    max-width: 50px;
    position: absolute;
    bottom: 18px;
    left: 20px;
    z-index: 1;
    }
    
.diarybox {
     border: black 2px solid;
     border-radius: 25px;
     padding: 5px;
     margin: 10px auto;
}     

.header {
    background-image: url("images/bg_daisy2.gif");
    border-bottom: brown 3px solid; 
    border-top: brown 3px solid; 
    color: brown;
    font-size: 1.5em;
    font-family: "GoodDog";
    padding-left: 5px;
}    
 
.navhead {
    padding-left: 5px;
    padding-bottom: 2.5px;
}

#about{ display: block;
        padding: 20px;
    }
    
.icon img{ width: 100px;
    float: left;
    height: 100px; 
    border: #43739d 3px double;
    border-radius: 25px;
    box-shadow: 3px 2.5px 2.5px #12222f;
    } 

.icon:hover{
    animation: wiggle 1.5s ease infinite;
    }  

.jerktext{ display: inline-block;
    animation: jerky 0.5s infinite;
    }    

.interests{  
    justify-content: center;
    border: 2px dotted; 
    background-image: url("images/bg_dot.png");
    display: table;
    flex-flow: row;
    font-size: 0.75em;
    padding: 5px;
}

.interests p{ text-align: center;
    font-weight: bold;
 }
   
.interests ul{ list-style-type: circle; 
    
}

td{ padding-top: 10px;
}

th{ width: 100px;
}

th img{ padding-top: 2px;
}        

.favs{ display: flex;
    flex-flow: row wrap;
    margin: 10px 0;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    justify-content: center;
    }
    
.favs img{ width: 90px; 
    height: 90px; 
    border: black 1.5px solid;
    }
    
.fav{ text-align: center; 
      font-family: times new roman;
      font-size: 0.8em;
    }    

.fav p{ margin: 0px;
    }

#gpoy img{ 
    width: 100%;
    height: auto;
    }

#gpoy{
    column-count: 3;
    column-gap: 0.2em;
    margin: 3px;
    } 
    
.wip{ color: grey; }
.wip:hover{ text-decoration: line-through; !important
    cursor: pointer;
    }