containers with the "class=main-content" */
div.main-content {
/* Turn main-content into a nested flexbox */
display: flex;
/* Align flex contents vertically */
flex-direction: column;
/* Set border thickness, style and color */
border: 1px solid #202052;
/* Set border's rounded corner */
border-radius: 0px 0px 10px 10px;
/* Set container background color + opacity */
background: rgba(27, 27, 68, 0.75);
/* Center text */
text-align: center;
align-items: center;
justify-content: center;
/* Set total container width */
width: 900px;
/* Set minimum container height */
min-height: 225px;
/* Set content padding to border */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
}
/* Style for linked pixel text */
a.ptextbutton {
/* Set text color */
color: #FFFFFF;
/* Strip link of underline */
text-decoration: none;
/* Turn entire link into a block */
display: block;
/* Use Press Start 2P font for buttons */
font-family: "Press Start 2P";
/* Set border thickness, style and color */
border: 5px solid #FFFFFF;
/* Set all letters to lowercase, regardless of capitalization */
text-transform: lowercase;
/* Add padding */
padding: 12px;
/* Center text */
text-align: center;
align-items: center;
justify-content: center;
/* Add margin to have extra space between multiple buttons */
margin: 10px;
}
/* Style for simple pixel text */
.ptext {
/* Use Press Start 2P font for buttons */
font-family: "Press Start 2P";
/* Set all letters to lowercase, regardless of capitalization */
text-transform: lowercase;
/* Set text size */
font-size: 24px;
}
/* Style for
aragraphs inside of Links & Contacts */
p.link {
/* Set maximum width */
max-width: 50%;
/* Align text to left side */
align-items: start;
}
/* Style for link buttons */
a.button {
/* Turn entire link into a block */
display: block;
/* Set text color */
color: #FFFFFF;
/* Strip link of underline */
text-decoration: none;
/* Turn entire link into a block */
display: block;
/* Use Fredoka One font for buttons */
font-family: "Fredoka One";
/* Set border's rounded corner */
border-radius: 5px;
/* Set container background color */
background: #A1A1A1;
/* Add padding */
padding: 12px;
/* Set button height to adjust dynamically with content */
height: min-content;
/* Center text */
text-align: center;
align-items: center;
justify-content: center;
/* Align button */
margin: auto;
}
/* Style for link buttons as part of a "multi-button"
*/
a.multi-button {
/* Turn entire link into a block */
display: block;
/* Set text color */
color: #FFFFFF;
/* Strip link of underline */
text-decoration: none;
/* Turn entire link into a block */
display: block;
/* Use Fredoka One font for buttons */
font-family: "Fredoka One";
/* Set border's rounded corner */
border-radius: 5px;
/* Set container background color */
background: #A1A1A1;
/* Add padding */
padding: 12px;
/* Set button height to adjust dynamically with content */
height: min-content;
/* Center text */
text-align: center;
align-items: center;
justify-content: center;
/* Align button */
margin: 5px auto;
}
/* Style for aligning multiple buttons */
div.multi-button {
/* Turn main-content into a nested flexbox */
display: flex;
/* Align flex contents vertically */
flex-direction: column;
/* Align buttons */
margin: auto;
/* Set width */
width: 100%;
/* Center button */
align-items: center;
justify-content: center;
}
/* Style for horizontal line */
hr {
/* Set total width */
width: 100%;
/* Set line thickness, style and color */
border-top: 1px solid #FFFFFF;
}
/* Style for
containers with the "class=blank" */
div.blank {
/* Set border thickness, style and color */
border: 1px solid transparent;
/* Set container background color + opacity */
background: transparent;
/* Set total container width */
width: 300px;
}
/* Style for meta flexbox */
div.meta-flexbox {
/* Turn
container into flexbox */
display: flex;
/* Wrap containers inside of flexbox */
flex-wrap: wrap;
/* Set automatic margin to center (horizontal) */
margin: auto;
/* Set total container width */
max-width: 1500px;
}
/* Custom Fonts: Kodchasan */
@font-face {
font-family: "Kodchasan";
src: url("fonts/kodchasan/Kodchasan-Regular.ttf")
format("truetype");
}
@font-face {
font-family: "Kodchasan";
src: url("fonts/kodchasan/Kodchasan-Bold.ttf")
format("truetype");
font-weight: bold;
}
@font-face {
font-family: "Kodchasan";
src: url("fonts/kodchasan/Kodchasan-Italic.ttf")
format("truetype");
font-style: italic;
}
@font-face {
font-family: "Kodchasan";
src: url("fonts/kodchasan/Kodchasan-BoldItalic.ttf")
format("truetype");
font-weight: bold;
font-style: italic;
}
/* Custom Fonts: Press Start 2P */
@font-face {
font-family: "Press Start 2P";
src: url("fonts/press_start_2p/PressStart2P-Regular.ttf")
format("truetype");
}
/* Custom Fonts: Fredoka One */
@font-face {
font-family: "Fredoka One";
src: url("fonts/fredoka_one/FredokaOne-Regular.ttf")
format("truetype");
}