SCSS nvm crowd

by intoverq

HTML

<div class="modal-body">
  <a href="#modal" class="modal-trigger">Trigger Modal</a>

  <div class="modal" id="modal">
    <div class="modal__dialog">
      <section class="modal__content">
        <div class="rectangle"></div>
        <header class="modal__header">
          <h1 class="modal__title">Please Confirm your purchase</h1>
          <a href="#" class="close"></a>
        </header>
        <div class="modal__body_pa">
          <div>
            <h3 class=".purchase-assets">Purchase assets
            </h3>
          </div>
          <div class="modal__name">
            <p class="ct_id smaller"><span class="uppercase_confirm">Name:</span></p>
          </div>
          <div class="modal__desc">
            <p class="ct_id smaller">NVM – Novem Gold Utility Token</p>
          </div>
          <div class="modal__name">
            <p class="ct_id smaller"><span class="uppercase_confirm">Address:</span></p>
          </div>
          <div class="modal__desc">uYhframoQsQaZEcZ1B2S4Nf8jD3fshHodzuYhframoQsQaZEcZ</div>
          <div></div>
          <div></div>
        </div>
        <div class="modal__body_pa">
          <div>
            <h3 class=".purchase-assets">Funding</h3>
          </div>
          <div class="modal__name">
            <p class="ct_id smaller"><span class="uppercase_confirm">You're sending:</span></p>
          </div>

          <div class="modal__desc">1 Gas</div>
        </div>
      </section>
    </div>
  </div>
</div>

SCSS

/*
* {
  box-sizing: border-box;
}
*/

.modal-body{
 width:94%;
 margin: 0 auto;
}

.modal__body_pa{
  border-top: 1px solid #F0F0F8;
  margin-left: 5rem;
  margin-right: 5rem;
  /*box-sizing: border-box;	*/
}

.modal__name{
  width: 25%;
  float: left;
}

.modal__desc{
  width: 75%;
  float: left;
}

.rectangle {	
  height: 4px;	
  background-color: #C5A861;	
  box-shadow: 0 2px 10px 0 rgba(197,168,97,0.5);
}

*, *::after, *::before{
  box-sizing: border-box;
}
.modal-trigger{
  text-decoration: none;
  padding:1rem;
  background:#f93434;
  display:inline-block;
  border-radius:3px;
  margin-top:50px;
  color:#fff;
}
.modal{
  display:none;
  background:rgba(0, 0, 0, .8);
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:100%;
   box-shadow: 0 2px 20px 0 rgba(9, 30, 57, 0.25);

}
.modal:target{
  display:table;
}
.modal__dialog{
  display:table-cell;
  vertical-align:middle;
}

.modal__content{
  background:rgb(255, 255, 255);
  width:60%;
  min-width:300px;
  margin:auto;
  position:relative;
  
  animation: slideUp 0.3s ease-in-out;
}

.modal__header{
  color:rgba(255, 255, 255, 0.8);
  padding:2rem;

}
.modal__title{
  margin:0;
  position:relative;
  color: #333333;	
  font-family: "Noe Display";	
  font-size: 2rem;	
  line-height: 35px;	
  text-align: center;
}
.modal__body {
  width:60%;
}
/*
.modal__close{
  color:#fff;
  text-decoration: none;
  position:absolute;
  top:1rem;
  right:1rem;
}
*/
.modal__image{
  display:block;
  margin:1rem auto;
}
.modal__text{
  padding:0 1rem;
  line-height:1.5;
}
.modal__footer{
  padding:1rem;
  border-top:1px solid #ccc;
}

.line-2 {	
  box-sizing: border-box;	
  height: 1px;
  width: 80%;
  border: 1px solid #F0F0F8;
}

.uppercase_confirm{
text-transform: uppercase;
}

.purchase-assets {	
  height: 2rem;	
  color: #808080;	
  font-family: "Source Sans Pro";
  font-size: 1.2rem;	
  line-height: 2rem;
}

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity:...