/*Diary's STYLESHEET*/

   /*LINKS*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

   /*CODE*/

    :root {
      --color1: #1d1f20;
      --color2: #ccc7c0;
      --color3: #34383a;
      --color4: #CC97B1;
   }

   body {
    background-color: var(--color1);
    color: var(--color2);
    font-family: "JetBrains Mono", "Noto Sans", sans-serif, "Roboto";
    font-weight: 400;
    font-style: normal;
    display: block;
}

.content {
   display: flex;
   overflow-x: hidden;
   justify-content: center;
}

.container {
   width: 1000px;
}

/*NAVBAR*/

.top {
   background-color: var(--color3);
   display: flex;
   height: 80px;
   width: 1000px;
}

.title {
   margin-left: 50px;
}

.navbar {
   width: 100%;
   margin-left: 40%;
   align-content: center;
}

.navbar-links{
   display: flex;
}

.navbar-item {
   margin-left: 110px;
   list-style: none;
}

.navbar-item  a {
   text-decoration: none;
   color: purple;
}

/*MAIN CONTENT*/

#content-inner{
   display: flex;
   width: 100%;
}

.main{
   width: 70%;
}

.paper{
   background-color: var(--color3);
}

.writing{
   padding: 20px;
}


/*ASIDE*/

.aside {
   width: 35%;
   margin-left: 60px;
}

#paper-title {
   width: 100%;
   background-color: var(--color3);
}

#paper-h2{
   padding: 10px;
}

#directory-title {
   background-color: var(--color3);
}

#directory-h3 {
   padding: 8px;
   color: var(--color2);
}

#directory-link {
   text-decoration: none;
}

#archive{
   background-color: var(--color3);
}

#archive-list {
   padding: 25px;
}

.archive-link {
   color: var(--color4)
}

   /*MEDIA QUERIES*/

   @media (max-width: 1050px ) {

.top {
   width: 800px;
}

.container {
    width: 800px;
}

.navbar {
   margin-left: 20%;
}

}

   @media (max-width: 800px ) {

.top {
   width: 700px;
}

.container {
    width: 700px;
}

}

   @media (max-width: 720px ) {

.top {
   width: 600px;
}

.container {
    width: 600px;
}

.navbar {
   margin-left: 10%;
}


}

   @media (max-width: 610px ) {

.top {
   width: 500px;
}

.container {
   width: 500px;
}

.navbar {
   margin-left: 5%;
}

.navbar-item {
   margin-left: 60px;

}

#content-inner {
   display: block;
}

.main {
   width: 100%;
}

.aside {
   width: 100%;
   margin-left: 0;
}


}

   @media (max-width: 610px ) {

.top {
   width: 400px;
}

.container {
   width: 400px;
}

.navbar {
   margin-left: 0%;
}

.title {
   margin-left: 30px;
}

.navbar-item {
   margin-left: 40px;

}


}

   @media (max-width: 420px ) {

.top {
   width: 370px;
}

.container {
   width: 370px;
}

}

   @media (max-width: 340px ) {

.top {
   width: 290px;
}

.container {
   width: 290px;
}

.title {
   margin-left: 20px;
}

.navbar-links{
   font-size: 15px;
}


}