/* 2-General styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    list-style-type: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Varela Round', sans-serif;
}

.clear {
    clear: both;
}

.section-header {
    text-align: center;
    margin-bottom: 20px;
}

.section-header .section-title {
    font-size: 35px;

    margin-bottom: 10px;
}

.section-header .line {
    display: block;
    height: 2px;
    width: 100px;
    background-color: #6195ff;
    margin-bottom: 10px;
    margin: 0px auto 70px auto;
}

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

/* Heder section */

.header {
    background-color: #a13a3a;
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
}

.header .logo {
    height: 20%;
    font-size: 3rem;
    font-weight: bold;
    float: left;
    padding-top: 5px;
    color: #fff;
    padding-left: 40px;
}

.header .nav {
    font-size: 4rem;
    display: flex;
    float: left;
    width: 70%;
    list-style: none;
    justify-content: space-around;
}

#logo {
    position: fixed;
    top: 0px;
    left: 90px;
    z-index: 149;
    width: 75px;
}
/* book */
* {
    box-sizing: border-box;
}
body {
    background: #222;
    font-family: "Gochi Hand", sans-serif;
    color: #333;
}
aside.context {
    text-align: center;
    color: #fff;
    line-height: 1.7;
    font-size: 20px;
    letter-spacing: 0.5px;
}
aside.context a {
    text-decoration: none;
    color: #fff;
    padding: 3px 0;
    border-bottom: 1px dashed;
}
aside.context a:hover {
    border-bottom: 1px solid;
}
aside.context .explanation {
    max-width: 700px;
    margin: 4em auto 0;
}
.book-footer {
    text-align: center;
    margin: 4em auto;
    width: 100%;
}
.book-footer a {
    text-decoration: none;
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed #fff;
    color: #fff;
    margin: 5px;
}
.book-footer a:hover {
    background: rgba(255, 255, 255, 0.1);
}
.book-footer a .icons {
    margin-top: 12px;
    display: inline-block;
    font-size: 20px;
}
.main-content {
    margin: 5em auto;
}
.notebook {
    max-width: 868px;
    min-width: 550px;
    min-height: 570px;
    margin: auto;
    border-radius: 16px;
    background: #cc4b48;
    padding: 2px 4px 2.5px;
}
.notebook__inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 16px;
    background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center, linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
    background-size: 16px 16px;
    display: grid;
    padding: 30px 20px 25px;
    grid-template-areas: 
    "title expenses picture" 
    "days expenses picture" 
    "days expenses picture" 
    "days goals quote" 
    "days tracker tracker";
    grid-template-columns: 50% 30% 20%;
    grid-template-rows: 18% auto auto 30% 25%;
}
.notebook__inner:after {
    content: "";
    width: 100px;
    height: 100%;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    position: absolute;
    background: linear-gradient(to right, transparent 10%, rgba(153, 153, 153, 0.05) 50%, rgba(153, 153, 153, 0.4) 51%, rgba(153, 153, 153, 0.15) 51.5%, transparent 90%);
}
.title {
    grid-area: title;
    text-align: center;
}
.title h1 {
    font-size: 70px;
    font-family: 'Gaegu', cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #b93c3cc1;
    margin: 0;
}
.title h3 {
    font: 10.8333333333px "Reenie+Beanie", cursive;
    margin: 8px;
}
.days {
    grid-area: days;
    grid-template-rows: auto;
    grid-template-areas: "days1 days2 days3" "days4 days5 days6" "days7 notes notes" ;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 15px;
    margin-right: 22px;
}
.days__item {
    border: 2px solid #111;
    position: relative;
}
.days__item:nth-child(1) {
    box-shadow: 3px 3px 0 0 rgba(208, 91, 88, 0.4);
}
.days__item:nth-child(2) {
    box-shadow: 3px 3px 0 0 rgba(244, 68, 46, 0.5);
}
.days__item:nth-child(3) {
    box-shadow: 3px 3px 0 0 rgba(239, 184, 186, 0.6);
}
.days__item:nth-child(4) {
    box-shadow: 3px 3px 0 0 rgba(204, 75, 72, 0.7);
}
.days__item:nth-child(5) {
    box-shadow: 3px 3px 0 0 rgba(231, 149, 152, 0.7);
}
.days__item:nth-child(6) {
    box-shadow: 3px 3px 0 0 rgba(228, 87, 46, 0.5);
}
.days__item:nth-child(7) {
    box-shadow: 3px 3px 0 0 rgba(239, 184, 186, 0.6);
}
.days__day {
    padding: 5px 5px 2px;
    font: 18px "Indie Flower", cursive;
    border-bottom: 2px solid #111;
}
.days__img{
width: 70px;
height: 70px;
margin-bottom: 15%;
}
.days__list {
    padding: 8px;
    font-size: 14px;
    line-height: 0.9;
}
.days p {
    padding-left: 8px;
    position: relative;
    margin: 5px 0;
}
.days p:after {
    content: '-';
    top: 0;
    position: absolute;
    left: 0;
}
.days .highlighted {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 8px;
    left: 0;
    text-align: center;
}
.days .highlighted .text {
    margin-top: 5px;
    position: relative;
}
.days .highlighted .text span {
    position: relative;
    z-index: 2;
}
.days .highlighted .text:after {
    content: '';
    background: rgba(239, 184, 186, 0.3);
    width: 95%;
    height: 100%;
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 1;
    transform: rotate(-3deg);
}
.notes {
    grid-area: notes;
    border: 2px solid #111;
    border-width: 0 2px 2px;
    margin: 35px 20px 0 0;
    position: relative;
}
.notes span {
    text-align: left;
    display: block;
    margin: -25px 22px;
    font-size: 37px;
    font-family: 'Gaegu', cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #ff7f5063;
}
.notes span:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    background: #111;
    background: linear-gradient(to right, #111 15px, transparent 21px, transparent 135px, #111 95px);
}
.notes__list {
    margin-top: 24px;
    padding: 10px;
    line-height: 1.2;
}
.expenses {
    grid-area: expenses;
    margin: 0 0 20px 20px;
    display: grid;
    grid-gap: 6px 10px;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, auto);
}
.expenses h4 {
    font: 30px "Indie Flower", cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #ff7f5063;
    text-align: center;
    margin: 0 0 10px;
}
.expenses h4:first-of-type {
    grid-column: 1 / span 4;
}
.expenses__box {
    height: 100%;
    border: 2px solid #111;
    grid-column: span 2;
    padding: 7px 7px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    color: #222;
}
.expenses__title {
    font: 4px;
}
.expenses__amount {
    font: 19px 'Gochi Hand', cursive;
    display: inline-block;
    margin-left: 10px;
}
.expenses .savings {

    color: #222;
    position: relative;
    grid-column: 1 / span 4;
    width: 99%;
    padding: 10px 10px 5px;
    background: rgba(239, 184, 186, 0.4);
    box-shadow: 3px 3px 0 0 rgba(231, 149, 152, 0.7);
    font: 16px "Reenie+Beanie", cursive;
}
.picture {
    display: flex;
    align-items: center;
    grid-area: picture;
    margin-left: 20px;
}
.picture__border {
    width: 100%;
    background: #f9f9f9;
    padding: 20px 10px 50px;
    height: 65%;
    transform: rotate(5deg);
    position: relative;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
.picture__border:after {
    content: "";
    width: 55%;
    height: 20px;
    top: -10px;
    z-index: 5;
    left: 25%;
    transform: rotate(-2deg);
    position: absolute;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: rgba(220, 220, 220, 0.4);
}
.picture__border img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.picture__border figcaption {
    margin: 10px 0;
    text-align: center;
    display: block;
    font: 14px "Gochi Hand", cursive;
    color: #f4442e;
}
.goals {
    grid-area: goals;
    margin: 25px 0 47px 20px;
    border: 2px solid #111;
    border-width: 0 2px 2px;
    position: relative;
    height: 95%;
}
.goals__list {
    height: 100%;}
.goals__item {
    height: 100%;
    padding: 3px 12px;
}
.goals__item img{width: 80%;}
.goals__item__checkbox {
    border: 2px solid #111;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
}
.goals__item__checkbox span {
    font-size: 26px;
    display: inline-block;
    position: absolute;
    top: -4px;
    color: #db6165;
}
.goals__item__desc {
    display: inline-block;
    font: 18px "Gochi Hand", cursive;
    vertical-align: top;
}
.goals > span:nth-child(1) {
    text-align: left;
    position: absolute;
    text-transform: uppercase;
    font: 700 9px "Reenie+Beanie", cursive;
    top: -30px;
    transform: rotate(-15deg);
}
.goals > span:nth-child(2) {
    text-align: left;
    display: block;
    margin: -25px 17px;
    font-size: 37px;
    font-family: 'Gaegu', cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #ff7f5063;
}
.goals > span:nth-child(2):before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    background: #111;
    background: linear-gradient(to right, #111 14px, transparent 15px, transparent 113px, #111 85px);
}
.goals__inner {
    height: 100%;
    margin-top: 19px;
}
.music {
    grid-area: quote;
    margin: 25px 0 10px 20px;
    position: relative;
}
.music__title {
    font: 30px "Indie Flower", cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #ff7f5063;;
}
.music__artist {
    margin: 15px 0;
    transform: rotate(-10deg);
    max-width: 50px;
    font: 15px 'Gochi Hand', cursive;
}
.music__artist a{
    text-decoration: none;
    color: #e4572e;}
.music svg {
    width: 65px;
    position: absolute;
    bottom: 0px;
    right: -10px;
}
.tracker {
    grid-area: tracker;
    border: 2px solid #111;
    border-width: 0 2px 2px;
    margin: 35px 18px 0 20px;
    position: relative;
}
.tracker span {
    text-align: left;
    display: block;
    margin: -25px 22px;
    font-size: 37px;
    font-family: 'Gaegu', cursive;
    text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 #ff7f5063;
}
.tracker span:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    background: #111;
    background: linear-gradient(to right, #111 15px, transparent 21px, transparent 173px, #111 95px);
}
.tracker__list {
    margin-top: 17px;
    padding: 10px;
    line-height: 1.2;
}
#monika{position: fixed;
top: 5px;
right: 5px;
z-index: 149;
width: 15vw;}
#monika:after {
    content: "";
    width: 55%;
    height: 20px;
    top: -10px;
    z-index: 5;
    left: 25%;
    transform: rotate(-2deg);
    position: absolute;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    background: rgba(220, 220, 220, 0.4);
}

