*, *::before, *::after {
    box-sizing: border-box;
  }
html { cursor: url('freakhead.png'), default;}
body {
 
  font-size: 16px;
  background-image: url(backgroundmaybe.webp);
  color: rgb(0, 114, 134);
  margin: 0;
  background-repeat: round;
   font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  font-style: normal;
   
}
.ocstamps {
  display: flex;
  justify-content: center;
}
.ocstamps img{
  padding: 1px;
   width: auto;
}
.backgroundbox {
  background-image: linear-gradient(to bottom, #aad3d8, #dfbec3); 
  width: 53%;
 border-radius: 10PX;
  margin: auto;
  margin-top: 50px;
  outline-style: solid;
  outline-color: white;
  outline-width: 3px;
}

.content-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1em 0;
  box-sizing: border-box;
}

header {
  background: transparent;
  padding: 1em;
  text-align: center;
}

nav {
  background-image: linear-gradient(to bottom, #f8fcd5, oklch(94.96% 0.12715 113.389), #dde874, rgb(221, 232, 116)); 
  text-align: center;
  width: 75%;
  margin: auto;
  padding: 0.5em;
  border-radius: 20px;
  border-style: solid;
  border-width: 3px;
  border-color: white;
  
}


footer {
  background: transparent;
  padding: 1em;
  text-align: center;
  
}

.layout {
  display: flex;
  gap: 1em;
  box-sizing: border-box;
  justify-content: center;  /* <-- center the columns horizontally */
  max-width: 100%;          /* ensure it fits inside .content-wrap */
}


.left  { flex: 0 0 20%; 
  
 border-radius: 10px;
  display: flex;
flex-direction: column;
 
  
}

.main  { flex: 0 0 60%;
  background-image: 
  linear-gradient(to bottom right, #b0e0e6, rgb(90, 192, 206));
 border-radius: 10px;
  justify-content: center;
  padding: 10px;
 overflow-y: auto;
  box-shadow: #50b9c7 0px -23px 25px 0px inset, 
  #478cc5 0px -36px 30px 0px inset, 
  #478cc5 0px 0px 0px;
  border-style: solid;
  border-width: 3px;
  border-color: white;

}
.right { flex: 0 0 20%;  }

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .left, .main, .right {
    flex: 1 1 100%;
  }
}
.rightboxouter1 {
  background-image: linear-gradient(to bottom right, #b0e0e6, #5ac0ce);
  outline: solid;
  outline-width: 3px;
  outline-color: white;
  width: 200px;
  height: 200px;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rightboxinside1 {
  
  width: 190px;
  height: 190px;
  border-radius: 10px;
  overflow-y: auto;
  padding: 5px;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ffd6dc 10px,
    #ffd6dc 20px
  ),
  linear-gradient(
    to bottom,
    #ffd6dc,
    #ffb6c1
  );
  box-shadow: #ffb6c1 0px -23px 25px 0px inset, 
  #f1a0c6 0px -36px 30px 0px inset, 
  #f1a0c6 0px 0px 0px;
}
.rightboxouter2 {
  background-image: linear-gradient(to bottom right, #b0e0e6, #5ac0ce);
  width: 200px;
  height: 270px;
  margin: auto;
  
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: solid;
  outline-width: 3px;
  outline-color: white;
 
}
.rightboxinside2 {

  width: 190px;
  height: 260px;
  border-radius: 10px;
  overflow-y: auto;
  padding: 5px;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(255, 214, 220) 10px,
    #ffd6dc 20px
  ),
  linear-gradient(
    to bottom,
    #ffd6dc,
    #ffb6c1
  );
  box-shadow: #ffb6c1 0px -23px 25px 0px inset, 
  #f1a0c6 0px -36px 30px 0px inset, 
  #f1a0c6 0px 0px 0px;
  flex-direction: column;

}
.main-button{
 background-image: linear-gradient(to bottom, #ffe6ea, #f1a0c6); 
 border: solid #ffffff;
 border-radius: 10px;
font-size: 70%;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: "Michroma", sans-serif;
  font-style: normal;
}
button a:link {
  color: #5ac0ce;
}

button a:visited {
  color: #dde874;
}
button a:hover {
  color: #f08897;
}
a:link {
  color: #007286;
}
a:visited {
  color: #55a1df;
}


.left-inside-top  {
 background-image: linear-gradient(to bottom ,white, #b0e0e6, #b0e0e6, #5ac0ce, #5ac0ce);
  outline: solid;
  
  outline-width: 3px;
  outline-color: white;
  width: 200px;
  height: 75px;
 
  margin-bottom: 10px;
  border-radius: 15px;
   align-items: center;
  box-shadow: #50b9c7 0px -23px 25px 0px inset, 
  #478cc5 0px -36px 30px 0px inset, 
  #478cc5 0px 0px 0px;
 
}
.left-inside-bottom  {
  background-image: linear-gradient(to bottom right, #b0e0e6, #5ac0ce);
  outline: solid;
  outline-width: 3px;
  outline-color: white;
  width: 200px;
  height: 400px;
  box-shadow: #50b9c7 0px -23px 25px 0px inset, 
  #478cc5 0px -36px 30px 0px inset, 
  #478cc5 0px 0px 0px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  padding-top: 25%;
  align-items: center;
}
.container {
  display: flex;
   margin: 6px;
 
 
}

.leftboximage {
  margin-right: 6px;
  height: 60px;
  border-radius: 4px;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
  align-items: center
}
.colorfulp {
  padding: 5px;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ffd6dc 10px,
    #ffd6dc 20px
  ),
  linear-gradient(
    to bottom,
    #ffd6dc,
    #ffb6c1
  );
  box-shadow: #ffb6c1 0px -23px 25px 0px inset, 
  #f1a0c6 0px -36px 30px 0px inset, 
  #f1a0c6 0px 0px 0px;
  border-radius: 10px;
  outline-style: solid;
  outline-color: white;
  outline-width: 3px;
}

#statuscafe {
    padding: .5em;
    
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
#statuscafe a:hover {
  color: #f08897;
}
#statuscafe a:link {
  color: #007286;
}

#statuscafe a:visited {
  color: #478cc5;
}
hr {
  width: 90%;
  color: #007286;
}