css.css

/*
👋.Hi, I’m @caseykreicar
  \😎.'I’m interested in learning... HTML, CSS, JS, PY, PHP, & SQL.🌱
    ▌l👉 Here is how to reach me ...📫 ✨ kreicarcl@alumni.vcu.edu ✨
   / \  🌐 Website http://latimere.io
 _|   |_  
*/
/* This document demonstrates CSS or Cascading Style Sheets formatting in association with the css.html file */
/* Comments Goe Here Between These Symbols */


  /*|||||||||||||||||||||||||||||||||*/
 /*|||||  VARIABLE FUNCTION  |||||||*/
/*|||||||||||||||||||||||||||||||||*/
:root {
    --courier: 'Courier New', Courier, monospace;
    --black: rgb(0,0,0);
    --white: rgb(255,255,255);
}
/*|||||||||||||||||||||||||||||||||||||||||||||*/

h4 {
    color: rgb(40,40,40);
    background-color: rgb(230,230,230);
    padding: 80px;
    /*font-family needs to have the font style installed on the computer locally*/
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 60px;
    text-align: center;
    outline: 2px solid;
}

h3 {
    color: rgb(40,40,40);
    background-color: rgb(230,230,230);
    padding: 20px;
    /*font-family needs to have the font style installed on the computer locally*/
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    text-align: left;
    outline: 1px dashed;
}

