/*The entire html document.*/
html {
}
/*The body of the html document.*/
body {
margin: 0%;
color: #fff;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
background-color: #101010;
}
/*All existing paragraphs default here.*/
p
{
margin: 0%;
}
/*All existing links default here.*/
a {
color: #888;
background-color: #000;
text-decoration: none;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
}
/*The area of the page the header belongs on.*/
#header
{
vertical-align: middle;
text-align: center;
height: 250px;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #272727;
}
/*The 250x250px square in which the triangle image rotates*/
#the_triangle
{
text-align: center;
vertical-align: middle;
height: 250px;
width: 250px;
float: left;
margin-left: -250px;
background-color: #1a1a1a;
}
@-webkit-keyframes rotate_triangle{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-moz-keyframes rotate_triangle{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-o-keyframes rotate_triangle{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotate_triangle{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/*Specifically addressing the image within #the_triangle (aka, the triangle image)*/
#the_triangle img
{
margin-top: 45px;
margin-bottom: 45px;
overflow: hidden;
-webkit-animation: rotate_triangle 3s linear infinite;
-moz-animation: rotate_triangle 3s linear infinite;
-o-animation: rotate_triangle 3s linear infinite;
animation: rotate_triangle 3s linear infinite;
}
/*The 25px tall area under the header.*/
#subheader
{
text-align: center;
height: 25px;
width: 100%;
background-color: #1a1a1a;
}
/*The area of the page the sidebar belongs on.*/
#sidebar
{
display: block;
width: 250px;
margin: 0px;
float: left;
background-color: #272727;
padding-top: 50px;
padding-bottom: 100%;
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #888;
font-weight: bold;
}
/*Belonging to all buttons within the navigation menu.*/
.nav_butt
{
background-color: #272727;
}
/*The area of the page to the right of the sidebar, where content belongs.*/
#content
{
display: block;
float: right;
width: calc(100% - 300px);
height: 100%;
margin: 25px;
}
/*The TOP button in the sidebar.*/
#link_top:hover{
background-color: #ffffff;
color: #000;
}
/*The ME button in the sidebar.*/
#link_me:hover {
background-color: #ff0000;
color: #fff;
}
/*The ART button in the sidebar.*/
#link_art:hover {
background-color: #ff9400;
color: #000;
}
/*The CODE button in the sidebar.*/
#link_code:hover {
background-color: #ffff00;
color: #000;
}
/*The MUSIC button in the sidebar.*/
#link_music:hover {
background-color: #00ff1a;
color: #000;
}
/*The GAMING button in the sidebar.*/
#link_gaming:hover {
background-color: #004cff;
color: #fff;
}
/*The CONNECT button in the sidebar.*/
#link_connect:hover {
background-color: #8700ff;
color: #fff;
}