/* teddave.net */

::selection {
  background-color: hsl(0, 100%, 75%);
  color: hsl(0, 0%, 100%);
  }

  *,
*::before,
*::after {
  box-sizing: border-box;
}

/* width */
::-webkit-scrollbar {
  width: 23px;
}

/* Track */

/* Handle */
::-webkit-scrollbar-thumb {
  background: #CBF0FB;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: hsl(195, 100%, 47%);
}

body{ 
  font-family: 'Raleway', sans-serif;
  background: hsl(0, 0%, 84%) url(chakra-7-50-2.png)  no-repeat 50% 2.3%;
  padding: 0px;
  margin:0px; line-height: 2rem;
  scroll-behavior: smooth;
  }

p { 
color: hsl(135, 3%, 24%);
font-size: 1.2rem;
font-weight: 400;
margin: 0;
padding: 0 12% 0 5%;
	}

h1{
   font-size: 3.6rem !important;
   padding: 80px 8% 50px 5%;
   margin: 0;
	 font-weight: 400;
   color: hsl(0, 100%, 25%);
	font-variant: small-caps;
  			 }


h2{
  font-size:1.4rem;
  padding:  12px 8% 0 5%;
  margin: 0px;
  font-weight: 600;
  color: hsl(0, 0%, 24%);
  line-height: 2.2rem;
}

h3{
  font-size: 1.3rem;
  padding: 12px 8% 0px 5%;
   margin: 0px;
   font-weight: 600;
   color:  hsl(0, 0%, 36%);	 }


h4{ font-size: 1.08rem;
  padding: 10px 8% 0px 12%;
  margin:0;
  font-weight: normal;
}

h5{ font-size: .8rem;
  padding: 0px 8% 16px 8%;
   margin: 0px;
  font-weight: 100;
  text-align: right;
  color: hsl(188, 24%, 27%);
}

h6{ font-size: 0.6rem;
  padding: 0px 30px 0px 0px;
  margin: 0px;
  color: hsl(0, 0%, 87%);
  padding:2px;}


@media all and (max-width : 600px) {
  h2 {font-size: 1.2rem;}
}


a:link {
text-decoration: none;
color: hsl(0, 0%, 13%);
border-bottom: 1px dashed hsl(0, 0%, 13%);
padding: 6px 3px;
}

a:visited {
	text-decoration: none;
	color: hsl(0, 0%, 13%);
	border-bottom: 1px dotted hsl(0, 0%, 13%);
	background:hsl(0, 0%, 100%);}

a:hover {
  color: #111;
  border-bottom: 2px solid hsl(12, 96%, 11%);
  background:hsl(0, 0%, 93%);}

a:active {
  text-decoration: none;
  color: hsl(12, 96%, 11%) !important;
  background:gold !important;
  opacity: 4;
  box-shadow: 0px 0px 60px hsla(0, 0%, 87%, 0.92);
}

a:focus {
  color: #201C1B !important;
  background: gold;
  border-bottom: 2px solid;
}


img{
border: 0px;
margin: 0px;
padding: 0;
max-width: 100%;
height: auto;
}

hr {
   height: 23px;
   background: hsl(0, 0%, 90%);
   border: 0;
   width: 84%;
   margin: 50px 8%;
   box-shadow: 12px 12px 120px hsl(0, 0%, 100%);
}

blockquote {
  border-left: 23px solid hsl(0, 0%, 73%);
  opacity: .6; 
  font-style:italic;
  }

blockquote::before {
  content: open-quote;
  font-size: 4rem;
  color: hsl(0, 0%, 80%);
    }


blockquote::after {
  content: close-quote;
  font-size: 4rem;
  color: hsl(0, 0%, 80%);
}



#gall::before {color: hsl(0, 100%, 50%);}

table {padding: 0 0% 0 7%;}

iframe {
  padding: 23px 0 0px 8%;
  border:0;}

