body {
background: url("another cairovercoat one.png") fixed;
font-family: "Open Sans", serif;
font-size: 14px;
color: black;
}
h1 {
}
/*The header bar that stays at the top of the screen*/
.top-bar {
text-transform: uppercase; /*Make the text in the header display as all caps*/
font-style: italic;
letter-spacing: 5px;
top: 0;
left: 0;
position: fixed;
width: 100%;
background: black;
color: white;
padding: 5px;
padding-left: 15px;
line-height: 25px;
overflow: auto;
}
.main, .main-first {
margin-top: 30px;
margin-left: 450px;
width: 500px;
border: 1px solid black;
background: white;
padding: 15px 25px 15px 25px;
box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
}
/*Make sure the first main box has an extra top margin so it's not hidden by the header*/
.main-first {
margin-top: 60px;
}
.sidebar {
position: fixed;
width: 350px;
min-height: 75px;
border: 1px solid black;
background: white;
margin-top:0px;
margin-left:25px;
/*The 7px is vertical and horizontal offset for the shadow, if you want to change it.*/
box-shadow: 7px 7px rgb(0, 0, 0, 0.78);
}
/*Prevent image overflow*/
.main img, .main-first img, .sidebar img {
max-width: 100%;
height: auto;
}
.sidebar-pic { /*not in use, currently looks like SHIT*/
text-align: center;
width: 100px;
height: 100px;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
background: black;
border-radius: 51px;
padding: 2px;
border: 0;
}
.sidebar-pic img {
width: 100%;
height: 100%;
border-radius: 50%;
}
/*Text section in sidebar.*/
.sidebar-description {
padding: 15px;
}
.sidebar-links {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
background: black;
color: white;
width: 100%;
height: 30px;
}
.button {
padding: 5px;
padding-left: 10px;
display: inline-block
}
.sidebar-links a {
color: white;
text-decoration: none;
}
.sidebar-links a:hover {
color: #bbb;
}
/*Text at bottom below main divs*/
.footer {
text-align: right;
margin-left: 475px;
width: 500px;
font-size: 13px;
font-style: italic;
margin-top: 20px;
margin-bottom: 40px;
}
/*For narrow screens*/
@media (max-width: 1100px) {
.sidebar {
width: 275px;
margin-left: 10px;
}
.main, .main-first {
width: 420px;
margin-left: 315px;
}
}
/*Mobile compatibility.*/
@media (orientation: portrait) {
.sidebar {
margin: 0 auto;
position: static;
margin-top: 60px;
margin-bottom: 15px;
width: 90%;
}
.main, .main-first {
margin: 0 auto;
margin-top: 20px;
width: 80%;
}
.footer {
width: 80%;
padding: 5%;
margin: 0 auto;
}
.top-bar {
font-size: 13.5px;
letter-spacing: 4px;
font-size: 90%; /*To help reduce height if it overflows the first line.*/
}
}