style.css

/* Browser Resets */

* { margin:0; padding:0; box-sizing:border-box; list-style: none; text-decoration: none; border:0; }
div, body, main, header, nav, section, aside, article, footer, form, label, hgroup, details, figure, 
figcaption, summary, dt, ul, li, ol { display: block; float: left; }
html { width: 100vw; height: 100vh; font-size: 62.5%; scroll-behavior: smooth; line-height: 1.5em; }  
body { overflow-x: hidden; }  body, main, header, section, img, form,input,textarea { width: 100%; }
h1 { font-size: 150%; line-height: 1.5em; }              h2 { font-size: 140%; line-height: 1.5em; }
h3 { font-size: 130%; line-height: 1.5em; }          h4,p,a { font-size: 120%; line-height: 1.5em; }
h5 { font-size: 110%; line-height: 1.5em; }               h6 { font-size:100%; line-height: 1.5em; }
select,option{-moz-appearance:none;-webkit-appearance:none;}textarea,button,input,input[type="text"],
input [ type="button" ],  input [ type="submit" ],  input [ type="search" ],  input [ type="email" ],
input [ type="password" ], input [ type="checkbox" ] { -webkit-appearance: none; }
input, button, textarea, pre { font-family: inherit; font-size: inherit; } textarea { resize:none; }


/* Custom Elements */

.ctxt { text-align: center; }  .rtxt{ text-align: right; }

.flex { display: flex; }
.fcnt { justify-content: center; }

.col{ width:100%; }  .c40 { width: 40%; }  .c50 { width: 50%; }  .c70 { width: 70%; }
.cnt { float:none; margin-left:auto; margin-right:auto; }
.center { margin-left:auto; margin-right:auto; }
.right { float:right; right:0; }

.p1m { padding: 1em; }
.pt1m { padding-top: 1em; } .pb1m { padding-bottom: 1em; }
.ptb1m { padding-top: 1em; padding-bottom: 1em; }
.pl1m { padding-left: 1em; } .pr1m { padding-right: 1em; }
.plr1m { padding-left: 1em; padding-right: 1em; }
.pt5 { padding-top: 5vh; }
.plr5 { padding-left:1vw; padding-right:1vw; }     /* Effected by Media Query */
.pt10 { padding-top: 10vh; }
.pt20 { padding-top: 20vh; }
.pt30 { padding-top: 30vh; }

.mlr1m { margin-left: 1em; margin-right: 1em; }
.mt10 { margin-top: 10vh; }
.mtb10 { margin-top: 10vh; margin-bottom: 10vh; }


/* Template */

html{ background-color:rgb(95,95,95); }
body{ color:rgb(240,240,240); background-color:rgb(95,95,95); font-family:sans-serif; overflow-x:hidden; }
.home .bgimg { background-image:url("images/connected.jpg"); background-size: cover; min-width: 100%; min-height: 140%;
  background-position-x: left; background-position-y: top; }
.home .bgimg2 { background-image:url("images/code-img.PNG"); background-size: cover;  min-width: 100%; min-height: calc(100vh - 3.8em); }
h1, h2{ width:100%; }
h1,h2,h3,h4,h5,h6{ font-family:cursive; text-shadow: 0px 0px 1px rgb(1,1,1), 0px 1px 5px rgb(1,1,1), 0px 2px 10px rgb(1,1,1); }
::selection{ background-color:rgb(60,60,60); color:white; }
section {position: relative; z-index: 1;}


/* Header/Nav/Links */

header { position: fixed; height: 4em; z-index: 1000; box-shadow: 0px 0px 10px 4px rgba(1,1,1,.9); }
.mypic { position: absolute; width: 5em; height: 5em; margin: 1em; border-radius: 100%; overflow: hidden;
  box-shadow: 0px 0px 10px 4px rgba(1,1,1,.9);}
nav a { line-height: 1.5em; }
main { margin-top: 4em; }
li a { display: inline-block; color: rgb(180,230,255); text-align: center; padding: .92em 1.25em; }
.list ul li { width: 100%; display: block; float: left; line-height: 1.5em; list-style: circle; }
.atf { width: 100%; height: calc(100% - 4em); overflow: hidden; }
.atf, .content, .cta, .bgimg { min-height: calc(100vh - 4em); }
.content { background-color:rgb(95,95,95); }
.link { width: 4em; height: 4em; }
.link svg { height: 100%; width: 100%; padding: 1px; border-radius: .35em;
  background-color: rgb(240,240,240); }
.git svg { border-radius: 100%; }
.home .cta .c70 { border-radius: .25em; }


/* Image Slider W/Options & Description */

