funfacts-style.css

body{
    background-color: black;
    background-image: url('https://preview.redd.it/f90isxkou7n71.jpg?auto=webp&s=7fcbe26273d43d00f61424e2045bff4280ced948');
    background-position: -230px -50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
    margin:0;
    box-sizing: border-box;
}

.transparent-box{
    background-color:rgba(0, 0, 0, 0.795);
    width:100%;
    height:100%;
}

.clr{
    clear:both;
}

.body-container{
    width:70%;
    margin:auto;
    box-sizing: border-box;
    padding-bottom: 20%;
}

/* top bar */
#hud{
    float:left;
    height:10%;
    width:17%;
    padding-left:5%;
}

#stats{
    float:right;
    height:10%;
    width:15%;
    padding-right:5%;
}

/* Upper main */
#pfp{
    border-radius: 50% 50%;
    height:15%;
    width:15%;
    float:left;
    margin-left:15%;
}

#speech-bubble{
    float:right;
    width:50%;
    height:30%;
    margin-right:15%;
    background-image: url('assets/speechbox.png');
    background-position: center center;
    background-size:contain;
    background-repeat: no-repeat;
}

#speech-bubble h2{
    text-align: center;
    padding-top:13%;
    padding-bottom: 10%;
    font-size: 1.3vw;
    animation-name: speechText;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes speechText{
    0% {color: white; transform:translate(-5, 0px) rotate(-4deg);}
    50% {color: white; transform:translate(0, 5px) rotate(1deg);}
    100% {color:white; transform:translate(5, -0px) rotate(5deg);}
}

/* Lower main */
.icons-container{
    margin-top:10px;
    float:left;
    margin-left:15%;
    width:15%;
    box-sizing: border-box;
}

.icons-container h3{
    color: #c20e24;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    margin-left:10px;
    animation-name: introText;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes introText{
    0% {color: #c20e24;}
    50% {color:#2e918a;}
    100% {color: #c20e24;}
}

/* icons */
.icons-container ul{
    margin-left:15%;
    padding:0;
    list-style: none;
}

.icons-container li{
    padding-bottom:5%;
    padding-left:25%;
}

.icons-container img{
    width:30%;
    height:30%;
}

.icons-container a img:last-child{
    display: none;  
}

.icons-container a:hover img:last-child{
    display: block;
    padding-bottom:4px;
}

.icons-container a:hover img:first-child{
    display: none;  
}

/* textbox*/
.textbox{
    margin-top:10px;
    margin-right:20%;
    float:right;
    width:45%;
    height:45%;
    border-top: 2px #820910 dotted;
    border-bottom: 2px #820910 dotted;
    background-color: #0f2929b1;
}

.textbox li{
    margin-right:20px;
    line-height: 1.5em;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #b2d0cf;
}

#cat img{
    width:30%;
    height:30%;
    margin-top:10px;
    margin-right:20%;
    float:right;
    width:45%;
    height:45%;
}

/* navbar */
#navbar{
    bottom:0%;
    left:15%;
    margin:auto;
    position:fixed;
    width:70%;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgb(41, 13, 13) 0%, rgba(30, 10, 10, 0.6) 65%, rgba(27,14,14,0.1) 100%);
}

#navbar ul{
    padding:0;
    list-style: none;
    padding-top:3%;
    margin-left:20%;
    padding-bottom:2%;
}

#navbar li{
    display:inline;
    padding-right:10%;
}

#navbar a{
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-decoration: none;
    font-size: 16px;
    text-shadow: 0 0 3px  #942929, 0 0 8px black;
}

#navbar a:hover{
    animation-name: introText;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

#navbar li:first-child a{
    color:#c20e24;
}

#navbar li:nth-child(2) a{
    color:#c20e24;
}

#navbar li:nth-child(3) a{
    color:#c20e24;
}

#navbar li:nth-child(4) a{
    color:#2e918a;
}