style.scss

//COLORS
$primary-color: rgba(0, 0, 0, 0.9);
$primary-main-color: rgb(121, 121, 121);
$secondary-color: rgb(51, 51, 51);

//FLEX PROPERTIES
@mixin flexProperty {
  display: flex;
  justify-content: center;
  align-items: center;
}

//CLEARFIX
@mixin clearFix {
  margin: 0.2rem;
  border-radius: 20px;
}

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

html {
  font-size: 3vmin;
}

body {
  font-family: sans-serif;
  font-weight: bolder;
  background: $primary-color;
  box-sizing: border-box;
}

/* For mobile resolution */
/* Board */
.board {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;   
  padding: 0.2rem;
  color: $primary-main-color;
  border-radius: 20px;
  border: 2px solid rgb(121, 121, 121);
}

/* Component 1 */
.board__note {
  @include flexProperty;
  @include clearFix;
  max-width: 100%;
  min-height: 63%; 
  position: relative; 
  background-color: $secondary-color;
  
  /* Screen Header */
  &--screenHeader {
     position: absolute;
     font-size: 5rem;
  }
  
  /* Screen */
  &--statement {
  @include flexProperty;
     width: 75%; 
     font-size: 2rem;
     font-family: sans-serif;
     font-weight: bolder;
     background-image: linear-gradient(to right, rgb(0, 250, 0), rgb(253, 249, 2), rgb(253, 52, 2));
     -webkit-background-clip: text;
     -moz-background-clip: text;
     background-clip: none;
     color: transparent;
   }
}

/* Component 2 */
.calculator {
  @include flexProperty;
  @include clearFix;
  max-width: 100%;
  min-height: 35%;  
  flex-direction: column;
  padding: 0.4rem;
  background-color: $secondary-color;

  &__controller {
    @include flexProperty;
    max-width: 100%;
    min-width: 60%;
    min-height: 50%;
    flex-direction: column;
    margin-top: 1rem;
  }
}

/* Utility Class */
.utilityDev {
  @include flexProperty;
  width: 100%;
  min-height: 1.4rem;
  margin: 0.3rem;

  &__label {
    width: 35%;
    font-size: 1rem;
  }

  &__input {
    width: 65%;
    font-size: 1rem;
    border: none;
    border-radius: 0.2rem;
    padding: .2rem;
  }
}

/* Button */
.controller__button {
  max-width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.2rem 1.2rem;
  color: whitesmoke;
  cursor: pointer;
  background-color: $primary-main-color;
  margin: 0.5rem 1.5rem;
  border: none;
  border-radius: 0.3rem;
  transform: scale(0.9);
  transition: all 0.2s ease-out;

  &:hover {
    transform: scale(1);
  }
}


/* For resolution >= 910px */
@media (min-width: 58.875rem) {
  .board {
    display: flex;
    align-items: center;
    flex-direction: row;   
    padding: 0.4rem;
  }
  
  .board__note {
    @include flexProperty; 
    width: 60%;
    min-height: 100%;   
  }

  .calculator {
    @include flexProperty;
    width: 40%;
    min-height: 100%;
    padding: 0.7rem;
    
    &__controller {
      @include flexProperty;
      max-width: 100%;
      min-height: 50%; 
    }
  }
  
  .utilityDev {
    @include flexProperty;
    width: 100%;
    min-height: 1rem;
    margin: 1rem auto;
    padding: 0.5rem; 
    margin: 1rem;

    &__label {
      width: 35%;
      font-size: 1rem;
      margin-right: 0.4rem;
    }

    &__input {
      width: 65%;
      font-size: 1rem;
      border: none;
      border-radius: 0.2rem;
      margin-bottom: 0.5rem;
      padding: .2rem;
    }
  }
  
  .controller__buttonDiv {
    @include flexProperty;
  }
}