h5 {
    /*Variable Functions Applied*/
    font-family: var(--courier);
    background-color: var(--black);
    color: var(--white);
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| BOXES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
#paragraphExample01 span {
    color: rgb(255,0,0);
    text-transform: uppercase;
    border: 1px solid rgb(0,0,0);
    /*ouline is drawn outside the element's border, however is still within the margin*/
    outline: 2px dashed;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.rgbExample span {
    color: rgb(0,128,0);
    font-weight: 800;
    outline: 1px solid;    
}

.hexExample span {
    color: #00008B;
    font-weight: 800;
    outline: 1px solid;
}

.rgbaExample span {
    color: rgba(75,0,130,0.25);
    font-weight: 800;
    outline: 1px solid;
}

.hslaExample span {
    color: hsla(0,100%,50%,0.75);
    font-weight: 800;
    outline: 1px solid;
}

.important span {
    /*!important is the nuclear option, used as a last resort to override a CSS declaration*/
    color: red!important;
}

.important span {
    color: blue;
}

.phScaleContainer {
    outline: 2px dashed;
    /*outermost*/
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /*between margin & padding*/
    border-left: 10px;
    border-right: 10px;
    border-top: 10px;
    border-bottom: 10px;
    /*innermost*/    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgb(240,240,200)
}

.phScale {
    font-size: 28px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.phScale details {
    font-size: 14px;
}

.phScale.zero {
    background-color: #da3d75;
}

.phScale.one {
    background-color: #db5580;
}

.phScale.two {
    background-color: #e0658a;
}

.phScale.three {
    background-color: #e2749a;
}

.phScale.four {
    background-color: #e587a7;
}

.phScale.five {
    background-color: #e799b5;
}

.phScale.six {
    background-color: #e7abc1;
}

.phScale.seven {
    background-color: #23ab7e;
}

.phScale.eight {
    background-color: #8dc4df;
}

.phScale.nine {
    background-color: #75bada;
}

.phScale.ten {
    background-color: #5fadd2;
}

.phScale.eleven {
    background-color: #469fcb;
}

.phScale.twelve {
    background-color: #3293c3;
}

.phScale.thirteen {
    background-color: rgb(54,134,185);
}

.phScale.fourteen {
    background-color: rgb(53,122,175);
}
/*the letter class declares a font, each class below (ie..   .red, .blue, .yellow  etc..) inherits this font as well but also delcares different color*/
.letter {
    font-size: 70px;
    text-shadow: 1px 1px 2px rgb(0,0,0);
}
/*classes ie....   .letter  in this instance are the most common CSS selectors*/
.letter.red {
    color: rgb(255,0,0);
}

.letter.blue {
    color: rgb(0,0,255);
}

.letter.yellow {
    color: rgb(255,255,0);
}

.letter.green {
    color: rgb(0,255,0);
}

.letter.orange {
    color: rgb(255,165,0);
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TEXT ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.systemUiText {
    font-family: system-ui;
}

.verdanaText {
    font-family: verdana;
}

.arielText {
    font-family: arial;
}

.timesNewRomanText {
    font-family: 'Times New Roman';
}


.textExampleTable {
    border: solid 1px black;
    border-collapse: collapse;
}

.textExampleTable td {
    border: solid 1px black;
    border-collapse: collapse;
}


.textThree {
    font-weight: 100;
}

.textOne {
    font-weight: 600;
}

.textTwo {
    font-weight: 1000;
}

.textSizeOne {
    font-size: 50%;
}

.textSizeTwo {
    font-size: 200%;
}

.textSizeThree {
    font-size: 500%;
}

.underline {
    text-decoration: underline;
}

.poppinsFont {
    font-family: Poppins;
    font-weight: 200;
}

.poppinsFont i {
    font-weight: 600;
}

.decorationTextOverline {
    text-decoration: overline;
}

.decorationTextLineThrough {
    text-decoration: line-through;
}

.decorationTextUnderline {
    text-decoration: underline;
}

/*||||||||||||||||||||BLINK ANIMATION||||||||||||||||||||||||*/

.decorationTextBlink {
    animation: blinker 2s linear infinite;
    font-weight: 600;
}

@keyframes blinker {
    50% {
       opacity: 0; 
    }
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.lineHeightPositive {
    line-height: 3.5em;
}

.lineHeightNegative {
    line-height: .01em;
}

.letterSpacing-1 {
    letter-spacing: 1.5em;
}

.letterSpacing-2 {
    letter-spacing: 3em;
    text-decoration: overline;
}

.wordSpacing {
    word-spacing: 1em;
}

.leftAlign {
    text-align: left;
}

.rightAlign {
    text-align: right;
}

.centerAlign {
    text-align: center;
}

.justifyAlign {
    text-align: justify;
}

.alignImage {
    width: 5%;
}

#textTop {
    vertical-align: top;
}

#textBaseline {
    vertical-align: baseline;
}

.indentText {
    text-indent: 20px;
}

.textShadow {
    /*first value: length right or left shadow will fall | second value: distance top or bottom shadow will fall | third value: blur*/
    text-shadow: -2px 3px 7px rgb(0,0,0);
}

.firstLetter:first-letter {
    font-size: 200%;
    font-weight: bold;
}

.firstLetter {
    text-indent: 20px;
}

.linkStyling.a {
    color: rgb(255,105,0);
    text-decoration: overline;
}

.linkStyling.b:visited {
    color: rgb(255,255,255);
}

.linkStyling.c:hover {
    color: rgb(255,0,0)
}

.linkStyling.d {
    color: rgb(0,0,255)
}

/*|||||||||||||||||||||||||ANIMATE TEXT or ROTATE TEXT ELEMENTS IN AND OUT||||||||||||||||||||||||||||*/

.rotatingText { 
    align-items: center;
    display: flex;
    height: 10vh;
    text-align: left;
  }
  
  .rotatingText-content { 
    position: relative;
    width: 100%;
  }
  
  .rotatingText-description { 
    font-size: 14px;
    margin: 0;
    
    @media (min-width: 768px) { 
      font-size: 18px;
    }
  }
  
  .rotatingText-adjective { 

    font-size: 40px;
    left: 0;
    margin-bottom: 0;
    margin-top: 30px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: left;
    text-transform: uppercase;
    top: 0;
    
    @media (min-width: 768px) { 
      font-size: 40px;
    }
    
    &:nth-of-type(1) { 
      animation: rotate-text-up 4s 2s; 
    }
    
    &:nth-of-type(2) { 
      animation: rotate-text-up 4s 5.5s; 
    }  
    
    &:nth-of-type(3) { 
      animation: fade-text-in 4s 8.5s forwards;
    }
  }

/* &:nth-of-type(1) { 
      animation: rotate-text-up 1.5s .75s; 
    }
    
    &:nth-of-type(2) { 
      animation: rotate-text-up 1.5s 2s; 
    }  
    
    &:nth-of-type(3) { 
      animation: fade-text-in 1.5s 3.25s forwards;
    }
  }*/

  @keyframes rotate-text-up { 
    0% {
      transform: translate3d(0, 80px, 0);
      opacity: 0;
    }
    
    20%, 80% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    
    100% {
      transform: translate3d(0, -40px, 0);
      opacity: 0;
    }
  }
  
  @keyframes fade-text-in { 
    0% {
      opacity: 0;
      transform: translate3d(0, 80px, 0);
    }
    
    50%, 100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
/*|||||||||||||||||||||||||||||||||||||||||ROTATING IMAGE||||||||||||||||||||||||||||||||||||||||||||||*/
/*see if you can make the rotating image the entire background?*/
.rotatingImage {
    position: absolute;
    left: 360px;
  }
  
  @keyframes rotation {
    0% {
        height: 16.6%;
        width: 5.3%;
      }
      
    100% {
        height:0%;
        width: 0%;
        transform: rotate(359deg) translateX(10px) translateY(60px) translateX(-10px);
      }
  }

.toilet {
    z-index: -1;
    width: 600px;
    height: 600px;
    transform: translateX(40px);
    transform: translateY(-280px);
}

.toiletAnimation {
    position: relative;
}

.toiletAnimation.handle {
    width: 40px;
    height: 10px;
    background:black;
    position: absolute;
    left: 80px;
    transform: translateY(-70px);
    z-index: 2;
    overflow: auto;
}



.toiletAnimation.handle:hover ~ .rotatingImage {
    animation: rotation 4s forwards;
}

.toiletAnimation.handle:active {
    transform: translateY(-70px) rotate(-8deg);
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| BOXES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

#box-01 {
    width: 200px;
    height: 200px;
    outline: 2px dashed;
    background-color:  rgb(0,255,255)
}

#box-01 p {
    background-color: rgb(140,140,185)
}


.box-02 tr {
    /*easy way to outline a table*/
    outline: solid;
}

.box-02 th {
    /*easy way to outline a table*/
    outline: solid;
}

.box-02 td {
    /*easy way to outline a table*/
    min-width: 10px;
    max-width: 600px;
    outline: solid;
}


.box-03 {
    outline: 64px dotted rgb(255,0,0);
    border: 64px solid rgb(0,255,0);
    /*adding a background color to the table class fills entirely within the border*/
    background-color: rgb(200,200,200);
    margin: 100px;
    padding: 100px;
}

.box-03 th {
    outline: 18px dotted rgb(255,0,0);
    border: 18px solid rgb(0,255,0);
}

.box-03 tr {
    outline: 2px solid rgb(0,0,0);
    border: 8px solid rgb(0,255,0);
}

.box-03 td {
    outline: 6px dotted rgb(255,0,0);
    border: 6px solid rgb(0,255,0);
    padding: 10px;
}

.box-04 p {
    min-height: 10px;
    max-height: 20px;
}

.box-05 #overflow {
    min-height: 10px;
    max-height: 60px;
    overflow: scroll;
}

.box-06 #margin {
    background-color: yellow;
    margin: 10px;
    padding:300px;
    width: 900px;
    font-weight: 800;
}

