body{
    background-color: lightblue;
    color: darkgreen;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

h1{
    color: brown;
    text-shadow: 2px 2px magenta;
}

button{
    background-color: burlywood;
    color: black;
    border: 2px solid red;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

#factBox{
    margin-top: 20px;
    font-size: 18px;
    color: black;
}

marquee{
    color: chocolate;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.sparkle{
    position: fixed;
    width: 8px;
    height: 8px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle,white 0%,cyan 40%,magenta 70%, transparent 100%);
    animation: sparkleFade 0.8s linear forwards;
    z-index: 9999;
}

@keyframes sparkleFade{
    0%{
        transform:scale(1)translateY(0);
        opacity: 10;
    }
    100%{
        transform: scale(0.3)translateY(-10px);
        opacity: 0;

    }
}

.nav{
    margin-bottom: 20px;
}

.nav a{
    color: blue;
    text-decoration: none;
    font-weight: bold;
}

.nav a:hover{
    color: red;
}


.layout{
    display: flex;
}



@keyframes glowShift{
    0%{
        border-color: blue;
        box-shadow: 0 0 10px crimson 0 0 10 px crimson;
    }

    25%{
        border-color: magenta;
        box-shadow:0 0 10px maroon 0 0 10px maroon;
    }

    50%{
        border-color: yellow;
        box-shadow: 0 0 10 yellow 0 0 10 yellow;
    }

    75%{
        border-color: lawngreen;
        box-shadow: 0 0 10px lawngreen 0 0 10px lawngreen;
    }

    100%{
        border-color: darkgreen;
        box-shadow: 0 0 10px forestgreen 0 0 10px forestgreen;
    }
    
}

.page-border{
    border: 5px salmon;
    outline:5px goldenrod;
    box-shadow:0 0 15px teal;
    margin: 15px;
    padding: 10px;
    animation: glowShift 3s infinite  alternate;
}