/* the background colour */
html {
background-color: rgb(27, 26, 26);
}
/* gets rid of the default margin which sucks ass */
body {
margin: 0;
}
/* makes the images smaller I think idk*/
img {
display: block;
margin: 0 auto;
max-width: 40%;
}
/* this changes the attributes of any "lists"; I mostly use lists for the navigation bars (dont think too hard on why the nav bar is a list its complicated)*/
li {
font-size: 16px;
line-height: 1;
letter-spacing: auto;
}
/* all the header code is for the navigation bar, they make it fixed and centred etc */
/* vh is a measurement relative to the size of the screen, using it guarantees that the item is the same size for everyone. Most people use px (pixels) but this can make things smaller on large screens that have more pixels total. A 12 pixel box is big on a 200 pixel screen but TINY on a 3000 pixel screen for example.*/
.header {
padding: 0;
position: fixed;
margin: auto;
left: 20%;
right: 20%;
width: 118.07vh
}
.headerAccessory { /*completely optional code that adds a grey bar across the top of the screen; I just think it looks cool lol*/
background-color: rgb(67, 66, 66);
width: 100%;
height: 5.5vh;
position: fixed;
border: 0.23vh solid black;
}
.header ul {
list-style-type: none;
background-color: rgb(47, 47, 47);
margin: 0px;
padding: 0;
overflow: hidden;
width: auto;
font-family: "Lora";
}
.header li {
float: left;
}
.header a{
color: white;
text-decoration: none;
padding: 2.4vh 3.3vh 2.4vh 3.3vh;
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
vertical-align: middle;
border: 0.3vh solid black;
width: 10vh;
height: 2vh;
font-size: 1.6vh
}
.header a:hover{
background-color: rgb(67, 66, 66);
}
/* this is what I use instead of because screws up certain code in very niche circumstances (I cant remember why but there was definitely a reason lol)*/
.poopyshitfucker {
margin: auto;
background-color: white;
padding: 9vh 50px 50px 50px;
width: 1350px;
height: 1000px;
}
/* These are the fonts */
p {
font-family: "Lora";
}
/* Type class="X" (where X is one of the following terms minus the '.') inside the line to change the font to one of these :D */
.OpenSans {
font-family: "Open Sans";
}
.OpenSansTitle {
font-family: "Open Sans";
font-size: 50px;
}
.CrimsonText {
font-family: "Crimson Text";
}
.CrimsonTextTitle {
font-family: "Crimson Text";
font-size: 50px;
}
.Lora {
font-family: "Lora";
}
.LoraTitle {
font-family: "Lora";
font-size: 50px;
text-align: center;
}
.CourierPrime {
font-family: "Courier Prime";
}
.CourierPrimeTitle {
font-family: "Courier Prime";
font-size: 50px;
}
.CourierNew {
font-family: "Courier New";
}
.CourierNewTitle {
font-family: "Courier New";
font-size: 50px;
}