.box-06 #border {
    background-color: red;
    margin: 10px;
    padding: 200px;
    font-weight: 800;
}

.box-06 #padding {
    background-color: cyan;
    margin: 10px;
    padding: 100px;
    font-weight: 800;
}

.box-06 #content {
    background-color: black;
    color: white;
    margin: 50px;
    padding: 30px;
    font-weight: 800;
}

.borderWidth {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
    border: 2px rgb(0,0,0) dashed;
    /*Values appear clockwise in following order: top, right, bottom, left*/
    border-width: 3px 7px 20px 100px;
    padding: 50px;
}

.borderStyle-01 {
    text-align: center;
    padding: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
    border-style: groove none double ridge;
    border-width: 8px;
}

.borderStyle-02 {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
    border-style: dashed outset dotted inset; 
    border-width: 8px;
    padding: 50px;
}

.borderColor {
    padding: 100px;
    border: 18px solid;
    border-color: rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0);
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
}

.borderShorthand {
    border: 9px solid rgb(255,0,0);
    text-align: center;
}

.paddingShorthand {
    padding: 10px 400px 10px 400px;
    border: 5px solid;
}

.marginShorthand {
    margin: 100px 600px 100px 600px;
    border: 60px solid; 
}

.centeringContent-01 {
    width: 300px;
    margin: 50px auto 50px auto;
    border: 6px dashed;
    text-align: center;
}

.borderStyle-03 {
/*                      source | slice | width | outset | repeat                              */
border-image: url("./menu.png") 57 53 / 40px 50px / 1rem round stretch;
/*border-image-width: 100px;
border-image-height: 100px;*/
padding: 100px;
width: 1600px;
text-align: center;
margin-right: auto;
margin-left: auto;
}

.borderStyle-04 {
    border-image: linear-gradient(red, blue) 20 / 30px;    
    font-weight: 1000;
    padding: 100px;
}


/*   example of inheritance with classes   */

.boxShadow {
    border-image: linear-gradient(green, orange) 100 / 50px;  
    padding: 60px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: inset 1em 1em 10em black;
    margin-top: 30px;
    margin-bottom: 30px;
}

.boxShadow.one {
    width: 200px;
    height: 200px;
    background-color: yellow;
    /*third value is blur distance*/
    box-shadow: 15px 15px 5px #777777;
}

.boxShadow.two {
    width: 200px;
    height: 200px;
    box-shadow: inset 6em 1em 10em darkblue;
    text-align: center;
    text-shadow: -12px -12px 3px black;
}

.roundedCorners {
    margin-right: auto;
    margin-left: auto;
    width: 800px;
    height: 160px;
    border: double 1em transparent;
    border-radius: 80px;
    background-image: linear-gradient(white, white), linear-gradient(to right, green, cyan);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-align: center;
    box-shadow: inset 1em 1em 3em black;
}

.triangle {

    margin-right: auto;
    margin-left: auto;
    width: 0; 
    height: 0; 
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-left: 65px solid yellowgreen;
}

