/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
}
 ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: inside;  /* Optional: Makes the bullets/numbers align with the list content */
}
header, footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: sticky;
    top:0;
    z-index:10;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.container {
    display: flex;
    min-height: calc(100vh - 100px);
    height: calc(100% - 100px);
    align-items: stretch;
}

.sidebar {
    width: 250px;
    /*background: #f4f4f4;*/
    background:#525252;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px;
    overflow-y: auto;
    transition: left 0.3s;
    padding-bottom:50px;
}

.sidebar ul {
    list-style: none;
    
}

.sidebar ul li {
    /* margin: 10px 0; */
}

.sidebar ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.3s;
}

.sidebar ul li a:hover {
   /* background: #ddd;*/
   background : #e9e8e8;
   color:#000;
}

.content {
    flex: 1;
    padding: 20px;
    padding-bottom: 100px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.intro, .featured-tutorials, .categories, .call-to-action {
    margin-bottom: 20px;
}

.tutorial-grid {
    display: flex;
    flex-direction:row;
    flex-wrap : wrap;
    align-content:flex-start;
    gap: 30px;

}

.tutorial-grid article {
    flex: 300px;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align:center;
}

.tutorial-grid article h3 {
    margin-bottom: 10px;
}

.tutorial-grid article p {
    margin-bottom: 10px;
}

.tutorial-grid article a {
    color: #007BFF;
    text-decoration: none;
}

.categories ul {
    list-style: none;
    display: flex;
    gap: 10px;
}

.categories ul li {
    flex: 1;
}

.categories ul li a {
    display: block;
    padding: 10px;
    background: #6e6e6e;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s;
}

.categories ul li a:hover {
    background: #0056b3;
}

.call-to-action {
    text-align: center;
    background: #f4f4f4;
    color: #000;
    padding: 20px;
    border-radius: 8px;
}

.call-to-action .btn {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    color: #007BFF;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.call-to-action .btn:hover {
    background: #ddd;
}

/* Responsive styles */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: absolute;
        top: 70px;
        left: -100%;
        transition: left 0.3s;
        z-index:10;
    }

    .sidebar ul li {
        text-align: center;
    }

    .sidebar.active {
        left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .tutorial-grid {
        flex-direction: column;
    }
}


/* my styles */
a.logolink:link,a.logolink:visited,a.logolink:active,a.logolink:hover{
    text-decoration:none;
    color:white;
}


h1.logoh1 {
    font-size: 36px; /* Default font size for larger screens */
}

@media(max-width: 768px) {
    h1.logoh1 {
        font-size: 24px !important; /* Reduced font size for screens 768px or smaller (typically mobile devices) */
    }
}



.codepic{
    max-width:100%;
    border:1px solid lightgray;
    margin-top:10px;
}
p{
    margin-bottom:15px;
}
.sidebar ul li a.active {
    background: #ddd;
    background-color: #ffc107;
      color: #000;
}
.categories ul li a.active {
    background: #0056b3;
    
}
.code-container {
    position: relative;
    /*background-color: #282a36;*/
    color: #f8f8f2;
    /*padding: 10px;*/
    border-radius: 5px;
    overflow-x: auto;
    /*margin: 20px 0px;*/
    max-width:100%;
  }
  
  .copy-button {
    position: absolute;
    top: 15px;
    right: 10px;
    padding: 5px 10px;
    background-color: #6272a4;
    color: #f8f8f2;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin-top:5px;
  }
  h2.h23{
      margin-bottom:15px;
  }
  main h3{
      margin-top:25px;
  }
  main h4{
      margin-top:25px;
  }
  ul{
      margin-left:20px;
  }
  ul.left-links{
      margin-left:0px;
      margin-bottom:20px;
  }
  a.black-button:link,a.black-button:visited,a.black-button:active,a.black-button:hover {
      display: inline-block;
      background-color: #000; /* Black background */
      color: #fff; /* White text */
      text-decoration: none; /* Remove underline */
      padding: 10px 20px; /* Padding around the text */
      font-size: 1em; /* Font size */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    }

    .black-button:hover {
      background-color: #333; /* Dark gray background on hover */
    }

    .black-button:active {
      background-color: #555; /* Slightly lighter gray when the link is pressed */
    }
    .nav-links {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
    }
    
    .nav-links.top-nav{
        border-bottom:1px solid lightgray;
        padding-bottom:15px;
    }

    .nav-link {
      display: inline-block;
      padding: 10px 20px;
      background-color: #000;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      
    }
/* next prev */
    .nav-link:hover {
      background-color: #333;
    }

    .nav-link:active {
      background-color: #555;
    }
    .tut-video iframe{
        max-width:100%;
    }

 a.code-run-btn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    float:right;
}

a.code-run-btn:hover {
    background-color: #0056b3;
}   
    

    
    main ul li{
        margin:15px 0px;
    }

.egpic{
            margin:20px 0px;
            width:100%;
        }
  
  @media(max-width:768px){
    .tutorial-grid article {
        flex: auto;   
      }
  }