/* unordered list */
ul{
  padding: 0 0 0 23px;
  margin: 0px 0 0 6%;
	list-style-type: circle;
}

ul li{
  list-style-type: disc;
   margin: 0px 0 0 6%;
   padding: 0px 0 0 23px;}

li{
  padding: 6px 12px 0px 0px !important;
	margin: 0px 0 0 23px !important;
  list-style-type:disc;
	font-weight: normal;
	}

#gall li {
 padding: 6px 12px 0px 5% !important;
	margin: 0px 0 0  6% !important;
  list-style-type:circle;
	font-weight: normal;
	color: #800;
}

#gall h2 {
	 padding: 6px 12px 0px 5% !important;
	 	 margin: 6px 12px 0px 0% !important;
}

.retire {background: pink;
padding: 5px 2px;
border-radius: 3px;
}


	.tom {color: hsl(194, 93%, 27%);
  background: hsl(0, 0%, 100%);
  margin: 5% 15% 0 15%;
  padding: 23px;border: 0px dashed hsl(0, 0%, 80%);
	border-radius: 4px;
  font-size: 1.2rem;
  text-align: center;}

	.fas, .far {
  padding: 0 0 0 0%;
  color: hsl(194, 93%, 27%); }

.quote {
  border-left: 23px solid hsl(0, 0%, 15%);
  padding: 2% 20% 2% 12%;
  margin: 1% 0 0 2.3%;}

.sml {
  font-variant:normal;
  padding: 2.3% 0 0 4%;
  letter-spacing: .7rem;
   font-weight: 400;
   font-size:.5em;
   }

.sml4{
font-size:.7rem;
letter-spacing: .1rem;
padding:  8px 6px 8px 6px;
color: hsl(0, 0%, 100%);
background: hsl(188, 24%, 27%);
margin: 0 8px 8px 0;}

.lge { font-size: 2rem;}

.most {color: hsl(12, 96%, 5%);}

.artist {color: hsl(51, 100%, 50%);}

.col1 {
  columns: 140px 3;
  padding: 0% 8% 2% 8%;
  column-gap: 100px;
  }

.col2 {
  columns: 100px 5;
}


@media only screen and (max-width: 1200px)
{.col1 {  columns: 100px 2;}

.col2 {  columns: 100px 3;}
}


@media only screen and (max-width: 600px)
{.col1 {  columns: 100px 1;}

.col2 {  columns: 100px 2;}
}


/* margin lefts / margin rights - to centre content */
#main, #foot, #top, nav, #site_content
{ margin-left: auto;
  margin-right: auto;
}

/* main container -------------------------------- */
#main
{width: 80%;
 height: auto;
background: hsl(0, 0%, 93%);
margin:0 10% 23px 10%; padding: 0 ;
  box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.4);
}

@media all and (min-width : 2001px) {
#main {width: 60%; margin: 0 20% 23px 20%;}
}

@media all and (max-width : 2000px) {
#main {width: 80%; margin: 0 10% 23px 10%;}
}

@media all and (max-width : 1999px) {
#main {width: 85%; margin: 0 7.5% 23px 7.5%;}
}


@media all and (max-width : 1599px) {
#main {width: 100%; margin: 0 0 23px 0;}
}

/* logo */
#top
{ width: 100%;
  height: auto; 
  background:  #1a1a1a ;  
  padding: 0%  0 4% 0;
    }
    
  #toplt {height: auto; padding:0; width: 100%; }

  #toprt {width: 0%; height: auto; padding:0;}

  @media all and (max-width : 800px) {
	  #toprt, #toplt {
      width: 100%;}
  }


 #top a:link, #top a:visited {	
  text-decoration: none;  
  color: hsl(0, 0%, 100%);
}

#top a:hover {	
  background-color:transparent;
  color: gold; 
  border-bottom: 0;

  transition: 2.3s;

  }


#top a:active {	
  text-decoration: none; 
 	background: gold !important;
	color: black !important;
   transition: 1.3s;
	}

