.content{
  display: grid;
  grid-template-columns: 12fr;
  grid-template-rows: 1fr;
  width: 100vw;
  height: 100vh;
}

.c-text{
  display:block;
  float:left;
  color: white;
  font-weight: bold;
}

.m-text{
  display:block;
  float:left;
  color: orange;
  font-weight: bold;
}

.beta-text{
  display:block;
  float:left;
  color: cornflowerblue;
  font-size: 12px;
}

.prfile-text{
  display:block;
  float:left;
  padding: 3px 20px 0px 0px;
}

.prfile-text a{
  text-decoration: none;
  color: white;
}

.prfile-text a:hover{
  text-decoration: none;
  color: orange;
}

.right-block{
  position: relative;
}

.blur_img{
  opacity: 0.5;
}

.above_img{
  float: left;
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: 1000;
}

.main_section{
  grid-column: 2;
  grid-row: 1;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding: 30px 30px 30px 30px;
}

#text-white{
  color:rgb(222, 222, 222);
  float:left; 
  padding: 5px 20px 5px 5px;
}

@media only screen and (min-width: 600px) {
  .content{
    grid-template-columns: 3fr 9fr;
  }

  .sidebar{
    grid-column: 1;
    grid-row: 1;
    background: rgb(222, 222, 222);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    color: rgb(0, 0, 0);
    padding: 30px 0px 1px 0px;
  }

  ul.left-menu{
    list-style-type: none;
  }

  .sub-menu{
    display: none;
  }

  .nav-group{
    color: black;
    font-weight: bold;
    margin: 10px 0px 5px 0px;
    cursor: pointer;
    font-size: 16px;
  }

  .nav-item{
    color: black;
    font-size: 13px;
    margin: 2px 0px 0px 0px;
  }

  .nav-item a:hover{
    color: orange;
    font-weight: bold;
  }

}