body, select, input {font-family: 'Inter', sans-serif;}
    body {line-height: 1;margin: 0 auto;display: flex;flex-direction: column;min-height: 100vh;max-width: 1200px;}
    i.material-icons{font-size:20px !important; vertical-align:sub;}
    #site-header{width:100%;text-align:left;padding: 10px 0;}
    #site-header a{text-decoration: none;} .site-title{text-align:left;display:flex;align-items:center;margin:0;} .site-icon{height:40px;margin-right: 15px;}
    #features{padding: 10px 20px;display: flex;justify-content: space-evenly;border-radius: 20px;font-family: 'Inter', sans-serif;} #features span .material-icons{color:#39ad00;}
    #ads{padding: 0 20%;}
    .container {width: 100%;margin:0 auto;flex-grow:1;display:flex;align-items:center;}
    #site-footer{margin: 0 auto;padding-top: 40px;}
    .flex-container {display: flex; flex-wrap: nowrap; flex-grow:1; align-items:flex-start; width:100%; justify-content: space-between;}
    .div_left{width:45%; margin-right:20px; display: flex; flex-direction: column;}
    .div_right{ flex-grow:1; max-width:50%;}
    .form-group {margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
    label {flex: 1;}
    select, input[type="text"] {flex: 1; padding: 10px; min-width: 55%; border: 2px solid #ccc; border-radius: 10px; -webkit-transition: 0.3s; transition: 0.3s; font-size: 0.9em; outline: none;}
    select:focus, input[type=text]:focus {border: 2px solid #0034e0 !important;}
    #recording_parameters{flex-grow:1; justify-content: space-around; display: flex; flex-direction: column;}
    .buttons {display: flex; justify-content: space-between; flex-wrap: wrap;}
    .buttons button {font-family: 'Inter', sans-serif; padding: 12px; font-size: 1em; font-weight: 700; border: none; border-radius: 10px; cursor: pointer;background-color: #0034e0; color: #fff; transition: background-color 0.3s;}
    .buttons button:hover {background-color: #002cbf;}
    .buttons .button-download{background-color:#39ad00;}
    .buttons .button-download:hover{background-color:#2e8a00;}
    .buttons .button-stop{background-color:#d40000;}
    .buttons .button-stop:hover{background-color:#a90000;}
    .buttons .button-pause{background-color:#ec8d00;}
    .buttons .button-pause:hover{background-color:#d27d00;}
    .buttons button:disabled {background-color: #ccc; cursor: not-allowed;}
    #status {text-align: center; margin: 20px 0; display:flex; justify-content: space-evenly; font-size: 1.5em;}
    #status span {margin: 0 10px; font-size: 1.4em;}
    #livePreview {text-align:center; position: relative; margin-top: 10px; }
    #preview {max-width: 600px; height: 375px; border-radius:10px; width: 100%; object-fit: contain; background: #000; }
    #recordedVideoContainer{ border-radius:10px; overflow:hidden; }
    #countdown {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 48px;color: #fff;background: rgba(0,0,0,0.7);padding: 20px 40px;border-radius: 8px;display: none;z-index: 10;}
    #recordingIndicator {position: absolute;top: 10px;left: 10px;width: 15px;height: 15px;border-radius: 50%;background: red;z-index: 10;opacity: 1;display: none;}
    
    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }
    #recordingIndicator.blinking {animation: blink 1s infinite;}
@media (max-width: 1240px) {
      body{max-width:80%;}
      .flex-container{flex-wrap:wrap !important;}
      .div_left, .div_right {flex-grow: 1;flex-basis:100%;margin:0;max-width:100%;}
      #preview{height:auto;}
      .buttons button{justify-content:center;margin: 5px;}
      #features{font-size: 0.8em;flex-wrap: wrap;}
    #ads{padding:10%;}
}
@media (max-width: 350px) {
    body{max-width:95%;}
    /*#ads{display:none;}*/
    #status{font-size:1em;}
    .site-title{font-size:1.2em;}
}