#top h1 {
  font-size: 7rem !important;
  padding:10% 0 0% 4%;
  margin: 0px;
  font-weight: 400;
  color: hsl(0, 0%, 100%);
  color: white !important;
    -webkit-filter: grayscale(0%);
  letter-spacing: 0.05em;
  opacity: 0.8;
    }

  #top h1:hover {
   opacity: 1;
  }


#top h2 {
  padding: 50px 15% 12px 5%;
  letter-spacing: 0.1rem;
  margin:0;
  color: hsl(0, 0%, 87%);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.3rem;
}


#top h3 {
  padding: 4% 15% 0px 4.8%;
  letter-spacing: 1.2rem;
  margin:0;
  color: hsl(0, 0%, 87%);
  color: white;
  font-size: 1.8rem;
  font-weight: 100;
  }

    .b {
      color: #ff8080; padding: 12px 0px; }

    .r {
        color: #f00; padding: 12px 0px;  }

    .i {
      color: #ff0; padding: 12px 0;  }

      .x {
      color: #fc9; padding: 12px 0px;   }

    .t {
      color: tomato; padding: 12px 0px;   }

    .o {
      color: #800; padding: 12px 0px; }

    .n {
      color: #ff9; padding: 12px 0px;  }
      
      .d {
        color: #ff8000; padding: 12px 0px; }

      .g {
        color: #690; padding: 12px 0px; }

        .a {
          color: #360; padding: 12px 0px;  }
    
          .l {
            color: #090; padding: 12px 0px; }
      
        

/*
.a:hover, .b:hover, .c:hover, .d:hover, e:hover, f:hover, g:hover, h:hover, i:hover {
  transition: 3200ms;
  color: white;
  font-weight: 600;
}
*/

@media only screen and (max-width: 1200px)
{
  	#top h1 
    {font-size: 5rem; 
     line-height: .75em;
	 }

 }


  @media only screen and (max-width: 800px)
{
  #top h1 {
    font-size: 5rem !important;
     text-shadow: 0 0 0;
    padding: 90px 0px 0 23px; 
	  filter: grayscale(0%);
  line-height: .75em;
        }

  #top h2 {
    font-size: 1.4rem;
    padding: 30px 7% 12px 3%;
    }


    #top h3 {
      padding: 2% 15% 0px 5.5%;
      letter-spacing: 0.4rem;
      font-size: 1.08rem; 
      }


}


@media only screen and (max-width: 500px)
{
  #top h1 {
    font-size: 3.4rem !important;
    line-height: .6m;
    text-shadow: 0 0 0;
        }


}

  .c {
    color: #800000; 
    padding: 12px 23px 12px 0;  
    font-weight: 600; 
  }


#top ul{ 
  padding: 0 0 0 12px;	
  margin: 0px 0 0 4%;
	list-style-type: disc; 
  color: orangered; 
  font-size: .9rem;
}

/*
https://codepen.io/kevinpowell/pen/OJPPGwN - image in text

#top {
  background-image: url(../img/sunrise.jpg);
  background-size: cover;
  background-clip: text;
  color: transparent;

  /* other styling
  font-family: var(--ff-title);
  font-weight: var(--fw-title);
  text-transform: uppercase;
  font-size: calc(1rem + 1vw);
  line-height: .8;
  text-align: center;
  margin: 0;
}
*/


/* navigation menu */

#gall
{ width: 100%;
  height: auto;
  background: hsl(0, 0%, 93%) url(noise.png) repeat;
  padding:4px 0;
 }

@media only screen and (max-width: 480px){	
  #gall{ 
  height: auto; 
  border-bottom:0px; }
}

#gall img {width: 100%;}


/* main content */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
  background: hsl(0, 0%, 93%, 0.4) url(faint-grid.jpg)repeat;
  padding: 0;
}


/* sidebar */
#left
{
	float: left;
	width: 60%;
	height: auto;
	padding: 0%;
 	margin: 0px 0.5% 3px 1%;
	text-align: left;
}


#right
{ text-align: left;
  float: right;
  width: 34.5%;
  height:auto;
 	margin:0 1% 3px 1%;

 }


@media all and (max-width : 800px) {
	#left, #right {
    width: 100% !important;
    padding: 0;
    float:left;}

  #left img {width: 100%;
    margin: 0;
    height: auto;}
	}



#over {
  width: 100%;
  height: auto;
  background: #d3d3d3;
  float: left;
  margin: 0%;
  padding: 0;}