@media screen and (max-width: 768px) {
    .main-content {
        padding: 1em;
   }
    .notebook__inner {
        grid-template-columns: 40% 25% 35%;
        grid-template-rows: auto;
        grid-template-areas: "title title title" "days days days" "notes notes notes" "expenses expenses expenses" "goals quote picture" "tracker tracker picture";
    }
        .notebook__inner > div {
            margin: 30px 20px;
       }
       .notebook__inner :after {
            width: 100%;
            height: 100px;
            bottom: 0;
            background: linear-gradient( to bottom, transparent 10%, rgba(153, 153, 153, 0.05) 50%, rgba(153, 153, 153, 0.4) 51%, rgba(153, 153, 153, 0.15) 51.5%, transparent 90% );
       }
   }

/* footer-section */

.footer {
    background: #1c1d21;
    text-align: center;
    padding-top: q0px;
}




/*media nav*/

.media-nav-bar {
    display: none;
    z-index: 100;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: fit-content;
    justify-content: space-evenly;
}
.media-nav-bar p{color: rgb(153 153 153 / 40%);}
.media-nav-bar a {
    display: flex;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.imcon {
    width: 4rem;
    display: flex;
}


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

    /*nav*/
    .header {
        display: none;
    }
#monika{display: none;}
#logo{display: none;}
    .scrollbar {
        margin-top: 0px;
        height: 100vh;
        width: 100vw;
        overflow-y: scroll;
    }

    #style-1::-webkit-scrollbar {
        width: 2%;
        background-color: #071820;
    }

    .media-nav-bar {
        display: flex;
    align-items: center;
    flex-direction: column-reverse;
    }

    /*about*/
    .about-item-desc {
        display: none;
    }

    .about-item{
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;}

    .about-item-link {
        display: none;
    }

    /*working*/
    .working-item-desc {
        display: none;
    }

    .container {
        justify-content: space-around;
    }

    .button {
        width: 30%;
        display: flex;
        justify-content: center;
    }

    .working-item .icon {
        position: unset;
        left: 10;
        top: 0;
    }

    .working-item {
        padding: 0;
        display: flex;
        width: 100%;
        padding: 40px 20px;
        align-content: center;
        flex-direction: column;
        align-items: center;
    }

    .working-item-title {
        margin-top: 3%;
        margin-bottom: 3%;
        text-align: center;
    }

    /*why me*/

    .why-item {
        width: 80%;
    }

    .numbers-items {
        width: 100%;
        padding: 0;
    }

    /*pricing*/
    .pricing-item-permonth {
        width: unset;
        height: unset;
        padding: 30px 0;
        transition: unset;
        margin: unset;
        border: unset;
        border-radius: unset;
    }

    .pricing-list {
        display: none;
    }

    .purchase {
        width: unset;
    }

    .pricing-plans {
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }

    .pricing-item {
        float: unset;
        padding: unset;
    }

    .pricing-item-text {
        font-size: 13px;
    }

    /*contact*/
    .contact-items {
        width: 100%;
        padding: 0;
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .number-item-text {
        width: 100%;
    }

}