@font-face {
  font-family: productSansBold;
  src: url("./Product_Sans_Bold.ttf");
}
@font-face {
  font-family: productSans;
  src: url("./psr.ttf");
}
body {
    font-family: productSans;
    font-size: 24px;
}
html {
    height: 100%;
}
.parent {
    display: flex;
}
.intro {
    background-color: #ffffff;
    padding: 5px;
}
.button-group {
    margin-top: 15px;
    margin-left: 5px;
    display: flex;
    flex-direction: row;
}

.namishButton {
    background-color: #ff0077;
    color: white;
    outline: none;
    border: none;
    height: 60px;
    font-size: 20px;
    border-radius: 360px;
    width: 10em;
}
.namishButton:hover {
    background-color: #d30063;
    color: white;
    outline: none;
    border: none;
    height: 60px;
    font-size: 20px;
    border-radius: 360px;
    width: 10em;
}
.namishButton2 {
    color: #ff0077;
    background-color: transparent;
    outline: none;
    border: none;
    border-color: #ff0077;
    border-style: solid;
    border-width: 1px;
    height: 60px;
    font-size: 20px;
    border-radius: 360px;
    width: 10em;
    transition: 0.45s;
}
.namishButton2:hover {
    background-color: #ff0077;
    color: white;
    outline: none;
    border: none;
    height: 60px;
    font-size: 20px;
    border-radius: 360px;
    width: 10em;
    transition: 0.45s;
}
.text-50 {
    margin-left: 8px;
    font-size: 20px;
}
.text-50-desp {
    margin-left: 8px;
    font-size: 20px;
    color: #535353;
}
#resSdn {
width: 100%;
height: auto;
position: relative;
}
.features {
    outline: none;
    border: none;
    margin-top: 30px;
    border-color: #5e5e5e;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 10px;
    width: 25%;
}
.cont {
    display: flex;
    flex-direction: row;
}
.namishCode {
    background-color: #000000;
    font-weight: bold;
    font-size: 20px;
    margin-left: 8px;
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
    margin-right: 8px;
    border-radius: 5px;
    padding: 15px;
    color: white;
}
.keyword {
    color: #c8ff00;
    font-size: 20px;
}
.string {
    color: #00bbff;
    font-size: 20px;
}
.numbering {
    color: rgb(0, 229, 255);
    user-select: none;
}
.error {
    color: red;
}
.codeEditor {
    margin-left: 8px;
    width: 97.5%;
    padding: 15px;
    font-size: 20px;
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
    background-color: #000000;
    border-radius: 5px;
    color: white;
}
footer {
    background-color: #27282c;
}
.newNews {
    margin-left: 8px;
    margin-right: 8px;
    padding: 15px;
    color: white;
    border-radius: 5px;
    background-image: linear-gradient(to right, #ff0077 , yellow);
}
.namishButtonSg {
    background-color: #ff0077;
    color: white;
    outline: none;
    border: none;
    height: 55.5px;
    font-size: 19.5px;
    border-radius: 360px;
    width: 10em;
}
.controlPanel {
    bottom: 0;
    position: absolute;
    display: flex;}
    @media only screen and (max-width: 992px) {
        .cont {
            display: flex;
            flex-direction: column;
        }
        #openSource {
            width: 95%;
        }
        #biEnvironment {
            width: 95%;
        }
        #faster {
            width: 95%;
        }
        .namishButton {
            background-color: #ff0077;
            color: white;
            outline: none;
            border: none;
            height: 45px;
            font-size: 18px;
            border-radius: 360px;
            width: 8em;
            transition: 0.45s;
        }
        .namishButton:hover {
            background-color: #d30063;
            color: white;
            outline: none;
            border: none;
            height: 45px;
            font-size: 18px;
            border-radius: 360px;
            width: 8em;
            transition: 0.45s;
        }
        .namishButton2 {
            color: #ff0077;
            background-color: transparent;
            outline: none;
            border: none;
            border-color: #ff0077;
            border-style: solid;
            border-width: 1px;
            height: 45px;
            font-size: 18px;
            border-radius: 360px;
            width: 8em;
            transition: 0.45s;
        }
        .namishButton2:hover {
            color: rgb(255, 255, 255);
            background-color: #ff0077;
            outline: none;
            border: none;
            border-color: none;
            border-style: solid;
            border-width: 1px;
            height: 45px;
            font-size: 18px;
            border-radius: 360px;
            width: 8em;
            transition: 0.45s;
        }
        .button-group {
            margin-top: 15px;
            margin-left: 5px;
            display: flex;
            justify-content: space-between;
        }
      }
      .editor {
        height: 94.225%;
        width: 100%;
        border-radius: 0%;
        background-color: transparent;
      }

      .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
      }
      
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s
      }
      
      /* Modal Content */
      .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 100%;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s
      }
      
      /* The Close Button */
      .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      
      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
      
      .modal-header {
        padding: 2px 16px;
        background-color: #ff0077;
        color: white;
      }
      
      .modal-body {padding: 2px 16px;}
      
      .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
      }
      
      /* Add Animation */
      @-webkit-keyframes slideIn {
        from {bottom: -300px; opacity: 0} 
        to {bottom: 0; opacity: 1}
      }
      
      @keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
      }
      
      @-webkit-keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
      }
      
      @keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
      }

      .sidebar {
        margin: 0;
        padding: 0;
        width:calc(20% + 10px);
        background-color: #ffffff;
        position: fixed;
        color: black;
        border-right: black 1px solid;
        height: 100%;
        font-family: productSans;
        font-size: 19.5px;
        overflow: auto;
        transition: 0.45s;
      }
      
      .sidebar a {
        display: block;
        color: rgb(0, 0, 0);
        padding: 16px;
        margin-left: 8px;
        margin-right: 8px;
        text-decoration: none;
        margin-top: 10px;
        font-size: 20px;
        border-radius: 360px;
      }
       
      .sidebar a.active {
        background-color: #ff0077;
        color: white;
        transition: 0.45s;
      }
      
      .sidebar a:hover:not(.active) {
        transition: 0.45s;
        background-color: #555;
        color: white;
      }
      
      div.content {
        margin-left: 21%;
        padding: 1px 16px;
        height: 1000px;
      }
      
      @media screen and (max-width: 992px) {
        .sidebar {
            display: none;
          width: 100%;
          height: auto;
          position: relative;
        }
        .sidebar a {float: left;}
        div.content {margin-left: 0;}
      }
      
      @media screen and (max-width: 400px) {
        .sidebar a {
          text-align: center;
          float: none;
        }
      }
#langName {
    background-color: #ffffff;
    color: #000;
}
table {
  width: 100%;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 1px;
}
th {
  font-size: 22px;
}
tr {
  font-size: 20px;
  border-bottom: 1px solid #ddd;
}
video {
  width: 100%;
  height: auto;
}