body {
    background: #5fadd3;
}

.weather {
    background-color: #1c77ec;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c77ec), to(#7deaff));
    background-image: -moz-linear-gradient(top, #1c77ec, #7deaff);
    background-image: -ms-linear-gradient(top, #1c77ec, #7deaff);
    border-radius: 20px;
    width: 100px;
    height: 100px;
    display: inline-block;
}

.weather:hover {
    animation: jiggle 0.2s infinite;
    -webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.sun {
    background-color: #fada0b;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    top: 20px;
    left: 15px;
    position: relative;
}

.cloud-main {
    opacity: 0.9;
    background: #fff;
    width: 65px;
    height: 25px;
    border-radius: 20px;
    position: relative;
    left: 25px;
    top: 10px;
}

.cloud-bubble-one {
    opacity: 1.0;
    background: #fff;
    width: 35px;
    height: 35px;
    position: relative;
    border-radius: 100%;
    left: 10px;
    top: -15px;
}

.cloud-bubble-two {
    opacity: 1.0;
    background: #fff;
    width: 30px;
    height: 25px;
    position: relative;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 10px;
    left: 35px;
    top: -40px;
}

.notes {
    background: #fed32c;
    border-radius: 20px;
    width: 100px;
    height: 100px;
    display: inline-block;
}

.notes:hover {
    animation: jiggle 0.2s infinite;
    -webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.note {
    background: #fff;
    height: 70px;
    width: 100px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    position: relative;
    top: 30px;
    border-top: 3px solid #b9a046;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

.dotted-line {
    width: 100%;
    height: 3px;
    border-bottom: 3px dotted #acaead;
    position: relative;
}

.line {
    width: 100%;
    border-bottom: 2px solid #acaead;
    position: relative;
    height: 2px;
    padding-top: 15px;
}

.line-last {
    width: 90px;
    border-bottom: 2px solid #acaead;
    position: relative;
    height: 2px;
    padding-top: 15px;
    left: 5px;
    border-radius: 3px;
}

@keyframes jiggle {
    0% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(1deg);
    }
}

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(1deg);
    }
}

@-moz-keyframes jiggle {
    0% {
        -moz-transform: rotate(-1deg);
    }
    50% {
        -moz-transform: rotate(1deg);
    }
}