*,
*::after,
*::before {
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  cursor: default;
  user-select: none;
}
:root {
  --bgColor: #d9d9d9;
  --title-Color: #161616;
  --night-Mode-Color: #092327;
  --line-Color: #284b63;
  --box-1-Color: #90c2e7;
  --text-Color: #0b5351;
  --box-2-border-Color: #3c6e71;
  --footer-color: #000000;
  --Logo-Color: #092327;
  --PlaceHolder-Color: #d9d9d9;
  --inputs-bg-Color: #fff;
  --inputs-Color: #161616;
  --iconRT-Color: #284b63;
  --calculate-Button: #284b63;
  --result: #040404;
}
@font-face {
  font-family: "Boogaloo";
  src: local("Boogaloo"), url("../font/Boogaloo-Regular.ttf") format("ttf");
}
@font-face {
  font-family: "ABeeZee";
  src: local("ABeeZee"), url("../font/ABeeZee-Regular.ttf") format("ttf");
}
body {
  font-family: "Boogaloo";
  background-color: var(--bgColor);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#Logo {
  max-width: 8vw;
  fill: var(--Logo-Color);
}
.title {
  font-size: 3.5vw;
  color: var(--title-Color);
}
.nightMood {
  width: 8vw;
  height: 3vw;
  border-radius: 60px;
  background-color: var(--night-Mode-Color);
  margin-left: 3%;
}
.dark-mode {
  transition: background-color 350ms ease;
  --bgColor: #263238;
  --title-Color: #b2ccd6;
  --night-Mode-Color: #dfb86f;
  --line-Color: #405470;
  --box-1-Color: #19252c;
  --text-Color: #90c2e7;
  --box-2-border-Color: #2d4361;
  --footer-color: #cfcfcf;
  --Logo-Color: #b2ccd6;
  --PlaceHolder-Color: #c6c6c6b4;
  --inputs-bg-Color: #3a4b61;
  --inputs-Color: #f1d700;
  --iconRT-Color: #c9a2e2;
  --calculate-Button: #f1d700;
  --result: #D7D9CE;
}
.circle {
  width: 4vw;
  height: 4vw;
  border-radius: 100%;
  position: absolute;
  left: 7.3vw;
  top: 1.5vw;
  background-image: url(../image/icons-moon.png);
  background-size: cover;
  filter: drop-shadow(0px 0px 3px #161616c6);
  transition: all 300ms ease;
}
.line {
  width: 80%;
  height: 0.3vmax;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10pt;
  background-color: var(--line-Color);
}
.box {
  width: 95vw;
  height: 70vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box1 {
  width: 29%;
  height: 100%;
  background-color: var(--box-1-Color);
  border-radius: 7% 93% 9% 91% / 89% 6% 94% 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4vw;
  transition: border-radius 80ms linear 90ms;
  color: var(--text-Color);
}
.box1:hover {
  border-radius: 6px;
  box-shadow: 1px 1px 18px -5px #1e4344;
}
.message {
  width: 50%;
  font-size: 4vw;
  text-align: center;
}

.box1 > h3 {
  font-size: 3vw;
  text-align: center;
  letter-spacing: 20px;
}
.result {
  width: 83%;
  font-size: 2vw;
  letter-spacing: 2px;
}
#calculate{
  font-family: "Boogaloo";
  font-size: 2.5vw;
  letter-spacing: 2px;
  background-color: var(--calculate-Button);
  color: var(--bgColor);
  width: 60%;
  height: 4vw;
  border-radius: 7% 93% 9% 91% / 89% 6% 94% 11%;
  cursor: pointer;
}
#gpaResult {
  font-size: 2.5vw;
  background-color: var(--inputs-bg-Color);
  color: var(--result);
  width: 100%;
  height: 6vw;
  border-radius: 10% 133% 6% 91% / 198% 16% 94% 31%;
  margin: 6px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.disNone{
  display: none;
}
.box2 {
  width: 69%;
  height: 100%;
  border: 0.3vmax solid var(--box-2-border-Color);
  border-radius: 18px;
  padding: 30px 25px 25px 25px;

  overflow-y: scroll;
}
.box2::-webkit-scrollbar {
  display: none;
}
.plusButton {
  background-color: #ffffff00;
  border-radius: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: calc(46vh - 50%);
  transition: all 200ms linear;
}
.plusIcon {
  width: 12vw;
  transition: all 80ms linear 90ms;
}
.plusIcon:hover {
  transform: scale(1.1);
  filter: drop-shadow(6px 5px 7px #162a2b);
}
.inputs-lists {
  width: 100%;
  transition: all 300ms linear;
  animation: fadeIn 200ms;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.form-section {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inputs {
  padding: 5px 5px 5px 8px;
  font-family: inherit;
  width: 25%;
  height: 6vh;
  font-size: 23px;
  border-radius: 8px;
  color: var(--inputs-Color);
  background-color: var(--inputs-bg-Color);
}
.inputs::placeholder {
  color: var(--PlaceHolder-Color);
}
.inputs::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-button {
  background-color: #ffffff00;
  width: 50px;
  height: 7vh;
  padding: 8px;
}
.iconRT {
  fill: var(--iconRT-Color);
}
.footer {
  font-family: "ABeeZee";
  font-size: 0.8rem;
  color: var(--footer-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  margin-left: 1.5px;
  margin-right: 1.5px;
  margin-bottom: 1.5px;
}
#email {
  color: var(--footer-color);
  text-decoration: none;
}
#email:hover {
  color: var(--text-Color);
}

@media (max-width: 480px) {
    .box{
      flex-direction: column;
      height: 80vh;
      gap: 5vh;
      padding: 30px 5px 30px 5px;
    }
    .box1{
      gap: 0;
      width: 95vw;
      height: 12vh;
      border-radius: 2rem ;
    }
    .Responsive{
      background-color: var(--calculate-Button);
      color: var(--bgColor);
      width: 50%;
      border-radius: 0rem 1rem 0rem 1rem;
    }
    .title{
      font-size: 1.7rem;
    }
    .form-section{
      position: relative;
      width: 100vw;
      gap: 2vw;
    }
    .plusButton{
      width: 20vw;
    }
    .plusIcon{

      width: 100%;
    }

    .unit{
      width: 12vw;
    }
    .score{
      width: 14vw;
    }
    .course-name{
      width: 30vw;
    }
    .form-button{
      width: 2.5rem;
    }
    .iconRT{
      width: 1.5rem;
    }

    .result{
      font-size: 1rem;
    }
    #gpaResult{
      border-radius: 1rem;
    }
    .box2{
      width: 95vw;
      height: 80vh;
    }
  
}