/* Kode skrevet av Elias W. Harvik-Wright 15.10.2020 */
/* Kode sjekket av Haris Brkic 15.10.2020 */
*, option {
  box-sizing: border-box;
  font-family: "Inter", "FontAwesome";
}

@media (min-width: 1000px) {
  .rForm { /* SPALTER PÅ STØRRE SKJERMER */
    max-width: 70%;
    margin: auto;
  }
}
@media (max-width: 600px) {
  .rForm {
    margin-top: 12%;
  }
}
.rForm {
  display: grid;
  grid-template-areas:
    "pbilde pbilde"
    "fornavn etternavn"
    "alder alder"
    "tlfNr email"
    "fakultet campus"
    "beskrivelse beskrivelse"
    "passord passordCnf"
    "submit submit";
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.6em 0.9em;
  background: #ffffff;
  padding: 1em;
}

.rForm button {
  background: #1d1d1b;
  border-radius: 5px;
  color: whitesmoke;
  padding: 1em;
  border-style: none;
  transition: 0.3s;
}button:hover {
  transform-style: flat;
  background: whitesmoke;
  border-radius: 5px;
  color: #1d1d1b;
  padding: 1em;
  border-style: none;
}

.rForm input:not([type="radio"]),
.rForm select {
  width: 100%;
  padding: 1em;
  margin: 0.2em 0;

  font-weight: 300;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease;
  background-color: transparent;
}
.rForm input:focus {
  border-color: rgba(41, 148, 219, 0.787);
  background-color: #f1fbfe;
}
.rForm label {
  display: block;
}
.rForm input:focus:required:valid {
  border-width: 1.3px;
  border-color: green;
  background-color: #f3fef1e5;
}
.rForm input:invalid:focus + span:after{
  border-width: 1.3px;
  border-color: #dc3544;
  background-color: #fef1f2;
}
#pbilde {
  position: relative;
  height: 6em;
  width: 6em;
  background-color: transparent;
  border-radius: 50%;
}
#bildeTekst {
  font-size: small;
}
/* GRID KOMPONENTER */
.pbilde {
  grid-area: pbilde;
}
.fornavn {
  grid-area: fornavn;
}
.etternavn {
  grid-area: etternavn;
}
.alder {
  grid-area: alder;
}
.email {
  grid-area: email;
}
.tlfNr {
  grid-area: tlfNr;
}
.campus {
  grid-area: campus;
}
.fakultet {
  grid-area: fakultet;
}
.beskrivelse {
  grid-area: beskrivelse;
}
.passord {
  grid-area: passord;
}
.passordCnf {
  grid-area: passordCnf;
}
.submit {
  grid-area: submit;
}

/** Legger til styling på RADIO-knapper for bedre UI opplevelse **/
input[type="radio"].with-font {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
input[type="radio"].with-font ~ label:before {
  display: inline-block;
  content: "\f1db";
  letter-spacing: 10px;
  font-size: 1.2em;
  color: #535353;
  width: 1.4em;
}
input[type="radio"].with-font:checked ~ label:before {
  content: "\f00c";
  font-size: 1.2em;
  color: green;
  letter-spacing: 5px;
}
input[type="radio"].with-font:focus ~ label:before,
input[type="radio"].with-font:focus ~ label {
  color: green;
}