@charset "UTF-8";
/*@charset
  -a <string> denoting the character encoding to be used. must be double quoted
*/
/*
FOR WEBSITE
@font-face {
    font-family: 'unisans';
    src: url('UniSans.ttf') format('truetype');
}
*/
@font-face {
  font-family: 'unisans';
  src: url(/fonts/Uni\ Sans.ttf) format('truetype');
}
/*@font-face
  -the "URL()" section of the @font-face class will have the url that leads to your websites font files
  -upload and re-link font files to website when updated or moved
  -create a new @font-face for each additional (custom) font
  -format the font for the browser by using the correct font file type.
  .ttf('truetype'), .otf('opentype'), .woff('woff'),*/

a {
  text-decoration: none;
}

body  {
  font-family: 'unisans', sans-serif,'Segoe UI', Tahoma, Verdana;
  font-size: 1em;
  line-height: 1.5;
  background-color:  rgb(26, 36, 36);
  padding: 0;
  margin: 0;
}

button {
  background: transparent;
  border-style: none;
  color: white;
  font-size: 1em;
  text-align: center;
  padding-top: .5em;
  padding-bottom: .5em;
  margin: .1em;
  height: auto;
  width: 10em;
}

#content {
  padding-left: .75em;
}

/*.flex
  -flexboxes are a new css feature and should be STUDIED THUROUGHLY as it replaces
    a lot of the need for float attributes
*/

/*.glitch {
  animation-name: fadeIn;				
	animation-duration: 3s;       			
	animation-iteration-count: infinite;
}
  - use this class to play with any glitch effects
  - keep in mind the fadeIn keyframes are being used with the hover id's below
*/

h1 {
  letter-spacing: .25em;
  font-size: 2em;
  font-weight: 100;
  padding-top: .5em;
  padding-left: .6em;
  padding-bottom: 0em;
}

h2 {
  word-spacing: 2em;
  letter-spacing: .5em;
  font-weight: 400;
  font-size: .75em;
  padding-top: 0em;
  padding-bottom: 2em;
  padding-left: .5em;
}

h3 {
  background-color:  rgb(88, 88, 88);
  letter-spacing: .5em;
  font-weight: 400;
  font-size: 1em;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: .75em;
}

header {
  width: 100%;
  height: 2em;
  background-color: var(--static-blue);
/*.header
  this is an id instead of a class because the styling 
    is only ever going to be used once in a web page at the header/navigation bar*/
}

#logo {
  background-position: bottom;
  height: 8em;
  background-repeat: no-repeat;
  background-image: url(/images/static\ online-colored.png);
  background-size: 4em;
}

.main {
  width: 100%; 
  height: auto;
  text-align: center;
  color: white;
}

nav {
  background-color: rgb(0, 205, 194);
  height: 100%;
  font-size: .75em;
}

nav a {
  color: black;
  padding: 0 0 0 1em;
}

nav a:hover{
/*border-bottom: 1.5px rgb(255, 255, 255) solid;*/
  color: white;
}

nav ul {
  display: flex;
  justify-content: flex-start;
  padding: .5em 1em 0 .3em;
}

nav li {
  list-style-type: none;
  font-size: .8em;
}

.socials {
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1em;
}

#yt button:hover {
  color: rgb(0, 205, 194);
  animation-name: fadeIn;				
	animation-duration: 3s;       			
	animation-iteration-count: infinite;
  text-shadow: 0px 0px 5px rgb(0, 205, 194);
}

#ttv button:hover {
  color: rgb(0, 205, 194);
  animation-name: fadeIn;				
	animation-duration: 3s;       			
	animation-iteration-count: infinite;
  text-shadow: 0px 0px 5px rgb(0, 205, 194);
}

#tt button:hover {
  color: rgb(0, 205, 194);
  animation-name: fadeIn;	
	animation-duration: 3s; 			
	animation-iteration-count: infinite;
  text-shadow: 0px 0px 5px rgb(0, 205, 194);
}

#ig button:hover {
  color: rgb(0, 205, 194);
  animation-name: fadeIn;			
	animation-duration: 3s;     			
	animation-iteration-count: infinite;
  text-shadow: 0px 0px 5px rgb(0, 205, 194);
}

@keyframes fadeIn { 
  0% {opacity: 1;}
  5% {opacity: .8;}
  8% {opacity: 1;}
  10% {opacity: .8;}
  15% {opacity: 1;}
  18% {opacity: .2;}
  20% {opacity: 1;}
  23% {opacity: .8;}
  25% {opacity: .5;}
  27% {opacity: 1;}
  29% {opacity: .8;}
  32% {opacity: 1;}
  35% {opacity: 1;}
  38% {opacity: .8;}
  40% {opacity: 1;}
  45% {opacity: .6;}
  50% {opacity: 1;}
  75% {opacity: 1;}
  78% {opacity: .7;}
  80% {opacity: 1;}
  100% {opacity: 1;}
}

/*---NOTES---*/

/*
  -static-blue: rgb(0, 205, 194);
*/

/*CUSTOM VARIABLES
  -:root is equivilant to the <html> tag in regards to its importance.
    It defines the entire document, used in this case to allow 
    the custom property --static-blue to be recognized document wide.
  - changin the custome variable will change it globally where its used
*/

/*AUDIO CONTROLLER
  - need to learn how to customize a player in javascript. The default browser-dependant player
    has unwanted features such as a download option and playback speed.

div#header audio {
  float: right;
  top: 0;
  right: 0;
  padding: .3em 0 0 0;
  height: 1em;
}
*/