#explain {
  width: 100%;
  height: auto;
  background: white; }

#explain img {
  width: 100%;
  height: auto;}


/* footer */
#foot
{ height: auto ;
  width: 100%;
  margin:0 0;
  background: #201C1B;
  padding: 20px 0 0 0;
  border-bottom: 12px solid black;
 }


#foot a:link, #foot a:visited {
  text-decoration: none;
	color: gold;
  border: 0;
	padding: 2px 6px;}

#foot a:hover {
  background: transparent !important;
	color: white;
  padding: 2px 6px;
  border-bottom: 0;}

  #foot a:active {
    text-decoration: none;
    color: #350B01 !important;
    background:gold !important;
    box-shadow: 0px 0px 120px rgba(0, 0, 0, 1);
    padding: 8px 4px;
  }


#foot h1 {
	color: white;
    padding: 5% 0 4% 5%;}

#foot h2 {
   font-size: 1.6rem;
   letter-spacing: .2rem;
   padding: 8px 5% 0px 5%;
   margin: 0px;
   background: transparent;
    color: white;
   border: 0;
}

#foot h3 {
padding: 12px 23px 0 5%;
font-size:.9rem;
color: white;
letter-spacing: .05rem;
}

#foot h4 {
	color:#bbb;
	font-size: .85rem;
    padding: 8px 48px 0px 5%;
    font-weight: 600;
    letter-spacing: 0.05rem;
    line-height: 1.4rem;
	}

@media all and (max-width : 600px) {
	#foot h2 {
    font-size: 1.2rem;}
}

/* navigation */

.skip-nav-link {
position:absolute;
transform: translateY(-120%);
background: black;
border-radius: 0 0 0.25rem 0.25rem;
color: white !important;
padding: 0.5rem 1.5rem;
left: 2rem;
transition: transform .325s;
}

.skip-nav-link:focus {
  transform: trasnlateY(0);}



#nav-lt {
  width: 100%; 
  height: auto; 
  float: left; }

#nav-rt {
  width:0;
  height: auto;
  float: right;
  padding:0;
  text-align:right !important;  }


nav {
  margin: 0;
  background: #1a1a1a;
  border-bottom: 0px dotted #777;
  width: 99%;
  position: fixed;
  z-index: 23;
  height: 64px;
  padding:0 0 0 0%;
  margin: 0;}


@media all and (min-width :  1600px) {
nav {width: 85%;}
}

@media all and (min-width :  2001px) {
nav {width: 60%;}
}

/* code for menu-- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ --*/
.toggle, [id^=drop] { 
  display: none;}

/*nav:hover {background: #0792bc;  transition: 2s ease;}*/

nav a {
  display: block;  
  padding:12px 18px !important;
  color: #fff !important;
  border: 0 !important;
  text-decoration: none;
  font-size: 1.2rem; 
  letter-spacing: 0.08rem; 
  font-weight: 400 !important; 
  background: #201C1B ;
    /* here for height of menu itrems... line height */
}

nav a:hover {
padding: 12px 18px 60rem 18px!important; 
background: transparent !important; 
opacity: 1;
transition: 5s; 
box-shadow: 0px 0px 160px rgba(255, 150, 0, .92);}

nav a:active {  
  color: white !important;}

nav a:visited { 
  background: #201C1B;}

nav:after {
  content: " "; 
  display: table;  
  clear: both;
}