.circle {
    width: 100px;
    height: 100px;
    text-align: center;
    color: white;
    border: solid 10px blueviolet;
    border-radius: 90px;
    background-color: blueviolet;
    font-weight: 900;
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| LISTS, TABLES, FORMS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.societalNeeds {
    list-style-type: upper-roman;
}

.circleBulletPoints {
    list-style-type: circle;
}

.imageBulletPoints {
    list-style-image: url("rotatingImage30x30.png");
    margin: 20px;

}

.indentedBulletPoints {
    list-style-type: square;
    list-style-position: inside;
    margin: 16px;
}

.listShorthand {
    list-style: outside circle;
    width: 60px;
    height: 60px;
    outline: 2px black solid;
    margin: 40px 40px 40px 40px;
    padding: 30px;
    border-radius: 90px
}

.auction {
    border: 6px solid orange;
    outline: 6px solid red;
    background-color: rgb(255,255,0);
    padding: 10px;
    width: 625px;
}

.auction h2 {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow: 0px 0px 5px yellow;
    background-color: rgb(255,105,0);
    border: 6px red solid;
    border-radius: 30px;
    border-style: inset;
    width: 600px;
    text-align: center;
    padding: 8px;
}

.auction table {
    width: 625px;
}

.auction th {
    border-bottom: 2px black solid;
    border-top: 1px grey solid;
}

.evenRow {
    background-color: rgb(205,205,205);
}

.auction td:hover {
    background-color: black;
    color: white;
}

.emptyTable-01 td {
    width: 50px;
    height: 50px;
    outline: 1px black solid;
    background-color: pink;
}

.emptyTable-02 td {
    width: 50px;
    height: 50px;
    outline: 1px black solid;
    empty-cells: hide;
    background-color: lightblue;
}

.emptyTable-03 td {
    width: 50px;
    height: 50px;
    outline: 1px black solid;
    background-color: lightgreen;
}

.emptyTable-03 {
    border-spacing: 10px;
}

.emptyTable-03 td:hover {
    border: 1px black solid;
}

.emptyTable-04 td {
    width: 50px;
    height: 50px;
    outline: 1px black solid;
    background-color: lightsalmon;
}

.emptyTable-04 {
    border-spacing: 20px;
}

.emptyTable-04 td:hover {
    box-shadow: 0px 0px 8px black;
}

/*had to use an id here to put a background image in a form input (class wasn't working for some reason?)*/
#emailLogo {
    background-image: url("./emailLogo.png");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 4px 0px;
    padding-left: 34px;
    height: 29px;
    border: 2px black solid;
}

.intakeForm {
    width: 650px;
    height: 800px;
    padding: 60px;
    margin-left: auto;
    margin-right: auto;
    outline: 4px solid;
}

.intakeForm h2 {
    text-align: center;
    padding: 10px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 36px;
}

.intakeForm fieldset {
    padding: 30px;
    margin: 10px;
}

.intakeForm legend {
    border: 1px solid;
    background-color: rgb(180,225,225);
    font-weight: 600;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: right;
}

.intakeForm input {
    margin-top: 4px;
    margin-bottom: 4px;
}

.submitForm {
    margin-right: auto;
    margin-left: 260px;
    font-size: 16px;
}

.submitForm:hover {
    font-weight: 600;
    background-color: rgb(180,225,225);
    box-shadow: inset;
}

.cursorStyle {
    width: 400px;
    height: 400px;
    outline: 4px solid orange;
    margin-left: auto;
    margin-right: auto;
}

.cursorStyle p {
    text-align: center;
    color: blue;
    padding: 180px;
    cursor: wait;
}

.hoverOutline {
    height: 500px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.hoverOutline p {
    width: 250px;
    height:250px;
    margin: 10px 10px 10px 10px;
    float: right;
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| LAYOUT ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.hoverOutline p:hover {
    outline: 1px solid red;
}

.hoverOutline:hover {
    outline: 1px solid black;
}

.layout:hover {
    border: 1px solid black;
}

.layout p:hover {
    outline: 1px solid red;
}


.layout.relative span {
    position: relative;
    left: 100px;
    bottom: 18px;
}

.layout.relative span:hover {
    outline: 2px solid blue;
    font-size: 18px;
}

.layout.absolute span {
    position: absolute;
}

.layout.absolute span:hover {
    background-color: blue;
    color: white;
    font-size: 18px;
}

/*.layout.fixed.paragraph {
    position:fixed;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    margin: 0px;
    outline: none 
}
*/

.layout.floating span {
    float: left;
}

.layout.floating span:hover {
    outline: 2px solid blue;
}

.layout.zIndex span {
    position: relative;
    right: 10px;
    top: 20px;
}

.layout.zIndex span:hover {
    background-color: yellow;
    color: grey;
    font-size: 18px;
}

.layout.zIndex.bottom span:hover {
    z-index: -5;
    font-size: 24px;
}

.layout.zIndex.top span {
    z-index: 5;
}

.stackedCircle {
    margin-right: auto;
    margin-left: auto;
    width: 400px;
    height: 400px;
}

.stackedCircle.one {
    margin-right: auto;
    margin-left: auto;
    width: 600px;
    height: 600px;
    background-color: red;
    border-radius: 360px;
    opacity: 95% !important;
}

.stackedCircle.two {
    position: relative;
    top: 50px;
    width: 500px;
    height: 500px;
    background-color: orange;
    border-radius: 360px;
    opacity: 85% !important;
}

.stackedCircle.three {
    position: relative;
    top: 50px;
    width: 400px;
    height: 400px;
    background-color: yellow;
    border-radius: 360px;
    opacity: 75% !important;
}

.stackedCircle.four {
    position: relative;
    top: 50px;
    width: 300px;
    height: 300px;
    background-color: green;
    border-radius: 360px;
    opacity: 65% !important;
}

.stackedCircle.five {
    position: relative;
    top: 50px;
    width: 200px;
    height: 200px;
    background-color: blue;
    border-radius: 360px;
    opacity: 55% !important;
}

.stackedCircle.six {
    position: relative;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: purple;
    border-radius: 360px;
    opacity: 45% !important;
}

.stackedCircle.six p {
    color: white;
    font-weight: 900;
    text-align: center;
    padding-top: 40px;
    opacity: 45% !important;
}

.stackedCircle:hover {
    opacity: 100% !important;
    cursor: pointer !important;
}

.sideBySide {
    margin-bottom: 680px;
    margin-left: auto;
    margin-right: auto;
    border: 20px;
    padding: 35px;
    outline: 1px solid black;
    height: 600px;
}

.sideBySide p {
    border: 1px solid black;
    background: lightblue;
    width: 240px;
    float: left;
    margin: 15px;
    padding: 15px;
}

.sideBySide.noTouchRight {
    outline: 4px solid black;
    background: lightblue;
    width: 240px;
    height: 160px;
    clear: both;
    margin: 15px;
    padding: 15px;
}

.createMargin {
    margin-top: 100px;
}

.column.a {
    float: left;
    width: 300px;
    margin: 10px;
}

.column.b {
    float: left;
    width: 300px;
    margin: 10px;
}

.column.c {
    float: left;
    width: 300px;
    margin: 10px;
}

.column.a:hover {
    outline: 2px solid red;    
}

.column.b:hover {
    outline: 2px solid red;    
}

.column.c:hover {
    outline: 2px solid red;    
}

.column.d:hover {
    outline: 2px solid red;    
}

.column.e:hover {
    outline: 2px solid red;    
}

.column.f:hover {
    outline: 2px solid red;    
}

.fixedBannerLayout {
    width: 960px;
    margin: 0 auto;
    outline: 1px solid black;
}

#content {
    overflow: auto;
    height: 30%;
}

.fixedBannerLayout {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    padding: 10px;
    margin: 10px;
    outline: 1px solid black;
    margin-left: auto;
    margin-right: auto;
}

.fixedBannerLayout li {
    display: inline;
    padding: 70px;
}

.fixedBannerHeader {
    text-align: center;
}

#feature {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    padding: 10px;
    margin: 10px;
    outline: 1px solid black;
}

