@media only screen and (width > 1000px) {
    html{
        font-size: 20px;
    }
    body{
        background-color: #1b2e39;
        color: #feffff;
        letter-spacing: .75px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    
    @font-face{
        font-family: Ailerons;
        src: url('Ailerons-Typeface.otf');
    }

    /* ------------------------------------------------ Banner ------------------------------------------------ */
    
    h1{
        position: sticky;
        top: 0;
        margin-top: 0;
        font-family: Ailerons;
        font-size: 3rem;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 25px;
        background: #246f9a;
        z-index: 5;
    }
    .hide-h1{
        transform: translateY(calc(-1.5*var(--h1-height)));
    }
    
    /* -------------------------------------------- Intro --------------------------------------------------------- */
    #header{
        font-size: .75rem;
        width: 50%;
        margin: auto;
        margin-bottom: 5px;
        padding: 5px;
        padding-left: 25px;
        border-left: solid 5px #EAEAEA;
    }
    
    .info{
        text-align: center;
        color: #60a8d2;
    }

    ::-webkit-details-marker { display:none; 
    }
    details{
        width: 90%;
        margin: auto;
    }
    details>p{
        width: 80%;
        margin: auto;
        margin-top: 10px;
    }
    details[open] > summary{
        border-bottom: 3px dashed #246f9a;
    }
    summary{
        font-size: 1.25rem;
        text-align: center;
        padding: 5px;
        list-style: none;
    }
    summary:hover{
        cursor: pointer;
        color: #60a8d2;
    }

    /* -------------------------------------------------- Code Section ------------------------------------------------- */
     #code{
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        width: 90%;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        overflow: auto;
    }

    select{
        z-index: 1;
    }
    
    #editor {
        width: 100%;
        height: 400px;
    }
    
    #results{
        position: relative;
        width: 75%;
        margin: auto;
        margin-bottom: 25px;
    }
    
    #output{
        background-color: #feffff;
        color: #232323;
        padding: 15px;
        margin-top: 5px;
        position: relative;
        height: 100px;
        border-radius: 2.5px;
        overflow: auto;
    }
    
    button{
        border-style: none;
        font-size: 1rem;
        width: 100%;
        color: #feffff;
        letter-spacing: .5px;
        height: 1.5rem;
        background-color: #246f9a;
        border-radius: 2.5px;
        padding: 6px;
    }
    button:hover{
        background-color: #1b2e39;
        color: #60a8d2;
        cursor: pointer;
    }

    input[type='button']:hover, input[type='file']:hover{
        cursor: pointer;
    }
    input::file-selector-button:hover{
        cursor: pointer;
    }
    .file-management{
        display: flex;
        align-items: center;
        margin-top: 2px;
    }
    
    .dot-flashing {
        position: relative;
        margin: auto;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite linear alternate;
        animation-delay: 0.5s;
      }
      .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
      }
      .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 0s;
      }
      .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 1s;
      }
      
      @keyframes dot-flashing {
        0% {
          background-color: #feffff;
        }
        50%, 100% {
          background-color: rgba(225, 225, 225, 0.2);
        }
      }

      .red{
        position: relative;
        border: solid 2px red;
        animation: shake .25s forwards;
      }
      .red::after{
        content: 'Invalid character(s)';
        position: absolute;
        right: 0;
        left: 0;
        bottom: -50px;
        height: 100px;
        width: 100px;
        background: white;
        z-index: 10;
      }

      @keyframes shake {
        0%{
            transform: translateX(0);
        }25%{
            transform: translateX(-5px);
        }50%{
            transform: translateX(5px);
        }75%{
            transform: translateX(-5px);
        }
        100%{
            transform: translateX(0px);
        }
        
      }
}








@media only screen and (max-device-width: 1000px),(width < 1000px){
    html{
        font-size: 17.5px;
    }
    body{
        --h1-height: 60px;
        padding-top: var(--h1-height);
        background-color: #1b2e39;
        color: #feffff;
        letter-spacing: .75px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        margin: 0;
    }
    
    @font-face{
        font-family: Ailerons;
        src: url('Ailerons-Typeface.otf');
    }

    /* ------------------------------------------------ Banner ------------------------------------------------ */
    
    h1{
        height: var(--h1-height);
        letter-spacing: 0px;
        position: fixed;
        top: 0;
        width: 100%;
        margin-top: 0;
        font-family: Ailerons;
        font-size: 2.5rem;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 25px;
        background: #246f9a;
        z-index: 5;
        transition: transform .25s;
    }

    .hide-h1{
        transform: translateY(calc(-1.5*var(--h1-height)));
    }
    
    /* -------------------------------------------- Intro --------------------------------------------------------- */
    #header{
        font-size: .75rem;
        width: 75%;
        margin: auto;
        margin-top: 25px;
        margin-bottom: 5px;
        padding: 5px;
        padding-left: 25px;
        border-left: solid 5px #EAEAEA;
    }
    
    .info{
        text-align: center;
        color: #60a8d2;
    }

    ::-webkit-details-marker { display:none; 
    }
    details{
        width: 90%;
        margin: auto;
    }
    details>p{
        width: 80%;
        margin: auto;
        margin-top: 10px;
    }
    details[open] > summary{
        border-bottom: 3px dashed #246f9a;
    }
    summary{
        font-size: 1.25rem;
        text-align: center;
        padding: 5px;
        list-style: none;
    }
    summary:hover{
        cursor: pointer;
        color: #60a8d2;
    }

    /* -------------------------------------------------- Code Section ------------------------------------------------- */
     #code{
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        width: 95%;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        overflow: auto;
    }

    select{
        z-index: 1;
    }
    
    #editor {
        width: 100%;
        height: 400px;
    }
    
    #results{
        position: relative;
        width: 90%;
        margin: auto;
        margin-bottom: 25px;
    }
    
    #output{
        background-color: #feffff;
        color: #232323;
        padding: 15px;
        margin-top: 5px;
        position: relative;
        height: 100px;
        border-radius: 2.5px;
        overflow: auto;
    }
    
    button{
        border-style: none;
        font-size: 1rem;
        width: 100%;
        color: #feffff;
        letter-spacing: .5px;
        height: 1.5rem;
        background-color: #246f9a;
        border-radius: 2.5px;
        padding: 6px;
    }
    button:hover{
        background-color: #1b2e39;
        color: #60a8d2;
        cursor: pointer;
    }

    input[type='button']:hover, input[type='file']:hover{
        cursor: pointer;
    }
    input::file-selector-button:hover{
        cursor: pointer;
    }
    .file-management{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 2px;
    }
    
    .dot-flashing {
        position: relative;
        margin: auto;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite linear alternate;
        animation-delay: 0.5s;
      }
      .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
      }
      .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 0s;
      }
      .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #feffff;
        color: #feffff;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 1s;
      }
      
      @keyframes dot-flashing {
        0% {
          background-color: #feffff;
        }
        50%, 100% {
          background-color: rgba(225, 225, 225, 0.2);
        }
      }

      .red{
        position: relative;
        border: solid 2px red;
        animation: shake .25s forwards;
      }
      .red::after{
        content: 'Invalid character(s)';
        position: absolute;
        right: 0;
        left: 0;
        bottom: -50px;
        height: 100px;
        width: 100px;
        background: white;
        z-index: 10;
      }

      @keyframes shake {
        0%{
            transform: translateX(0);
        }25%{
            transform: translateX(-5px);
        }50%{
            transform: translateX(5px);
        }75%{
            transform: translateX(-5px);
        }
        100%{
            transform: translateX(0px);
        }
        
      }
}