body{
  background-color: whitesmoke;
}
.inc{
  margin-left:10vh;
  height:6vh;
  width:10vh;
  padding: none;
}
#my_name{
  font-style: italic;
  font-weight: 300;
}

.delete_button{
  margin-left:3vh;
  font-size: x-small;
  margin-bottom:2px;
  border:none;
  background-color:rgba(241, 88, 88 , 0.4);
  border-radius: 2px;
}
.delete_button:hover{
  background-color:rgba(253, 3, 3, 0.6) ;
}

#sub1{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub2{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub3{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub4{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub5{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub6{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub7{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub8{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub9{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub10{
  color: rgb(81, 89, 86);
  font-size:x-large;
}
#sub11{
  color: rgb(81, 89, 86);
  font-size:x-large;
}

#sub1_data {
  color: rgba(0,0,0,.6);
}
#sub2_data {
  color: rgba(0,0,0,.6);
}
#sub3_data {
  color: rgba(0,0,0,.6);
}
#sub4_data {
  color: rgba(0,0,0,.6);
}
#sub5_data {
  color: rgba(0,0,0,.6);
}
#sub6_data {
  color: rgba(0,0,0,.6);
}
#sub7_data {
  color: rgba(0,0,0,.6);
}
#sub8_data {
  color: rgba(0,0,0,.6);
}
#sub9_data {
  color: rgba(0,0,0,.6);
}
#sub10_data {
  color: rgba(0,0,0,.6);
}
#sub11_data {
  color: rgba(0,0,0,.6);
}

#main_container{
  margin-left:40vh;
  margin-top:10vh;
  
}

#main_card{
  width:40rem;
}
.date_input{
  
  width:30%;
  margin-left:20px;
  height:6vh;
}

@media screen and (max-width: 400px) {
  

  .login_container{

    width:23rem;
    margin-top:50%;
    margin-left: 0px;
  }
  
   #main_container{
    margin-left:4vh;
    margin-top:2vh;
    zoom:120%;
  }
  #main_card{
    width:15rem;
  }
  .inc{
    margin-left:2vh;
    height:4vh;
    width:4vh;
  }
  
}

@media all and (min-width: 401px) and (max-width: 500px){

  .login_container{

    width:24rem;
    margin-top:50%;
    margin-left: 0px;
    height:40vh;
  }
  
  #main_container{
   margin:1vh;
   zoom:150%;
 }
 #main_card{
   width:15rem;
 }
 .inc{
   margin-left:2vh;
   height:3vh;
   width:4vh;
 }
}

@media all and (min-width: 501px) and (max-width: 610px){

  #login_container{

    width:25rem;
    margin-top:50%;
    margin-left: 0px;
  }

  #main_container{
    margin:1vh;
    zoom:150%;
  }
  #main_card{
    width:20rem;
  }
  .inc{
    margin-left:2vh;
    height:3vh;
    width:4vh;
  }

}

@media all and (min-width: 610px) and (max-width: 725px){

  #login_container{

    width:30rem;
    margin-top:50%;
    margin-left: 0px;
  }

  #main_container{
    margin:2vh;
    zoom:150%;
  }
  #main_card{
    width:25rem;
  }
  .inc{
    margin-left:2vh;
    height:3vh;
    width:4vh;
  }
}
@media all and (min-width: 726px) and (max-width: 850px){

  #login_container{

    width:35rem;
    margin-top:50%;
    margin-left: 0px;
  }

  #main_container{
    margin:2vh;
    zoom:150%;
  }
  #main_card{
    width:30rem;
  }
  .inc{
    margin-left:2vh;
    height:3vh;
    width:4vh;
  }
}