.slider { position: relative; width: 100%; overflow: hidden; }
.slide { display: none; height: 75vh; }
.slide img{ min-height:100%; min-width: 100%; object-fit:cover; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; 
  margin-top: -1em; color: rgb(180,230,255); font-weight: bold; font-size: 2em; user-select: none; }
.prev { left: 0; border-radius: 0 .12em .12em 0; }  .next { right: 0; }  .next { border-radius: .12em 0 0 .12em; }
.text { position: absolute; padding: .25em; bottom: 0; text-align: center; line-height: 1.5em; }
.slidenum { padding: .5em .75em; position: absolute; top: 0; border-radius: 0 0 .25em 0; }
.fade { -webkit-animation-name: fade; -webkit-animation-duration: .2s;
  animation-name: fade; animation-duration: .2s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }


/* Header Drop Down Menu */

.mainmenu { display: none; opacity:0; position: absolute; right: 0; overflow-y: auto; z-index: -1;
  min-width: calc(7.5em + 5vw); max-height: calc(100vh - 4em); background-color: rgb(60,60,60);
  box-shadow: -1px 1px 1px 0px rgba(1,1,1,.25), -5px 5px 5px 0px rgba(1,1,1,.5); }
.mainmenu a { display: block; padding: .5em 1.25em .5em .75em; text-align: left; }
.mainmenu a:hover {background-color: rgb(70,70,70); }


/***   Parallax   ***/

#paraBgImg, #parah1 { position: fixed; top:0; }

/***   Condensed Styles   ***/

/* Text Shadows */

li a, .text, .prev, .next {
  text-shadow: 0px 0px 2px black;}


  /* Transitions */

  a, .mainmenu, .links svg {
    transition: 200ms ease-out; }
  #paraBgImg, #parah1 {
    transition: 0ms; }


  /* Hover, Focus & Active Effects */

  a:hover, a:focus {
    color: rgb(120,230,255); }
  a:focus {
    outline: none; box-shadow: inset 0px 0px 0px 1px rgba(1,1,1,.25); background-color: rgb(70,70,70); }
  li a:hover, .prev:hover, .next:hover, a:hover .st0 {
    background-color: rgb(70,70,70); color: rgb(120,230,255); fill: rgb(120,230,255); }
  .link a:hover svg {
    box-shadow: 0px 0px 10px 4px rgba(1,1,1,.5); transform: scale(1.03); -webkit-transform: scale(1.03); }
  .active {
    color: rgb(120,230,255); background-color: rgb(70,70,70);
    box-shadow: inset 0px 0px 0px 1px rgba(1,1,1,.25); pointer-events: none; }


  /* Widths */

  footer, .list ul, .slide {
    width: 100%; }


  /* Backgrounds */

  .greybg {
    background-color: rgba(95,95,95,.95); }
  .text {
    background-color: rgba(60,60,60,.9); }
  header, footer, .slidenum {
	  background-color: rgb(40,40,40);
	  background-image: linear-gradient(to bottom right, rgb(10,20,30), rgb(70,70,70)); }


  /* Border Radius */

  .slider {
    border-radius: .25em; }


  /* Borders */

  .content, .slider, footer, .home .cta .c70 {
    border: 1px solid rgba(1,1,1,.25); }


/* Custom Template Elements */

.c70mw { min-width:70%; max-width:calc(100% - 1em); }
.show { display:block; opacity:1; }


/* Media Queries */

@media screen and (min-width: 240px)                        /* VSMALL PHONES */ {
  body{font-size:1.4em;}
  li a { padding: .9em 1em; }
} @media screen and (min-width: 320px)                       /* SMALL PHONES */ {
  body{font-size:1.6em;} 
  .plr5 { padding-left: 5vw; padding-right: 5vw; }
} @media screen and (min-width: 481px)                      /* Average PHONE */ {
  .c30lg{width:90%;}
} @media screen and (min-width: 721px)                    /* HIGH RES PHONES */ {
  body{font-size:1.7em;}  li a { padding: .9em 1em; }
} @media screen and (min-width: 821px)                    /* PH, TABS & lAPS */ {
  body{font-size:1.8em;}
} @media screen and (min-width: 961px)                      /* HD Ready 720p */ {
  body{font-size:  2em;}  .c30lg{width:60%;}
} @media screen and (min-width: 1281px)                     /* Full HD 1080p */ {
  body{font-size:2.4em;}
} @media screen and (min-width: 1921px)                      /* QHD / Quad HD*/ {
  body{font-size:2.7em;}
} @media screen and (min-width: 2551px)                       /* Ultra HD 4K */ {
  body{font-size:  3em;}
} @media screen and (min-width: 3841px)                                /* 8K */ {
  body{font-size:4.0em;}
}