<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Use REM to make the sizing relative to root size*/
:root {
    background-color: whitesmoke;
    font-size: 62.5%;
  }
  * {
    box-sizing: border-box;
    /* height: auto; */
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
  }
  h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.4rem;
  color: black;
  /* box-shadow: 2px 3px 10px #cc6600; */
  margin-bottom: 10rem;
}

h1 &gt; span {
  font-size: 2.4rem;
  font-weight: 500;
}

h2 {
  font-size: 4.2rem;
  margin-bottom: 4rem;
  font-weight: 700;
}

h3 {
  font-size: 2.8rem;
  font-weight: 500;
}
h5 {
  font-size: 2.8rem;
  font-weight: 500;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin: 0 auto;
  padding: 2rem;
  color: #cc6600;
}
h6 {
  font-size: 2.3rem;
  font-weight: 500;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* Header */
/* header {
  height: 150px;
  width: 897px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 25px 10rem;
  color : #cc6600;
} */
/* UTILITIES */
/* TO make sure the page is fitting within the screen */
/* UTILITIES */

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* As screen get bigger, there is a padding, but in a smaller screen, its fitting to the screen */
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
  }

  .container &gt; * {
    width: 100%;
  }
  
  /* defualt is horizontal , here the  */
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  
  .flex-horizontal {
    display: flex;
    flex-direction:row;
  }
  .flex-center {
    justify-content: center;
    align-items: center;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .text-center {
    text-align: center;
  }
  
  .hidden {
    display: none;
  }
  
  
/* BUTTONS */



.topBanner {
  display: flex;
  justify-content:space-evenly;
  align-items: center;
  /* As screen get bigger, there is a padding, but in a smaller screen, its fitting to the screen */
  max-width: 30rem;
  margin: 2rem auto;
  padding: 2rem auto;
  /* background-color: white; */
}


/* defualt is horizontal , here the  */
.flex-horizontal {
  display: flex;
  flex-direction:row;
}

/* BUTTONS */
.topbtn {
  font-size: 1.8rem;
  padding: 1rem 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #56a5eb;
  margin-bottom: 1rem;
  text-decoration: none;
  color:#cc6600;
  background-color: white;
  display: flex;
  flex-wrap:wrap;
  flex-direction: row;
  justify-content:space-evenly;
  margin: 25px 5rem;
  color : #cc6600;
  box-shadow: 2px 3px 10px 
}


.btn {
    font-size: 1.8rem;
    padding: 1rem 0;
    width: 20rem;
    text-align: center;
    border: 0.1rem solid #56a5eb;
    margin-bottom: 1rem;
    text-decoration: none;
    color:#cc6600;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    margin: 25px 5rem;
    color : #cc6600;
    box-shadow: 2px 3px 10px 
  }
  .box {
    font-size: 1.5rem;
    /* padding: 1rem 0; */
    /* width: 20rem; */
    /* text-align: center; */
    /* border: 0.1rem solid #56a5eb; */
    /* margin-bottom: 1rem; */
    text-decoration: none;
    /* background-color: white; */
    /* display: flex;
    flex-wrap: wrap; */
    /* justify-content:center; */
    /* margin: 25px 10rem; */
    color : #080808;
  } 
  .btn:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
    transform: translateY(-0.1rem);
    transition: transform 150ms;
  }
  
  .btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  
  /* FORMS */
  form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  input {
    margin-bottom: 1rem;
    width: 20rem;
    padding: 1.5rem;
    font-size: 1.8rem;
    border: none;
    box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  }
  
  input::placeholder {
    color: #aaa;
  }

  /* FORMS */
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  margin-bottom: 1rem;
  width: 20rem;
  padding: 1.5rem;
  font-size: 1.8rem;
  border: none;
  box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
}

input::placeholder {
  color: #aaa;
}
</pre></body></html>