.fixedFooter {
    background-color: lightcoral;
    color: white;
    outline: 1px solid black;
    font-size: x-large;
    padding: 10px;
    margin: 10px;
}

.fixedWidthColumnOne {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    float: left;
    margin: 10px;
    width: 600px;
}

.fixedWidthColumnTwo {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    float: left;
    margin: 10px;
    width: 600px;
}

.fixedWidthColumnThree {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    float: left;
    margin: 10px;
    width: 600px;
}

.liquidBannerLayout {
    width: 90%;
    background-color: lightcoral;
    color: white;
    outline: 1px solid black;
}


.liquidBannerLayout li {
    display: inline;
}

.liquidBannerHeader {
    text-align: center;
}


.liquidFooter {
    background-color: lightcoral;
    color: white;
    outline: 1px solid black;

}

.liquidWidthColumnOne {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    width: 30%;
    float: left;
    padding: .5em;
    margin: 1%;
}

.liquidWidthColumnTwo {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    width: 30%;
    float: left;
    padding: .5em;
    margin: 1%;
}

.liquidWidthColumnThree {
    background-color: lightcoral;
    color: white;
    font-size: x-large;
    outline: 1px solid black;
    width: 30%;
    float: left;
    padding: .5em;
    margin: 1%;
}

.pixels_960 {
    margin-left: auto;
    margin-right:auto;
    width: 960px;
    /* outline outlines the border  */
    text-align: center;
    margin-bottom: 500px;
}

/*
.pixels_960 div {
    margin-top: 50px;
}
*/

#gridType {
    outline: 1px solid black;
    margin-bottom: 45px;
}

.pixels_960 p {
    outline: 1px dashed green;
    height: 60px;
}

.grid_12 {
    margin: 10px;
}

.grid_4 {
    width: 300px;
    float: left;
    margin: 10px;
}

.grid_6 {
    width: 460px;
    float: left;
    margin: 10px;
}

.grid_2 {
    width: 140px;
    float: left;
    margin: 10px;
}

.grid_3 {
    width: 220px;
    float: left;
    margin: 10px;
}

#gridTypeEnd {
    outline: 1px solid black;
    margin-bottom: 45px;
    width: 960px;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| IMAGES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

img.small {
    width: 220px;
    height: 360px;
}

img.medium {
    width: 440px;
    height: 720px;
}

img.large {
    width: 660px;
    height: 1280px;
}

/* you can more easily identify the classes element using this selector method */
img.alignLeft {
    float: left;
    margin: 4px;
}

.alignRight {
    float: right;
    margin: 4px;
}

/*align images on center of page*/
.small.alignCenter {
    display: block;
    margin: 0px auto;
}

p.imageBackgroundWhiteText {
    color: white;
    background-image: url("./debianBackground.jpg");
    font-weight: 600;
    margin: 4px;
    padding: 12px;
    outline: 2px solid black;
} 

.repeatX {
    background-image: url("./emailLogo.png");
    background-repeat: repeat-x;
}

.repeatY {
    background-image: url("./emailLogo.png");
    background-repeat: repeat-y;
}

.positionTopRight {
    background-image: url("./emailLogo.png");
    background-repeat: no-repeat;
    background-position: right top;
}

.positionCenterCenter {
    background-image: url("./emailLogo.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.positionLeftBottom {
    background-image: url("./emailLogo.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}

.positionPercentage {
    background-image: url("./emailLogo.png");
    background-repeat: no-repeat;
    background-position: 75% 65%;
}

.imageShorthand {
    outline: 1px solid black;
    background: 
        url("./emailLogo.png")
        no-repeat top left,
        url("./emailLogo.png")
        no-repeat top right,
        url("./emailLogo.png")
        no-repeat bottom right,
        url("./emailLogo.png")
        no-repeat center center,
        url("./emailLogo.png")
        no-repeat bottom left;
}

.button {
    height: 220px;
    width: 160px;
    background-image: url("./1.png");
    background-position: -30px;
    background-repeat: no-repeat;
}

div#one1:hover {
    height: 220px;
    width: 160px;
    background-image: url("./2.png");
    background-position: 10px;
    background-repeat: no-repeat;
}

div#one1:active {
    height: 220px;
    width: 160px;
    background-image: url("./3.png");
    background-position: 40px 
}

/*id selectors ie..... #paragraphExample01 in this instance are not commonly used in CSS, these are more for specific use cases within HTML and JS*/
#paragraphExample01 {
    color: rgb(0,0,200);
    font-size: 20px;
    outline: 3px dotted;
    text-align: right;
    padding: 6px;
    border: 6px;
    margin: 6px;
}

#testListItem {
    outline: 1px dotted;
    margin-right: 50%;
    text-align: center;
}/*||||||||||||||||||||||||||||*/
/*|||||||  FORM SECTION  ||||||*/
/*||||||||||||||||||||||||||||*/

#sloth {
    border-radius: 20px;
    margin-bottom: 1.5rem;
    max-width: 100%;
    height: auto;
}

#inputForm {
    /*order of preference for font styles/typeface ie....font-family values*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    outline: 2px dotted;
    font-size: 11px;
    font-weight: 999;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 66.6%;
    padding-right: 1.5rem;
}

.blueForm {
    background-color: rgb(204,229,255);
}

.submitButton {
    position: absolute;
    background-color: rgb(235,165,0);
    font-weight: 600;
}

.submitButton.secure {
    background-color: rgb(0,205,0);
}

#resetButton {
    position: absolute;
    left: 80%;
}

#activebutton:active {
    background: rgb(0,0,0);
    color: rgb(255,0,0);
}

#hoverbutton:hover {
    background: rgb(0,255,255);
}


/*||||||||||||||||||||||||||||*/
/*||||  TABLE SECTION  |||||||*/
/*||||||||||||||||||||||||||||*/
.scheduleTable {
    margin-left: auto;
    margin-right: auto;
    border: 2px solid rgb(0,0,0);
    font-family: 'Courier New', Courier, monospace;
    border-collapse: collapse;
    padding: 1.0rem;
}

.scheduleTable.data {
    background-color: rgb(250,235,215);
}

.scheduleTable.header {
    background-color: rgb(140,140,185);
    font-size: 20px;
    font-weight: 950;
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgb(0,0,0);
    padding: 4px;
}
/*||||||||||||||||||||||||||||*/

/*||||||||||||||||||||||||||||*/
#tableOfContentsBox {
    outline: 1px dotted;
}

#tableOfContents {
    color: rgb(0,200,0);
    font-size: 30;
    outline: 2px dashed;
    padding: 50px;
}
/*||||||||||||||||||||||||||||*/
/*||||||||   MENU     ||||||||*/
/*||||||||||||||||||||||||||||*/

details {
    text-align: center;
    padding-bottom: 4px;
}

#menuImage {
    box-shadow: 0 4px 8px rgb(0,0,2), 0 6px 20px rgb(0,0,3);
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 1px
}

