/** @format */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --Lime: hsl(61, 70%, 52%);
  --Red: hsl(4, 69%, 50%);
  --White: hsl(0, 0%, 100%);
  --Slate-100: hsl(202, 86%, 94%);
  --Slate-300: hsl(203, 41%, 72%);
  --Slate-500: hsl(200, 26%, 54%);
  --Slate-700: hsl(200, 24%, 40%);
  --Slate-900: hsl(202, 55%, 16%);
  --Font-size-paragraph-: 16px;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  background-color: var(--Slate-100);
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding-top: 15vh;
}

.left,
.right {
  width: 50%;
  max-width: 500px;
  padding: 2rem;
}

/* Start left section */

.left {
  background-color: var(--White);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: stretch;
}

label {
  color: var(--Slate-900);
  margin-bottom: -1.5rem;
}

input {
  padding: 2vh 1vw;
  border-radius: 0.5vw;
  border: 1px solid var(--Slate-700);
}

input#mortgage-amount {
  width: 32vw;
  padding-left: 4vw;
}

.butt-inpu {
  display: flex;
  flex-direction: column;
}

.euro {
  background-color: var(--Slate-100);
  width: 3vw;
  text-align: center;
  z-index: 1;
  border-radius: 5px;
  position: relative;
  top: 42px;
  padding: 10px;
  left: 1px;
}

.years {
  position: relative;
  left: 130px;
  width: 5vw;
}

.mod {
  position: relative;
  left: 156px;
}

.top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.term-rate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: nowrap;
}

.amount,
.term,
.rate,
.mortgage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.mortgage {
  display: flex;
  flex-direction: column;
  gap: 4vh;
}

.repayment,
.interest {
  display: flex;
  border: 1px solid;
  width: 32vw;
  padding: 1vw;
  justify-content: space-between;
  align-items: baseline;
  border-radius: 0.5vw;
}

#repayment,
#interest-only {
  cursor: pointer;
}

button {
  background-color: var(--Lime);
  color: var(--Slate-900);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s ease;
  width: 17vw;
  border-radius: 10vw;
}

#clear {
  cursor: pointer;
  color: var(--Slate-700);
}

#clear:hover {
  color: var(--Red);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#mortgage-amount:focus {
  border: 1px solid var(--Lime);
}

/* End left section */

/* Start Right section */

.right {
  background-color: var(--Slate-900);
  display: flex;
  flex-direction: column;
  color: var(--White);
  padding: 2rem;
  justify-content: center;
  align-items: center;
  border-radius: 0vw 2vw 2vw 8vw;
}

.right p {
  color: var(--Slate-300);
}

#before {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4vh;
}

#after {
  display: none;
}

input[type="radio"]:checked {
  border-radius: 50%;
  color: red;
}

.error {
  color: red;
  padding-top: 0.5vh;
  display: none;
  position: relative;
}

.mortgage .error {
  top: -1.5rem;
}

#result {
  background-color: #052233;
  text-align: center;
  padding: 2vw;
  border-radius: 1vw;
}

#after h3 {
  position: absolute;
  top: 9vw;
}

p.text-after {
  position: relative;
  top: -4vw;
}

#calculate:hover {
  background-color: var(--Slate-700);
  color: var(--White);
}

/* Responsive design */
@media screen and (max-width: 576px) {
  .left,
  .right {
    width: 90%;
    padding: 1.5rem;
    display: flex;
    align-items: stretch;
  }

  button {
    width: 80%;
  }
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .top {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    gap: 2vw;
    align-items: flex-start;
  }

  .term-rate {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    align-items: stretch;
  }

  input,
  input#mortgage-amount {
    width: 70vw;
  }
}

@media screen and (max-width: 768px) {
  .left,
  .right {
    width: 90%;
    padding: 1.5rem;
  }

  button {
    width: 75%;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .left,
  .right {
    width: 85%;
    padding: 1.5rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .left,
  .right {
    width: 75%;
    padding: 2rem;
  }
}

@media screen and (min-width: 1200px) {
  .left,
  .right {
    width: 70%;
    padding: 2.5rem;
  }
}