@charset "utf-8";
/*
    This is one of the primary stylesheets
    that defines the css for the Tech
    Tutorials website to make it look
    pretty and stuff.

    ╔════════════════╗
	║Import Web Fonts║
	╚════════════════╝
*/
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P|Ubuntu|Ubuntu+Condensed|Akronim&effect=fire-animation|3d-float'); /* From Google Fonts */
@font-face {
    font-family: DepletedUranium; /* From Dafont.com/depleted-uranium.font */
    src: url("DepletedUranium.ttf");
}
/*
    ╔══════════════════════╗
	║Entire Document Styles║
	╚══════════════════════╝
*/
html {
    background: black url("https://orig00.deviantart.net/87e4/f/2017/363/4/5/city_reflection_by_kirokaze-dby7qk3.gif")
        no-repeat top center;
    background-size: cover; /* Sets the background from DeviantArt. I have permission from the artist. */
}
::-moz-selection {color: #00face; background-color: coral} /* Changes color of highlighted selections. */
::selection {color: #00face; background-color: coral} /* May or may not give it a face. Found on CSS-Tricks.com */

/*
    ╔═══════════╗
	║Body Styles║
	╚═══════════╝
*/
body {
    background: rgba(255,128,0,0.5) url("https://orig00.deviantart.net/7dc5/f/2017/278/b/f/snowy_sunset_by_kirokaze-dbpl0op.gif")
        no-repeat top center;
    background-size: cover;
    border: 3px groove #6ca4bc;
    border-radius: 50px; /* Adds and css the border */
    box-shadow:
        inset rgba(0, 51, 101, 0.7) -5px -5px 15px,
        inset lightgray 3px 3px 5px;
}
/*
    ╔═════════════════╗
	║Navigation Styles║
	╚═════════════════╝
*/
nav#nav a { /* Styles and animates the nav bar. */
    color: darkorange;
    font-family: "Press Start 2P", fantasy;
    font-size: 20px;
    font-weight: bolder;
    text-decoration: none;
    text-shadow:
        blue 3px 3px 3px,
        blue 0 0 50px;
    background-color: dodgerblue;
    border: 2px solid orange;
    border-radius: 50px;
    box-shadow: rgba(128, 128, 128, 0.5) 5px 5px 0 2px;
    transition:
        box-shadow 0.2s,
        text-shadow 1s;
}
nav#nav a:hover { /* Hover styles for nav bar's animation. */
    box-shadow: none;
    text-shadow: blue 0 0 50px;
    position: relative;
    top:5px; left:5px;
    transition:
        box-shadow 0.2s,
        text-shadow 1s;
}

/* tutorials List Styles */

h2#list_head { /* Styles the tutorial list header. */
    color: midnightblue;
    font-family: DepletedUranium, cursive;
    font-size: 15px;
    text-shadow:
        orange 1px 1px 1px,
        blueviolet 0 0 50px;
}
div#list { /* Styles the div containing the tutorial list */
    background-color: rgba(108, 164, 188, 0.7);
    border: 2px solid darkorange;
    border-radius: 20px;
}
div#list a { /* Styles the list of tutorials. */
    color: yellow;
    font-family: 'Ubuntu Condensed', sans-serif;
    transition: color 1s;
}

div#list a:visited { /* Styles how the list looks when items are visited. */
    color: lightyellow;
    text-decoration: none;
    transition: color 1s;
}
div#list a:hover { /* Animates the tutorial list when hovered over. */
    color: lightgoldenrodyellow;
    font-style: italic;
    transition: color 1s;
}
div#list a:hover:visited {text-decoration: none;} /* Just in case. */