.menu {
    height: 110vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px;
    outline: 1px dotted;
  }
  
  .menu-text {
    padding: 4px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
    padding-right: 80px;
    outline: 1px dotted;
  }

  #menuHeader {
    font-size: 46px;
    color: rgb(255,0,0);
    font-weight: 18;
    margin-left: 450px;
    margin-right: 5px;
    padding-top: 6px;
    text-shadow: 0 1px 2px rgb(0,0,2), 0 2px 6px rgb(0,0,3);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }

  .coffeeMenu, tr {
    padding: 2px;
    text-align: left;
  }

  .coffeeMenu, th, td {
    padding-bottom: 2px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .priceFluctuates {
    background-color: rgb(255,205,205)
  }

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||freeCodeCamp projects:||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.wheel {
    border: 2px solid black;
    border-radius: 50%;
    margin-left: 40%;
    position: absolute;
    height: 55vw;
    width: 55vw;
    max-width: 500px;
    max-height: 500px;
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .line {
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 0%;
  }
  
  .line:nth-of-type(2) {
    transform: rotate(60deg);
  }
  .line:nth-of-type(3) {
    transform: rotate(120deg);
  }
  .line:nth-of-type(4) {
    transform: rotate(180deg);
  }
  .line:nth-of-type(5) {
    transform: rotate(240deg);
  }
  .line:nth-of-type(6) {
    transform: rotate(300deg);
  }
 

.pole {
    height: 900px;
    border: 6px solid black;
    background-color: black;
}

  .cabin {
    background-color: red;
    width: 20%;
    height: 20%;
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    transform-origin: 50% 0%;
    animation-name: cabin;
    animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
  }
  
  .cabin:nth-of-type(1) {
    right: -8.5%;
    top: 50%;
    background-color: green;
    z-index: 1;
  }
  .cabin:nth-of-type(2) {
    right: 17%;
    top: 93.5%;
  }
  .cabin:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
    background-color: green;
    z-index: 1;
  }
  .cabin:nth-of-type(4) {
    left: -8.5%;
    top: 50%;
  }
  .cabin:nth-of-type(5) {
    left: 17%;
    top: 7%;
    background-color: green;
    z-index: 1;
  }
  .cabin:nth-of-type(6) {
    right: 17%;
    top: 7%;
  }
  
  @keyframes wheel {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
  }
  
  @keyframes cabin {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(-360deg);
     }
  }

#santaImage {
    height: 110%;
    position: absolute;
    top: -74px;
    left: -8px;
    z-index: -1;
}

