/* Cursor */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  cursor: url('/img/applecursor.png'), default;
}

@font-face {
  font-family: highfont;
  src: url(/Journal/high/img/PleaturesDemoOutline-2O858.otf);
}

@font-face {
  font-family: highfont1;
  src: url(PleaturesDemoOutline-2O858.otf);
}

@font-face {       
font-family: 'BPnoScript';
src: url(https://humantooth.neocities.org/fonts/BPnoScript.woff) format('woff');
font-weight:normal; }


/* Cursor hover effects */
a:hover img,
button:hover,
.navtext:hover,
.imgtxt:hover,
.month-list a:hover {
  cursor: url('/img/applecursor2.png') 16 10, pointer !important;
}

/* Logo cursor */
.logo-container {
  cursor: url('/img/applecursor.png'), default;
}

.logo-container a,
.logo-container a:hover {
  cursor: url('/img/applecursor.png'), default !important;
}


/* Base styling */
html, body {
  font-family:'BPnoScript', sans-serif;
  font-size: 25px;
  background: url("img/highback.jpeg") black;
  cursor: url('/img/applecursor.png') 0 0, auto !important;
}

/* Header */
header {
    background-color:  #000000;
    border-radius: 20px;
    padding:20px;
    margin-bottom: 20px;
    box-shadow: 10px 10px 9px  rgb(42, 236, 32);
    border-right: solid #fdfffe;
    border-bottom: solid #fdfffe;
    padding:20px;
}

header img {
max-width: 100px;
height: auto;
display: block;
margin: 0 auto;
min-width: 80%;
filter: invert(100%);
}



nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 100%; 

}

nav a {
    padding: 8px 15px;
    border-radius: 20px; 
    text-decoration: none;
    color: black;
     background-color: #cdecd0;
     
}

nav a:hover{
  animation: wobble 1s ease-in-out 1;
  background-color:  rgb(42, 236, 32);
  color:#cdecd0;
}

.nav-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%;
gap:1.5rem;
align-items: center; /* green border */
}

.nav-links li {
  position: relative;
  display: flex; 
  border-radius: 20px;
  padding:0;


}


.nav-links a {
  text-decoration: none;
  font-size: 17px;
  width: max-content;
}


.dropdown-content {
  display: none;
  position: absolute;
  min-width: 0;
  box-sizing: border-box;
  top: 100%;
  z-index: 999;
  right: 0;
  padding: 0;
  margin: 0 3px;
/* green border */
}

.dropdown-content {
  display: none;
  padding: 0;
  box-sizing: border-box;
  align-content: end;
}



.dropdown-content li a {
  padding: 8px 15px;
  text-align: right; /* prevent wrapping */
  display: block;
  width: max-content;
  box-sizing: border-box;
  margin: 3px 0;
  
}

.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* right-align the dropdown content */
}

.dropdown-content li a:hover {
  background-color:  rgb(42, 236, 32);;
}

/* Page wrapper */
.page-wrapper {
  max-width: 1200px;
  padding:20px 20px;
  margin: 0 auto;
  position:relative;
}

/* Logo */
.logo-container .logo {
  max-height: 95px;
  display: block;
  margin: 0 auto;
}

.logo-container {
  max-width: 100%;
  width: 100%;
  text-align:center;
}

.logo {
  width: 100%;
  height: auto;
  max-width: 700px;
  margin: 0 auto; }


/* Navigation bar */
.navtop {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
  flex-wrap: wrap;
}

/* Navigation links */
.imgtxt {
  text-decoration: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.imgtxt:hover {
  animation: wobble 1s ease-in-out 1;
}

.navtext {
  background-color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 20px;
  transition: background-color 0.3s ease;
}

.navtext:hover {
  background-color: rgb(42, 236, 32);
  color: white
}

.title {
  font-family: highfont;
  text-align: center;
}

.intro {
  text-align: center;
}

.entry1 {
    background-color: hsla(0, 0%, 0%, 0.2);
  border-radius: 20px;
  border:rgb(42, 236, 32) solid 2px;
  margin: 20px auto;
  padding:20px;
  position: relative;
}

.entry2 {
  background-color: rgb(73, 236, 32);
  border-radius:20px;
  border: black solid 2px;
  margin: 20px auto;
  padding:20px;
  color: black;
}



.entry2 a {
  color: black;
  text-decoration:  wavy underline;
  font-weight: bold;
  font-size: smaller;
display: block;       /* makes it behave like a box */
  text-align: center;   /* centers text inside */
  margin: 1em auto;     /* adds spacing & centers block if needed */
  width: fit-content;  
}


 .joint{
  position:absolute;
  width: 150px;
  z-index:10; 
  transform: rotate(20deg);
  right: -50px;
  top: 175px;
  transform: rotate(20deg);}

  .mara {
    position: absolute;
    width: 150px;
    height:auto;
    top: 170px;
    right: 150px;
    z-index: 11;
    transform: rotate(-10deg);
  }

.time {
  position: absolute;
  width:200px;
  top: 190px;
  left: -10px;
  z-index: 10;
  transform: rotate(-15deg);
}

.twobox { 
  display: flex;
  gap: 20px;
  margin: 20px auto;
  width: 100%;
}

/* Left column: loo roll */
.ply {
  flex: 0 0 33%;   /* exactly 1/3 of the width */
  max-width: 33%;
  height: auto;
}

/* Right column: messages box */
.messages {
  flex: 1;   /* take the rest */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
  justify-content: center; 
}

/* Images inside messages */
.messages img {
  flex: 0 1 calc(33% - 10px);  /* 3 per row inside messages */
  max-width: calc(33% - 10px);
  height: auto;
  border: outset;
  height:250px;
}



.spoon {
  height: 300px;
  padding:0;
  float:left;
}

.entry1 p {
  color: white;
}

.entry1 h2 {
    color: white;
}

.banner {
  min-width: 100%;
  margin: 20px auto;
}

@keyframes wobble {
  16.65% { transform: skew(-12deg); }
  33.3%  { transform: skew(10deg); }
  49.95% { transform: skew(-6deg); }
  66.6%  { transform: skew(4deg); }
  83.25% { transform: skew(-2deg); }
  100%   { transform: skew(0); }
}