* {
    box-sizing:border-box;
    margin:0;
    color:black;
}
@font-face {
    font-family: ank24;
    src: url(fonts/Px437_DOS-V_re_ANK24.ttf);
}
@font-face {
  font-family:spirit;
  src: url(fonts/Spirit.ttf);
}
  @font-face {
    font-family: morningtea;
    src: url(fonts/MorningTea.ttf);
  }
    @font-face {
    font-family: basiic;
    src: url(fonts/basiic.ttf);
  }
.container {
    background-image: url(images/notebookbackground2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height:800px;
    width:850px;
    margin-top:100px;
    margin-left:200px;
    margin:auto;

}

::selection {
    background-color : #8dc1e0;
  }


body {
    background-image: url(https://pixelbank.neocities.org/div/white/6.png), url(https://pixelbank.neocities.org/bg/500.gif);
    font-size: 22px;
    background-position: top;
    background-repeat: repeat-x, repeat;
    background-size: 450px, 200px;
}

a:link {
    color: var(--highlight-colour);
  }
  
  /* visited link */
  a:visited {
    color: var(--highlight-colour);
  }
  
  /* mouse over link */
  a:hover {
    color: var(--main-colour);
  }
  
  /* selected link */
  a:active {
    color: var(--main-colour);
  }

::-webkit-scrollbar {
    display: none;
}

.page1 {
    height:95%;
    width:50%;
    padding:50px;
    color:rgb(54, 25, 1);
}
.page2 {
    height:100%;
    width:50%;
    padding:30px;
    color:rgb(54, 25, 1);
}


h1 {
  font-size:35px;
   font-family:spirit;
}
p {
  font-family: basiic;
}

.tab {
  background-color:#ebf8ff;
   border:3px solid #659ec3;
   border-right: 0;
  height:90px;
  width:50px;
  position:relative;
  top:200px;
  right:920px;
  border-radius:10px;
  border-top-right-radius:0;
  border-bottom-right-radius: 0;
  padding:10px;
  transition:0.5s ease all;
}
.tab, .tab2 p {
    writing-mode: vertical-rl;
  font-family:morningtea;
  float:right;
  text-align: center;
}
/*.tab:hover {*/
/*  padding-right:50px;*/
/*}*/
/*.tab2:hover {*/
/*  padding-left:50px;*/
/*}*/
.tab2 {
  background-color:#ebf8ff;
   border:3px solid #659ec3;
   border-left: 0;
  height:70px;
  width:50px;
  position:relative;
  top:300px;
  right:80px;
  border-radius:10px;
  border-top-left-radius:0;
  border-bottom-left-radius: 0;
  padding:10px;
  transition:0.5s ease all;
}

.container-outside {
  background:url(https://www.linenbeauty.com/sites/linenbeauty.com/files/styles/product_catalog/public/products/00832.jpg?itok=Hrgq8RNK);
  border:3px solid #34688b;
  border-radius:20px;
    margin-top:100px;
    margin-left:200px;
    padding:10px;
    width:900px;
    height:700px;
}

.buttons {
  white-space: pre;
}
.buttons button {
    border:0;
    background-color:white;
    font-size:20px;
    font-family:morningtea;
    margin-bottom:15px;
    border:2px dotted #301b00;
    border-radius:10px;
    width:90%;
    text-align:left;
    transition:0.5s ease all;
}
.buttons button::before {
  content:url('https://pixelbank.neocities.org/decome/hearts/1988.gif') ">";
  padding:5px;
  width:30px;
}
button:hover {
  letter-spacing:2px;
  background-color:#ebf8ff;
}

/*span {*/
/*  border:2px solid #301b00;*/
/*  font-size:12px;*/
/*  vertical-align:30%;*/
/*  padding:2px;*/
/*  border-radius:5px;*/
/*  color:rgb(255, 236, 211);*/
/*  background-color:#512e00;*/
/*}*/

.tabcontent {
  display: none;
}
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
  padding:20px;
  font-size:20px;
  overflow-y:scroll;
  height:550px;
}
h2 {
  font-family:morningtea;
  font-size:25px;
  margin-bottom:5px;
}
h2::before {
  content:url(https://pixelbank.neocities.org/emoticon/creatures/48.gif);
  margin-right:10px;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.chococatpen {
  transition:1s ease all;
   position:absolute;
    top:550px;
    left:1000px;
    
}





/*calendar*/
.whole-calendar {
  font-family: morningtea;
  margin-top:100px;
  height: 450px;
   border-width: 7px;
    border-style: solid;
    border-image: url("https://i.imgur.com/e748BeS.png") 6 fill round;
}

.calendar-container {
    background-color: white;
    width: 280px;        
    border-top:0;
    
}

.calendar-container header {
    display: flex;
    align-items: center;
    padding: 10px 15px 8px;     
    justify-content: space-between;
}

header .calendar-navigation {
    display: flex;
}

header .calendar-navigation span {
    height: 30px;              
    width: 30px;
    margin: 0 2px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 1.4rem;          
}

.calendar-navigation span:last-child {
    margin-right: -8px;
}

header .calendar-navigation span:hover {
    background-color:rgb(247, 251, 255);
}

header .calendar-current-date {
    font-weight: 500;
    font-size: 1.2rem;    
}

.calendar-body {
    padding: 10px;   
    padding-top:0;  
}

.calendar-body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
}

.calendar-body .calendar-dates {  
    width: 100%;
    padding:0;
}

.calendar-dates li {
    border:1px solid gray;
}

.calendar-body li {
    width: calc(100% / 7);
    line-height: 30px;          
    font-size: 15px;          
    color: black;         
    position: relative;
    z-index: 1;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    height:30px;
}

.calendar-body .calendar-weekdays li {
    cursor: default;
    font-weight: 500;
    font-size: 0.85rem;  
    border:1px double black;
    background-color:rgb(217, 236, 255);
    height:30px;
    line-height: 30px;
    
}
.calendar-weekdays {
  padding:0;
}

.calendar-dates li.inactive {
    color: rgb(148, 148, 148);
    cursor: default;
}

.calendar-dates li::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 30px;             
    height: 25px;
    transform: translate(-50%, -50%);
}

.calendar-dates li.active::before {
    content:url("https://pixelsafari.neocities.org/favicon/nature/snow13.gif");
    filter:opacity(50%);
    width: 20px;             
    height: 20px;
}

.calendar-dates li:not(.active):not(.highlight):not(.inactive):hover::before {
    background-color:rgb(247, 251, 255);
}
.calendar-picture {
  
    width:100%;
    height:100%;
    overflow:hidden;
    
    background-image:url(https://i.pinimg.com/1200x/ce/13/92/ce1392781c9fbdf625377f578e871455.jpg);
    background-size:cover;
    background-position: center;
}
.calendar-picture-outline {
background:white;
height:200px;
    width: 280px; 
    padding:10px;
    padding-bottom:0;
    border-bottom:0;
}