:root {
     --dk-color:white; /*idk??? text color*/
     --mid-color:#E1E1E4; /*heading background color */
     --text-color:#f2f2ed; /*big text color */
     --lt-color:#161618; /*background color */
     --dkest-color:#767c91; /*border outline color */
     --accent:#d1cb9b; /*links color */
     --accent-deep:#cfbb59; /*visited links color */
     --image-transparent:white; /*give transparent artwork a background color */
}

.line {
     border-top: 1px solid var(--dkest-color);
     width:95%;
}

.thumbnail {
    width:auto;
    height:250px;
    margin: 3px;
    background-color:gray
}
.landscapevideo{
    height:315px;
    width:560px;
    padding:5px;
}
.portraitvideo{
    height:560px;
    width:315px;
    padding:5px;
}
.pswp-gallery{
    margin-top:10px;
    margin-bottom:10px;
}
.pswp img {
    background-color:gray
}

.description {
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
}


      .pswp-gallery__item {
        margin: 0 4px 4px 0;
      }
      .pswp-gallery__item img {
        display: block;
      }
      .pswp-gallery {
        max-width: 100%;
        padding: 0 0px 0px;
 /*       background: #eee; */
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
      .pswp__dynamic-caption {
        color: #fff;
        width: 100%;
        font-size: 15px;
      }
      .pswp__dynamic-caption a {
        color: #fff;
        text-decoration: underline;
      }

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family:Verdana;
     font-size:15px;
     background-color:var(--lt-color);
     color:#e8e6dc;
}
scroll {
    padding:0px;
}
/*
iframe {
  display: block;
  width: 100%;
  height: 100%;
  border:0;
}
*/

 #left-sidebar {
     width:20%;
     min-height:80vh;
     background-color:var(--lt-color);
     border-right: 2px solid var(--dkest-color);
     border-radius: 2px;
     margin-right:-2px;
}

.sidebar-subitems {
    list-style-type: none;
    margin-top:0px;
    margin-bottom:7px;
    padding-left:7px;
}


/*a:link { 
     text-decoration: none; 
} */

a:visited {
  color:var(--accent-deep)  ;
}

a:hover { 
     color:var(--text-color);
     transition:0.2s all linear;
}

 body a {
     color:var(--accent);
     font-weight:bold;
     text-decoration: none; 
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     width:100%;
     margin:0 auto;
     min-height: 80%;
     background-color:var(--lt-color);
}
 h1, h2, h3, h4, h5, h6 {
     color:var(--text-color);
     margin-bottom:5px;
     margin-top:10px;
}

 #header {
     height:auto;
     margin:0 auto;
     background-color:var(--lt-color);
     padding-top:5px;
}
 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     margin:0px;
     padding:0px;
}
 .navbar {
     background-color:var(--lt-color);
     width:100%;
    
     padding-bottom:5px;
     text-align:center;
}
 .title {
     font-size:35px;
     text-align:center;
     color:var(--text-color);
     margin:5px;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--lt-color);
     color:var(--text-color);
     font-size:25px;

}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     width:100%;
}

 .content {
     padding:10px;
     padding-top:0px;
}
 .main-content {

     width:1500px;
     height:auto;
     margin:auto;
}
 p {
     padding:2px;
     padding-left:5px;
     margin:0px;
}
 p a {
/*     color:var(--accent); */
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:var(--accent);
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:14px;
     margin-right:20px;
     margin-left:20px;
}
 .navbar a:hover{ /*hover for the navbar BIG TEXT*/
     color:var(--text-color);
     transition:0.2s all linear;
}
.navbar a:visited {
  color:var(--accent-deep);
}
 .navbar li > ul {
     background:#313136;
     display:none;
     position:absolute;
     margin-left:0;
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
     margin:0px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin:0;
     left: 50% !important;
     right: auto !important;
     transform: translate(-50%, 0) !important;
     z-index:10;

}
 ul.subitems li a {
     padding:5px;
     display:block;     
     width:200px;
     border-top: 2px solid var(--lt-color);
}
 ul.subitems li a:hover{ /*hover for the SUBITEMS ON NAVBAR*/
     background:#45454a;
     color:var(--text-color);
     transition:0.2s all linear;
}
 ul.sidebar-subitems li a:hover{ 
     color:var(--text-color);
     transition:0.2s all linear;
}
 #footer {
     margin: auto;
     width: 100%;
     text-align:center;
     padding-top:5px;
     padding-bottom:5px;
}
 #footer p {
     display:block;

     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}

 @media only screen and (max-width: 1399px) {
     #left-sidebar {
         visibility: hidden;
         display: none;
    }
     .main-content {
         order:1;
         width:100%;
    }
     .navbar a {
         padding-bottom:10px;
    }
     .thumbnail {
     width:90vw;
     height:auto;
     margin: 3px;
    }
     .landscapevideo{
    height:315px;
    width:560px;
     display: block;
     margin: 0 auto;
}
     .mobilehide {
         visibility: hidden;
         display: none;
     }
}

 @media only screen and (max-width: 700px) {
     .landscapevideo{
     height:180px;
     width:320px;
     display: block;
     margin: 0 auto;
}

}