/***********************************************************
 * Author: Leonard Siu                                     *
 * Date created: 24 August 2021                            *
 ***********************************************************/
article
{
  margin: 5vh 20vw;
}

article>h2
{
  text-align: center;
  margin-bottom: 3vh;
}

article li
{
  line-height:1.5rem;
  margin-bottom: 1vh;
}

li>ul{margin-left: 3vw;}

.centerText{text-align: center;}

.categoryCard
{
  width: 300px;
  height: 250px;
  display: flex;
  flex-direction:column;
  margin-bottom: 2vh;
}

.categoryImage
{
  width: 100%;
  height: 200px;
}

.categoryImage>a,.categoryImage>a>img
{
  width: 100%;
}

.categoryTitle
{
  background-color: var(--cfRed);
  color: var(--cfLightGrey);
  height:50px;
  display: flex;
}


.inputGroup
{
  margin-bottom: 1vh;
  display: flex;
  flex-direction: column;
}

.inputGroup>label, .inputGroup>p
{
  font-weight: bold;
  flex-grow: 1;
}
 .inputGroup>input[type="text"]
,.inputGroup>input[type="email"]
,.inputGroup>input[type="password"]
,.inputGroup>input[type="date"]
{
  flex-grow: 2;
  font-size: 1.25rem;
  line-height:1rem;
  padding: 0.5rem;
}

.pageTitle{margin-top: 5vh}

.radioGender
{
  margin:1vh 0;
  border: 1px solid var(--cfLightGrey);
  padding:1vh;
}
.radioGender>label
{
  margin-left: 1vw;
  margin-right: 5vw;
}

.registrationForm
{
  background-color: lightgrey;
  margin: 5vh auto;
  display: flex;
  flex-direction: column;
  width: 90vw;
  padding: 1vh 1.5vw;
}

.registrationForm input[type="button"], .registrationForm input[type="submit"]
{
  height: 3rem;
  border: 0;
  font-size: 1.5rem;
  color: var(--cfLightGrey);
  border-radius: 5px;
  cursor: pointer;
}

.registrationForm input[type="button"]
{
  margin-bottom: 1vh;
  background-color: red;
}

.registrationForm input[type="submit"]
{
  margin-bottom: 1vh;
  background-color: green;
}

/*For landscape phones where the header height is to small
for the logo to fit.*/
@media (max-width: 850px) and (max-height: 440px)
{
  .registrationForm{width: 70vw;}
}/* @media (max-width: 850px) and (max-height: 440px) */

/*For tablet portrait*/
@media(min-width: 500px) and (min-height: 710px)
{
  .registrationForm{width: 60vw;}
}/* @media(min-width: 500px) and (min-height: 710px) */

@media(min-width: 500px) and (min-height: 441px)
{
  .registrationForm{width: 50vw;}
}