209 lines
3.0 KiB
CSS
209 lines
3.0 KiB
CSS
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
background-color: black;
|
|
font-family: "PixelFont", "Lucida Console", monospace;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PixelFont";
|
|
src: url("/fonts/VCR_OSD_MONO_1.001.ttf");
|
|
}
|
|
|
|
body {
|
|
max-width: 900px;
|
|
text-align: center;
|
|
margin-top: 2%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50px;
|
|
left: 0;
|
|
right: 0;
|
|
padding-bottom: 50px;
|
|
background-color: black;
|
|
color: white;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
header, main {
|
|
background-color: black;
|
|
margin: 2% 2%;
|
|
}
|
|
|
|
header {
|
|
padding: 2%;
|
|
font-size: 150%;
|
|
}
|
|
|
|
main {
|
|
padding-top: 10px;
|
|
padding-bottom: 30px;
|
|
padding-right: 50px;
|
|
padding-left: 50px;
|
|
}
|
|
|
|
footer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 30px;
|
|
text-align: center;
|
|
overflow: visible;
|
|
|
|
}
|
|
|
|
hr {
|
|
width: 50%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 190%;
|
|
margin-bottom: -2%;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 30px;
|
|
margin-bottom: -1.5%;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 200%;
|
|
font-weight: bold;
|
|
background-color: rgb(36, 36, 36);
|
|
border-bottom: solid;
|
|
border-left: solid;
|
|
border-color: white;
|
|
border-width: 1px;
|
|
}
|
|
|
|
p {
|
|
font-size: 125%;
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navigation-list {
|
|
display: flex;
|
|
list-style-type: none;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.buttons {
|
|
width: 150px;
|
|
background-color: rgb(50, 50, 50);
|
|
margin: auto;
|
|
margin-bottom: 2%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
opacity: 0.8;
|
|
font-size: larger;
|
|
color: white;
|
|
padding: 15px;
|
|
border-bottom: solid;
|
|
border-left: solid;
|
|
border-color: white;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.buttons:hover {
|
|
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
|
|
.responsive {
|
|
max-width: 100%;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.cols {
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
|
|
.links {
|
|
text-decoration: underline;
|
|
color:lightgrey;
|
|
}
|
|
|
|
#pfp {
|
|
width: 125px;
|
|
height: auto;
|
|
}
|
|
|
|
#me {
|
|
width: 200px;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
#projecticon {
|
|
width: 175px;
|
|
height: 175px;
|
|
}
|
|
|
|
#photos {
|
|
width: 100%;
|
|
padding: 1%;
|
|
}
|
|
|
|
#footertext {
|
|
margin: 0;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
header {
|
|
font-size: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
main {
|
|
padding-right: 30px;
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.cols {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.buttons {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
#numbersign {
|
|
width: 100px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
#me {
|
|
width: 100px;
|
|
height: auto;
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
canvas {
|
|
display: none;
|
|
}
|
|
}
|
|
|