html {
    scroll-behavior: smooth;
}
body{
    font-family:sans-serif;
    margin:100px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0px
}
h3 {
    color: #565656;
    size: 22px;
}
p {
    margin:0px 0px 20px 0px
}
a {
    color: #1155cc
}
a:visited {
    color: #7c00b7
}
a.stay {
    color: #1155cc
}
a:hover {
    color: #0058ff
}
a:active {
    color: #a4c9eb;
}
.nobottom {
    margin: 0px
}
.fancy {
    animation-name: myAnimation;
    animation-duration: 1s;
    display: inline-block; 
}
.fancy:hover {
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes myAnimation {
    0% { transform: skewX(0deg) }
    50% { transform: skewX(-20deg) }
    100% { transform: skewX(0deg) }
}
.tip {
    width:40%;
    background:yellow;
    align: right;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    float: right;
}
.note {
    width:40%;
    background:#e9f0ff;
    align: right;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    float: right;
}

img {
    margin: 0px 0px 10px 0px
}