b.OS { /* Styles how the operating system names in the b elements look. */
    color:darkred;
    text-decoration: overline;
}
/*
    ╔═════════════╗
	║Header Styles║ For tutorials.
	╚═════════════╝
*/
h1,h2,h3 {
    color: deepskyblue;
    text-shadow:
            black 1px 1px 1px,
            gray 5px 5px 5px,
            blue 0 0 50px;
}
h1 {
    color: deepskyblue;
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 50px;
    text-align: center;
}
h2 {
    font-family: 'Walter Turncoat', "Comic Sans MS", cursive;
    font-size: 75px;
    margin: 10px 0 0 50px;
}
h3 {
    margin:0;
    font-family: 'Walter Turncoat', "Comic Sans MS", cursive;
}
/*
    ╔═══════════════════════╗
	║Paragraph & Form Styles║ For About, Contact, and tutorial pages.
	╚═══════════════════════╝
*/
p, fieldset, legend {
    color: lightyellow;
    font-family: Ubuntu, Arial, sans-serif;
    text-indent: 30px;
    background-color: rgba(108, 164, 188, 0.8);
    border: 5px double orange;
    border-radius: inherit;
}
form {margin-top:10px}
legend, fieldset {border-radius: 10px;}
legend {
    color: orangered;
    font-size: 2em;
    text-align: center;
    text-shadow:
        gray 3px 3px 3px,
        blue 0 0 50px;
}
a {color:blue}
a.social { /* Sets styles for social links */
    list-style-type: none;
    text-decoration: none;
    text-shadow: blue 3px 3px 3px;
    font-family: 'Akronim', cursive;
    font-size: 2em;
    color: orange;
    transform: rotate(0deg);
    transition: all 1s;
}
a.social:hover, a.social:focus {
    /* Sets styles when social links are hovered or focused on. */
    transform: rotate(50deg);
    color: darkslateblue;
    text-shadow: orange 3px 3px 3px;
    transition: all 1s;
}
textarea {
    color:white;
    background-color: transparent;
}
label {text-shadow: black 1px 1px 1px}
progress {width: 95%}

code, td:first-child { /* Sets styles for code elements to better show code within paragraphs and tables. */
    color: black;
    background-color: lightyellow;
    font-family: 'Ubuntu Mono', Consolas, monospace;
    font-weight: bold;
}
/*
    ╔════════════╗
	║Table Styles║
	╚════════════╝
*/
table.commands {
    margin-bottom: 30px;
    background: white;
    border: 10px outset rgb(0, 125, 153);
    font-size: 0.75em;
    width: 100%
}
/*Table Cell Styles*/
table.commands th, table.commands td {
    border: 1px solid gray;
}
/*
    ╔════════════╗
	║Image Styles║
	╚════════════╝
*/
figure.feature img {
    border: 3px double orange;
    border-radius: 5px;
}
#about,#contact {
    border: 5px double orange;
    border-radius: 10px;
}
.step_img, video, iframe {
    border: inherit;
    border-radius: 10px;
    box-shadow:
        inset rgba(0, 51, 101, 0.7) -5px -5px 15px,
        inset lightgray 3px 3px 5px;
}
/*
    ╔═══════════════════════╗
	║Featured Article Styles║ For homepage.
	╚═══════════════════════╝
*/
figure.feature {
    text-align: center;
    background-color: rgba(108, 164, 188, 0.8);
    padding:5px;
    border: 1px solid orange;
    border-radius: 10px;
}
figcaption {
    color: lightyellow;
    font-family: Ubuntu, sans-serif;
    font-weight: bold;
}
/*
    ╔════════════╗
	║Steps Styles║ For tutorials.
	╚════════════╝
*/
div#steps {border-radius: inherit}
div#steps p {margin-left: 1px}
div.step {border-radius: inherit}
/*
    ╔═════════════╗
	║Footer Styles║
	╚═════════════╝
*/
footer {
    margin: 5px;
    color: cornflowerblue;
    font: larger Ubuntu, Arial, sans-serif;
    font-weight: bolder;
    text-decoration: underline overline orange;
}
footer b#cp {
    font-family: Arial, sans-serif;
    display:inline-block;
    transform: rotate(180deg);
}