/*1)html*/
/*2)Body*/
/*3)Elements*/
/*4)Classes*/
/*--------------------------------------------------------*/
/*1)html*/
/*To use the alternative box model for all of your elements (which is a common choice among developers), */
/*set the box-sizing property on the element and set all other elements to inherit that value:*/
html {
box-sizing: border-box;
background-color: #181a1b;
font-family: monospace;
/*16px is the default for font-size*/
font-size: 17px;
}
/*Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman". */
/* Was having trouble when specifying 2 fonts. Didn't happen this way before but having trouble now. */
*,
*::before,
*::after {
box-sizing: inherit;
}
/*In some browsers, form elements do not inherit font styling by default.*/
/*Therefore, if you want to be sure that your form fields use the font*/
/*defined on the body, or on a parent element, you should add this rule to your CSS.*/
/*For consistency, it is a good idea to set margins and padding to 0 on all elements, */
/*then add these back in when styling particular controls. Same with border-box.*/
/*This is sort of a form reset in order to get some consistency because different */
/*browsers do different things, like have different form styling defaults.*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea {
overflow: auto;
}
/*Note: The textarea customization here is for consistency reasons as in the above configuration.*/
/*2)Body*/
body {
min-height: 100vh;
/*background-color: whitesmoke;*/
}
.flexy {
display: flex;
}
.flexi {
display: inline-flex;
}
/*3)Elements*/
h1 {
text-align: center;
font-size: calc(1.5rem + 3vw);
color: gold;
text-shadow: 4px 4px 5px black;
}
footer {
text-shadow: 4px 4px 5px black;
}
/*4)Classes*/
.nav_ul_list {
display: flex;
list-style-type: none;
margin-top: 33px;
margin-right: 15px;
}
.nav-links a {
background-color: rgb(53, 50, 50);
font-weight: bold;
color: gold;
padding: 0.65em 0.65em;
border: 5px solid rgb(85, 90, 92);
border-radius: 1em;
text-decoration: none;
}
.nav-links a:hover {
text-shadow: 4px 4px 5px black;
border: 5px solid gold;
cursor: pointer;
}
.gold_p p {
color: gold;
text-shadow: 4px 4px 5px black;
line-height: 1.6;
font-weight: bold;
}
.gold_a a {
color: gold;
text-decoration: none;
text-shadow: 4px 4px 5px black;
line-height: 1.6;
font-weight: bold;
}
.head_margins {
margin-bottom: 5px;
margin-top: 25px;
}
.small_spacer {
min-height: 30px;
}
.p_center {
text-align: center;
justify-content: center;
}
.p_left {
margin-left: 1%;
margin-top: 3%;
margin-bottom: 4%;
color: red;
}
/*Coding Page */
.code_margins_lr {
margin-left: 7%;
margin-right: 7%;
border-radius: 1em;
border: 3px solid rgb(85, 90, 92);
}
.code_margins_tb {
margin-top: 7%;
margin-bottom: 7%;
}
.code_tab_margins {
margin-left: 3px;
margin-right: 3px;
border-radius: 1em;
border: 3px solid rgb(85, 90, 92);
}
.code_tab_margins_left {
margin-left: 7%;
}
.code_margin_bottom {
margin-bottom: 1%;
}
.code_fit {
min-width: fit-content;
max-width: fit-content;
max-height: fit-content;
}
.code_padding {
padding-top: 5px;
padding-bottom: 5px;
}
.code_align {
text-align: left;
margin-left: 10%;
margin-right: 10%;
}
.code_hover p:hover {
border: 3px solid gold;
cursor: pointer;
}
.code_div_hover:hover {
border: 3px solid gold;
}
.coding_p {
font-weight: normal;
font-size: 20px;
}
.code_paragraph_numbers {
color: black;
text-shadow: none;
user-select: none;
}
.code_description {
color: black;
text-shadow: none;
user-select: none;
}
.tab_lang {
}
.tab_example {
}
.selected {
border: 3px solid gold;
}
.code_scroll {
overflow-y: scroll;
height: 75vh;
}
.code_bg_color {
background-color: grey;
}
/*This is for that CSS interactive ball*/
.ball {
border-radius: 25px;
width: 50px;
height: 50px;
background: #c00;
position: relative;
left: 5%;
transition: transform 1s;
}
/*The following is the code needed to scroll the content from right 2 left*/
.scroll {
animation-duration: 4s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 13%;
width: 100%;
}
}