/*ALIGNMENT
  -display: flex; is going to (from my understanding) create a flex column.
   justify-content: will decide the position in the main direction of the item (row or column)
   align-item: will position the item in the cross direction of the flex-direction.
   place-self: place-self sets both align-self and justify-self in a single declaration
    within a cell.
   aside from the normal left, center, or right, you may set justify-content: space between to
   place remaining space in between the items (not what I want for this site)
*/

/*BACKGROUND IMAGES
  -background-repeat: none, repeat-x, or repeat-y can be used to control images that will automatically
    be repeated if the browser window exceeds the image size.
  -background-position: left, center, right and top, center, bottom can be used for image positioning when 
    background-repeat is set to none. remember to put the horizontal position first, then the verticle.
    Example: background-position: left top;
  -background-attachment: scroll or fixed can be used to control if the image stays when scrolling or moves
   up and down with the rest of the page
*/

/*CLASSES
  -alphabetize classes
  -you can establish classes for more than just the <p> element, (example: h2.bold)
  -you can create a general class, (example: .bold or .special)
  -adjust the HTML tags themselves by using the name of the tag as a class and removing the "."
    (example: blockquote {} or p {})
  -elements may be grouped (example: h1, h3, h4 {text-align: center;)
*/

/*FIND OUT
  -#header
    why doesnt background-height, or height alone, adjust the size of the <div id="header"?
    ANSWER: use padding instead of height/width, those are for images.
*/

/*FONTS/TEXT/LISTS
  -use font-style for italics, bold, etc.
  -remove the underline on hyperlink text with text-decoration: none; attribute
  -text-align attributes have been individually set into each class on purpose, 
    just to learn.
  -list-style-type: none; will remove the bullets from list items
*/

/*GLITCH EFFECT
  -effect will break the h1 text, causing it to show above the header

#glitch { 
	animation-name: fadeIn;				
	animation-duration: 3s;       			
	animation-iteration-count: infinite;
}
@keyframes fadeIn { 
	0% {opacity: 1;}
  5% {opacity: .8;}
  8% {opacity: 1;}
  10% {opacity: .8;}
  15% {opacity: 1;}
  18% {opacity: 0;}
  20% {opacity: 1;}
  23% {opacity: .8;}
  25% {opacity: .5;}
  27% {opacity: 1;}
  29% {opacity: .8;}
  32% {opacity: 1;}
  35% {opacity: 1;}
  38% {opacity: .8;}
  40% {opacity: 1;}
  45% {opacity: .6;}
  50% {opacity: 1;}
  75% {opacity: 1;}
  78% {opacity: .7;}
  80% {opacity: 1;}
  100% {opacity: 1;}
	} 
*/

/*INHERITENCE
  -when the parent (<body>, <head>, etc) of an HTML contains a child (<p>, <h1>, etc), that child will inherit the parents values.
    As a result, the childs values will be based off of the parent values. 
    (example: body {font-size: 1em;}, h1 {font-size: .75em;}. the h1 text will be .75em of the body text which is set at 1em.)
    Any details that are not specified in the child will take the values of the parent.
  -margin and padding must be "0" or they will be set by default
*/

/*OPTIMIZATION
  -@media queries are used to change up the styling of your rules for different screens. This will most likely
    be something that needs to be researched on its own because it is a lot of info. 
*/

/*MEASURMENTS
-em's: for typography, margins, and padding
-percentages: for divs, tables, iframes, and sometimes margines and padding
-pixels: for images, borders, windows, iframes, and fixed, absolute, and relative positionin
-fr is useful for conatainers to separate things into fractions
*/

/*SPACING
  -letter-spacing, word-spacing, and line-height are some attributes that can be used for spacing 
    (example: letter-spacing: .1em;)
  -text-indent can be used for indenting the first line of a (element) paragraph
  -margin can be used to create space around a paragraph, specified clockwise
    (example: margin: 0 2em 0 2em; for space on the left and right sides of a text)
    margine-left, top, right, and bottom may also be used
  -padding (similar to margines) will add padding to all four sides of an element.
    may also use padding-top, right, bottom, and left (example: padding-top: 200px for moving objects down)
  -float:"" or float-left,right will float an image to the left of right side of text.
    Sometimes, other text elements will be placed around the image. 
    If unwanted, use a class for the <element> that uses clear: both; in css
  -position: absolute; you can specifically tell the browser where the left edge will be according to the browser size.
    start with the attribute left: #; and top: #;
  -adding an absolute or fixed position attribute will ignore any rules of normal html page flow.
    Block/inline elements and items may float above eachother and cover eachother up. 
    To fix this, you can create a duplicate of the <div="header"> at the top of the page or
    give the <div class="main"> big margins. I chose the margin option.
  -z-index: #; this attribute when using a positioning that ignores the normal flow of the html page.
    Some things may sit on top of another. This attribute uses numbering to prioritize what items will sit on top.
    Index: 9; will sit on top of index: 8; an index of -1 will place items below the default. think 3d space.
  -box-sizing: boarder-box; is the most popular choice for setting box-sizing . It guarantees that the content
    box shrinks to make space for the padding and borders. There are good reasons for using either border-box
    or content-box. When creating something that needs precision with positioning or relation.
  -gap (formerly grid-gap is used in the grid container to place space in between each section of the grid
  -for items that require vertical adjustment, either justify-content or align-items, a height value must exist
   for that container
*/

/*TO DO
  -#logo
    image needs to be a smaller file size
*/