#penguinImage {
    height: 90%;
    position: absolute;
    top: -80px;
    left: 15px;
    z-index: -3;
}

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
  }
  
  .body-background {
    background-image: url(./snow.gif);
    width: 1000px;
    height: 740px;
    margin: auto;
  }
  
  
  .penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    top: 50%;
    transition: transform 1s ease-in-out 0ms;
  }
  
  .penguin * {
    position: absolute;
  }
  
  .penguin:hover {
    transform: scale(1.5);
    cursor: not-allowed;
  }
  
  .penguin-head {
    width: 50%;
    height: 45%;
    background: white;
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
  }
  
  .face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
  }
  
  .face.left {
    left: 5%;
  }
  
  .face.right {
    right: 5%;
  }
  
  .mouth {
    width: 20%;
    height: 10%;
    background-color: black;
    top: 70%;
    left: 45%;
    border-radius: 70% 70% 100% 100%;
    z-index: 6;
  }
  
  .eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 40%;
    border-radius: 50%;
  }
  
  .eye.left {
    left: 25%;
  }
  
  .eye.right {
    right: 25%;
  }
  
  .eye-lid {
    width: 150%;
    height: 150%;
    background-color: black;
    top: -30%;
    left: -23%;
    border-radius: 100%;
  }
  
  .blush {
    width: 10%;
    height: 10%;
    background-color: white;
    top: 45%;
    border-radius: 50%;
  }
  
  .blush.left {
    left: 25%;
  }
  
  .blush.right {
    right: 25%;
  }
  
  .nose {
    background-color: white 100%;
    border-radius: 50%;
    left: 43%;
    top: 55%;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 65px solid orange;
    animation: 15s linear infinite noseFall;
    
  } 
  
  .shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 135px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
  }
  
  .shirt div {
    font-weight:  initial;
    top: 22.5px;
    left: 12px;
    color: black;
  }

  .shirt p {
    color: black;
  }
  
  .penguin-body {
    width: 53%;
    height: 45%;
    background: white;
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
  }

  .penguin-body-bottom {
    width: 120%;
    height: 120%;
    background: white;
    border-radius: 80% 80% 100% 100%;
    top: 75%;
    left: -10%;
  }
  
  .penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: white;
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
  }
  
  .arm {
    width: 10%;
    height: 60%;
    background: brown;
    border-radius: 5% 50% 50% 50%;
    z-index: -1;
  }
  
  .arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left; 
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
  }
  
  .arm.right {
    top: 15%;
    right: -15%;
    transform: rotate(-45deg);
  }


  .arm.right.forearm {
    top: 45%;
    right: 225%;
    height: 100%;
    width: 80%;
    transform: rotate(270deg);
    border-radius: 50% 50% 50% 50%;
  }

  .arm.left.forearm {
    top: 95%;
    left: -15%;
    transform-origin: top left;
    height: 100%;
    width: 80%;
    transform: rotate(300deg);
    border-radius: 50% 50% 50% 50%;
    animation: none;
  } 

  .freeCodeCampLogo {
    width: 650%;
    top: 105%;
  }
  
  @keyframes wave {
    10% {
      transform: rotate(110deg) scaleX(-1);
    }
    20% {
      transform: rotate(130deg) scaleX(-1);
    }
    30% {
      transform: rotate(110deg) scaleX(-1);
    }
    40% {
      transform: rotate(130deg) scaleX(-1);
    }
  }
  

  @keyframes noseFall {
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(30deg);
    }
  }

  #piano {
    background: linear-gradient(200deg, rgb(255,0,0), rgba(255,0,0,0) 25%),
    linear-gradient(142deg, rgb(0,255,0), rgba(0,255,0,0) 90%),
    linear-gradient(300deg, rgb(0,0,255), rgba(0,0,255,0) 85%);
    width: 992px;
    height: 290px;
    margin: 80px auto;
    padding: 90px 20px 0 20px;
    position: relative;
    border-radius: 10px;
    box-sizing: border-box;
  }
  
  .keys {
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
  }
  
  .key {
    background-color: #ffffff;
    position: relative;
    width: 41px;
    height: 175px;
    margin: 2px;
    float: left;
    border-radius: 0 0 3px 3px;
  }
  
  .key.black--key::after {
    background-color: #1d1e22;
    content: "";
    position: absolute;
    left: -18px;
    width: 32px;
    height: 100px;
    border-radius: 0 0 3px 3px;
  }
  
  .logo {
    width: 200px;
    position: absolute;
    top: 23px;
  }
  
  @media (max-width: 768px) {
    #piano {
      width: 358px;
    }
  
    .keys {
      width: 318px;
    }
  
    .logo {
      width: 150px;
    }
  }
  
  @media (max-width: 1199px) and (min-width: 769px) {
  
  }


  
  .header {
    text-align: center;
    text-transform: uppercase;
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
  }
  
  .gallery {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
  }
  
  .gallery img {
    width: 100%;
    max-width: 550px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .gallery::after {
    content: "";
    width: 350px;
  }



/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||NOTES:||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*
------------CSS Rule Structure-------------


SELECTOR
 _|_
|   |
  p {
    font-family: Arial;
    color: rgb(15,15,15); 
    }
    |____||______________|
      |           |
  Property      Value
    |_____________________|
              |
         DECLARATION




UNIVERSAL Selector:    * {}
TYPE Selector:         h1, h2, h3 {}
CLASS slector:         .note {}
ID selector:           #introduction {}


CHILD selector:             li>a {}
DESCENDANT selector:        p a {}
ADJACENT SIBLING selector:  h1+p {}
GENERAL SIBLING selector:   h1~p {}

CSS Rules Cascade: 

* {                    <------- targets all elements on the page

}

i {
    color:green
}

i {
    color: red         <-------since this comes after it becomes the rule eventhough a rule precedes this one for the same element
}

b {
    color: pink
}

p b {
    color: blue !important;      <--------since this is declaration is marked important it will take precedent over the succeeding rule
}

p b {
    color: violet;
}

Attribute Selectors:
                                                                              ie..... <p value="animal"><p>
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|__(SELECTOR)__|__(Meaning)____|_____(Example)____|________________________________________Explanation__________________________________________________________________|
|EXISTENCE     |      []       |    p[animal]     | Targets any <p> element with an attribute called animal                                                             |
|EQUALITY      |      [=]      | p[animal="dog    | Targets any <p> element with an attribute called animal with value of dog                                           |
|SPACE         |      [~=]     | p[animal~="dog"] | Targets any <p> element with an attribute called animal with a list of space-separated words one of which being dog |
|PREFIX        |      [^=]     | p[attr^"d"]      | Targets any <p> element with an attribute whose value begins with the letter "d"                                    |
|SUBSTRING     |      [*=]     | p[attr*"do"]     | Targets any <p> element with an attribute whose value contains the letters "do"                                     |
|SUFFIX        |      [$=]     | p[attr$"g"]      | Targets any <p> element with an attribute whose value ends with the letter "g"                                      |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||


Positioning of Elements:  

Normal Flow - 

Relative - move element from normal flow by specified measurement ie... (x)pixels from original placement by top, bottom, left, right directions

Absolute - other surrounding elements ignore the space this element normally is placed in

Fixed - 

Floating - 

          

Grids help users predict where to find information and create continuity between pages (common one is 960 pixel grid)
these grids create vertical columns to appropriately size element boxes usually dimensions are in increments of ten,
example in book shows 12 vertical columns with 60 pixel width, 20 pixel margin between column and 10 pixel margin on right and left side of page

_|_________________________________________________960px - 1000px____________________________________________________|_      ___
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |  570px - 600px
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 |                                                                                                                   |        |
 | __________________________________________________________________________________________________________________|       _|_
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
 |                                                                                                                   |
___________________________________________________________________________


CSS frameworks - provides code for layout grids, styling forms, creating printer-friendly versions of pages.
(disadvantage to frameworks - class names are usually specifically named for controlling the presentation of the page, and these frameworks usually have more code than you actually need)


Multiple CSS stylesheets - useful for organizing certain elements ie... modular (forms stylesheet, tables stylesheet, font stylesheet) 

git remote push test on db desktop

git push to remote repository from db laptop

HTML NOTES:

Multiple Identifiers (ie... class and classes) with inheritance:

HTML class IN HTML=   <p class="className">a unique paragraph with class attribute</p>
HTML class IN CSS =   .className

HTML classes IN HTML=   <p class="className paragraph-1"> paragraph-1 is a child of the className paragraph class</p>
HTML classes IN CSS =   .className.paragraph-1 {}

Always use fallback fonts

You can use pt instead of px for "printer-friendly" versions of pages

*/