* {
    background-color: rgb(18, 18, 18);
    color: white;
    font-family: 'Montserrat', sans-serif;
    text-overflow: ellipsis;
}
h1 {
    text-align: center;
    font-size: 70px;
    margin-bottom: 0px;
    animation: blink 4s linear 0s infinite;
}
@keyframes blink {
    0% {color: white;}
    50% {text-shadow: 0px 0px 10px; color: aqua;}
    100% {color: white;}
}
#author {
    text-align: center;
    font-size: 25px;
}
#nav {
    text-align: center;
    font-size: 20px;
    margin-top: 75px;
}
#navFlex {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    padding: 25px;
    border: 5px solid gray;
    margin-top: 15px;
    border-radius: 20px;
    background-color: transparent;
}
#navFlex a{
    opacity: 0.5;
    text-decoration: none;
    font-weight: normal;
}
#navFlex a:hover {
    opacity: 1;
    font-weight: bold;
}
#sectionHeader {
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    margin: 75px;
    text-shadow: 0px 5px 8px;
    background-color: transparent;
    color: aqua;
    
}
@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}
.fadeIn {
    animation: fade 2s linear;
}
.secondaryHeader {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 100px;
    background-color: transparent;
    color: hotpink;
    text-shadow: 0px 5px 8px;
}
.text {
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    background-color: transparent;
}
.img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 500px;
    height: auto;
    
}
.toTop {
    border: 3px solid white;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 50px;
    margin-left: 7px;
    margin-bottom: 7px;
    margin-right: 7px;
    padding: 15px;
    box-shadow: 0px 7px 5px 5px black;
    
}
.toTop:hover {
    font-size: 25px;
    background-color: crimson;
}
.list {
    display: table; 
    margin: 0 auto;
    text-align: left;
    line-height: 50px;
    font-size: 20px;
}
.table {
    font-size: 30px;
    margin: 0 auto;
    padding: 75px;
    background: radial-gradient(hotpink 20%, aqua);
    border: none;
    border-radius: 100px;
    border-spacing: 0px;
}
th {
    border: 1px solid lightgray;
    text-align: center;
}
td {
    border: 1px solid lightgray;
    font-weight: bold;
    text-align: center;
}
#red {
    border: 2px solid red;
    border-radius: 5px;
    font-size: 20px;
    margin: 10px;
}
#blue {
    border: 2px solid cyan;
    border-radius: 5px;
    font-size: 20px;
    margin: 10px;
}
#green {
    border: 2px solid lightgreen;
    border-radius: 5px;
    font-size: 20px;
    margin: 10px;
}
#remove {
    border: 2px solid gray;
    border-radius: 5px;
    font-size: 20px;
    margin: 10px;
}
.colorFlex {
    display: flex;
    justify-content: center;
    background-color: transparent;
}
.colorChanger:hover {
    box-shadow: 0px 7px 5px 2px black;
    text-shadow: 0px 0px 5px; color: white;
}
.colorChanger {
    background-color: transparent;
}
.projectButton {
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    border: 3px solid green;
    background-color: transparent;
}
.circleAnimate {
    display: block;
    border: 3px solid white;
    padding: 15px;
    font-size: 15px;
    margin: auto;
    animation: deBubble 0.75s ease 0s forwards;
}
@keyframes deBubble {
    from {border-radius: 25px;}
    to {border-radius: 5px;}   
}
.circleAnimate:hover {
    animation: bubble 0.75s ease 0s forwards;
}
@keyframes bubble {
    from {border-radius: 5px;}
    to {border-radius: 25px;}
}
.link {
    margin-top: 75px;
    font-size: 20px;
    text-align: center;
    background-color: transparent;
}