html{
  background-color: white;
  margin: 10px;
  min-width: 500px;
  min-height: 500px;
}

#submitBtn{
  display: none;
}

/* style sidebar */
.sidebar {
  height: 100%;
  width: 140px;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: #79FDAE;
}   

#welcome-page img{
  max-width: 100px;
}

/* style form */
#regForm {
  height: 100%;
  width: 100%;
  position: relative;
  top: -15px;
  left: 140px;
  object-position: left;
  padding: 20px;
  padding-right: 140px;
  padding-top: 16px;
  padding-left: 0px;
  background-color: white;
}
  
  /* Style the input fields */
  input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    border: 1px solid #aaaaaa;
  }
  
  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    background-color: #ffdddd;
  }

  /* Style the textarea fields */
  textarea {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    border: 1px solid #aaaaaa;
    resize: none;
  }
  
  /* Mark input boxes that gets an error on validation: */
  textarea.invalid {
    background-color: #ffdddd;
  }
  
  /* Hide all steps by default: */
  .tab {
    display: none;
    padding: 10px;
  }
  
  /* indicate the steps of the form: */
  .step {
    border: none;
    display: inline-block;
    color: #1e1e1e;
    opacity: 0.25;
  }
  
  /* Mark the active step: */
  .step.active {
    text-decoration:underline;
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    color: #1e1e1e;
    opacity: 0.75;
  }

  /* placement buttons */
  .button-footer{
  overflow: auto;
  position: fixed;
	width: 100%;
  left: 0;
	height: auto;
  bottom: 0;
	padding: 5px 12px;
	background-color: #1e1e1e;
  }

  .button-footer button{
    float: right;
  }

  /* radio buttons styling */
  .radio-position {
    line-height: 1.6em;
    display: grid;
    grid-template-columns: 1em auto;
    grid-template-rows: auto 2em;
    gap: 1em;
    padding: 20px;
  }

  input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 0.5em;
  height: 0.5em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  }

  input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
  }
  
  input[type="radio"]:checked::before {
    transform: scale(1);
  }

  /* styling preferences */
  #pref{
    height: 200px;
    line-height:200px;
  }

  /* styling file upload inputs for CV and motivation */
  input[type=file] {
    width: 100%;
    color: #aaa;
    padding: 5px;
    background: #fff;
    border: 1px solid #aaa;
  }

  input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #1e1e1e;
    padding: 10px 15px;
    color: #fff;
    cursor: pointer;
  }
  
  input[type=file]::file-selector-button:hover {
    text-decoration: underline;
  }

  #file-label{
    margin-bottom: 0;
  }

  /* positioning loading GIF */
  #loading{
    width: 100%;
    left: -160px;
    height: auto;
    object-fit: scale-down;
  }

  /* styling mail deliverd*/
  #mailsend{
    text-align: center;
    margin: -10px;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }

  #mailsend div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }