@import url("https://use.typekit.net/jai8bxf.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "ff-providence-sans-web-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body {
  background: #fdfdfd;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
}
main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 1rem;
}

h1 {
  color: #131313;
  margin-bottom: 0.5rem;
  display: inline;
  float: left;
}

b{
  font-weight: bold;
}

main{
    margin-top: 2%;     
}

img.create{
    width: 5%;
    display: inline; 
    float: right;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 1rem 0;
  }
  .card {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 15rem auto;
    height: 15rem;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    margin: auto;
    overflow: hidden;
  }
  .card--avatar {
    width: 100%;
    height: 10rem;
    object-fit: cover;
  }
  .card--title {
    color: #222;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 1.1rem;
    margin-top: 0.5rem;
  }
  .card--link {
    text-decoration: none;
    background: #db4938;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
  }

  .notecontainer{
    padding: 2%;
    background-color: #ebebeb;
    min-height: 100vh;
    padding-top: 7%;
    padding-left: 5%;
    padding-right: 5%;
  }

  .notecol{
    overflow: hidden;
    width: 100%; 
    height: auto; 
    border-radius: 12px;
    margin-bottom: 5%;
    background-image: url(../images/paper.png);
    background-size: cover;
    background-position: center;
    padding: 5%;

  }

  .torow{
    margin-bottom: 5%;
  }

  .message{
    margin-bottom: 5%;
    width: 100%; 
    word-break: break-all;
  }

  .from{
    width: 50%;
    display: inline-flex;
  }

  .datetime{
    width: 50%;
    display: inline-flex;
  }

  select{
    width: 100%;
    margin-bottom: 5%;
    padding: 2%;
  }

  textarea{
    width: 100%;
    padding: 2%;
  }

  input[type=submit]{
    width: 100%;
    padding: 2%;
  }

  h2{
    margin-bottom: 5%;
  }

  .success img{
    width: 4%;
}

.success {
  width: 100%;
  text-align: center;
  border: 2px solid #48b02c;
  margin-top: 5%;
  padding: 4%;
  border-radius: 12px;
  background-color: #48b02c2e;
}

.error img{
  width: 4%;
  margin-right: 2%;
}

.error {
  width: 100%;
  text-align: center;
  border: 2px solid #dd636e;
  margin-top: 5%;
  padding: 4%;
  border-radius: 12px;
  background-color: #dd636e1c;
}

.backhome{
  text-align: center;
  margin-top: 5%;
}

.backhome a{
  color: #131313;
  text-decoration: none;
}

.filter{
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%; 
  text-align: center;
}

.thismonth, .allmsg{
  width: 100%; 
  display: inline;
  padding: 1%; 
  padding-top: 2%;
  padding-left: 2%;
  background-color: #f7f7f7;
  margin: 5%;
  border-radius: 12px;
  text-align: center;
}

.thismonth.active{
  border: 2px solid #131313;
}

.allmsg.active{
  border: 2px solid #131313;
}