/* hello! i am hohi. you're seeing through my code! sorry it is so messy. take what you want/need for anything (please also try to understand its function. it is fun!). - xoxo */

/* crt by Alec Clownes, refined by Oudkee on neocities with a few modifications by me due to photosensitivity. */

  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 1;
  background-size: 100% 2px, 36px 100%;
  pointer-events: none;
  opacity: 36%;
}


html {
    background-color: #fafbff;
    font-family: ms gothic;
    font-size: 9.2px;
    filter: grayscale(0.3);
    overflow: hidden;
    overflow-x: hidden;
}

* {
	 cursor: url(https://file.garden/ZsE6xZuMU1g5MIQQ/neocities/cursor/aero-mini-white-arrow.cur), default;
	}
	 
	*:active {
	 cursor: url(https://file.garden/ZsE6xZuMU1g5MIQQ/neocities/cursor/aero-mini-white-link.cur), default;
	}

a:hover {
    cursor: url(https://file.garden/ZsE6xZuMU1g5MIQQ/neocities/cursor/aero-mini-white-link.cur), default;
}


a {
    text-decoration: none;
}

a:visited {
  text-decoration: none;
}

.marker {
  background: #ffc7c7;
  background: -webkit-linear-gradient(rgba(240,231,155,0) 50%, #ffc7c7 0%);
  background: linear-gradient(rgba(240,231,155,0) 50%, #ffc7c7 0%);
  margin: 0 3px;
    padding: 1px 5px;
}

.dashed-underline-text {
  text-decoration: underline dashed #f09797 1px;
}

.dotted-hr {
  border: none;
  border-bottom: dotted 2px;
}

textarea {
  background: #fff;
  border: 1px dashed;
  margin: 3px 0;
  width: 172px;
  height: 56px;
  font-family: ms gothic;
  font-size: 9px;
}

.blink_text {-webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1);
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1);
    
    animation-name: blinker;
    animation-duration: 1.6s;
    animation-iteration-count:infinite;
    animation-timing-function: steps(1);
}

@-moz-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
}

@media only screen and (max-width: 768px) {
  .html {
    width: auto;
    height: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.backgr {
  background-image: url(images/background/2000.jpg);
  left: 460px;
  top: -16px;
  position: fixed;
  height: 1090px;
  width: 1230px;
  background-size: 960px;
  background-repeat: no-repeat;
  z-index: -1;
  background-position: 130px -1px;
}

.nevi {
  background-image: url(images/2511201345.png);
  left: 460px;
  top: -16px;
  position: fixed;
  height: 1090px;
  width: 1230px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  background-position: 50px -1px;
}

.box {
    max-width: 660px;
    min-height: 790px;
    margin: 0px;
    padding: 1px;
    background-color: transparent;
}


.header {
    height: 150px;
    min-height: 150px;
    border: 1.5px solid #808080;
    border-radius: 70px 4px 0px 0px;
    background-image: url(images/background/stripes.png);
    box-shadow: inset 0px -5px 5px -5px #dadada, 0px 0px 5px 0px #dadada;
}

#headerimg {
    margin: 3px;
    height: 137px;
    border-style: double;
    border-radius: 66px 4px 0px 0px;
    background-image: url(images/background/reflection.jpg);
    background-size: 690px;
    background-repeat: no-repeat;
    background-position: -23px -66px;
}

#sigma {
    font-family: 'protomo';
    padding: 36px;
    font-size: 30px;
    color: white;
    filter: drop-shadow(0.5px 0.5px 0 black) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px 1px black) drop-shadow(0.5px 0.5px 1px white) drop-shadow(0.5px 0.5px 1px white);
}

#smalldesc {
    margin-top: -43px;
    margin-left: 33px;
    font-family: 'doto';
    font-size: 20px;
    text-shadow: 1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;
    filter: drop-shadow(0.5px 0.5px 0 white) drop-shadow(-0.5px 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0.5px white) drop-shadow(0 0.5px 1px white) drop-shadow(0.5px 0.5px 1px white) drop-shadow(0.5px 0.5px 1px white);
}

#menu{
background:#666;
line-height:1;
border: 1.5px solid #808080;
box-shadow: inset 0px -5px 5px -5px #dadada, 0px 0px 5px 0px #dadada;
}
nav li{
display:inline-block;
position:relative;
height:1em;line-height:1em;
}
nav li a,nav li span{
color:#fff;
display:inline-block;
padding:0 5px;
text-decoration:none;
text-align: left;
}
nav li a:hover,nav li span:hover{
background:rgba(102,102,102,.6);
transition:.2s;
}
nav li+li:before{
content:"│"
}
.sub-menu{
background:rgba(0,0,0,.8);
position:absolute;
width:90px;
z-index:20
}
.sub-menu li{
display:block;
visibility:hidden;
overflow:hidden;
height:0;
width:100%
}
.sub-menu li:before{
content:none
}
.sub-menu li a{
display:block
}
nav li:hover .sub-menu li{
visibility:visible;
overflow:visible;
height:3em;line-height:3em;
transition: .2s
}
#open{display:none}

.boxes {
    max-width: 660px;
    height: 523px;
    overflow: auto;
    scrollbar-width: thin;
    margin: 0px;
    background-color: transparent;
    display: grid;
    grid-template-columns: minmax;
    grid-gap: 1px;
    border: 1.5px solid #808080;
    padding: 3px;
    background-image: url(images/background/lamp_post.jpg);
    background-size: 766px;
    background-repeat: no-repeat;
    background-position: 59% 59%;
    box-shadow: inset 0px -5px 5px -5px #dadada, 0px 0px 5px 0px #dadada;
}

@media only screen and (max-width: 768px) {
  .boxes {
    width: auto;
    height: 760px;
    -webkit-overflow-scrolling: touch;
  }
}

.moreboxes {
    grid-template-columns: minmax;
    height: 820px;
}

#intro {
    margin-bottom: 2px;
    grid-row: 1 / 1;
    grid-column: 1 / 3;
    max-width: 450px;
    max-height: 150px;
    border-style: double;
    padding: 3px;
    scrollbar-width: thin;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
}

#introboxp1 {
    display: flex;
}

#introboxp1 img {
  width: 30px;
  height: 30px;
  display: block;
  margin: 2px;
  border-style: dotted;
  border-width: 1px;
}

#introboxp1 p {
  width: auto;
  margin: 0px 3px;
}

.minibox { 
    border: 0px;
    background: linear-gradient(-90deg,rgb(221, 220, 218) 0%,rgb(50, 134, 208) 100%);
    text-shadow: 1px 1px 1px #ffffff,-1px 1px 1px #ffffff,1px -1px 1px #ffffff,-1px -1px 1px #ffffff;
    font-size: 13px;
    color: #000;
    font-family: 'protomo';
    justify-content: space-between;
    display: flex;
    }

#introbox {
    margin-top: 10px;
    max-width: 450px;
    height: 123px;
    overflow-y: scroll;
}

#important {
    border-style: double;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    padding: 3px;
}

.evenmoreboxes {
    display: grid;
    gap: 0.1rem;
}


#ocmonth {
    grid-row: 2 / 2;
    grid-column: 1 / 2;
    border-style: double;
    width: 156px;
    height: 213px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    padding: 3px;
    justify-content: center;
    text-align: center;
}

.charicon {
  width: 115px;
  height: 115px;
  border: 2px dotted #765533;
  border-radius: 2px;
  margin: 8px;
}

#ocname {
    font-family: 'sixtyfour convergence';
}


#ocdesc {
    height: 37px;
    overflow: auto;
    scrollbar-width: thin;
    padding: 3px;
    border-style: dotted;
    border-width: 2px;
}

#news {
    grid-row: 2 / 2;
    grid-column: 100 / 2;
    border-style: double;
    padding: 3px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    display: inline-block;
    margin-left: 1px;
}

#newsletter {
    height: 192px;
    overflow: auto; 
    scrollbar-width: thin;
    margin-top: 3px;
}


#current {
    border: dotted 2px;
    padding: 3px;
    margin-bottom: 6px;
    height: 36px;
    overflow: auto;
    scrollbar-width: thin;
}

#diffont {
    display: inline;
    font-family: 'sixtyfour convergence';
}

#note {
    border-style: double;
    padding: 3px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    height: 100px;
    overflow: hidden;
    margin-top: 2px;
}

#considerations {
    height: 80px;
    margin-top: 3px;
    overflow: auto;
}

#bullet {
    margin-bottom: -0.4px;
}

#etc {
    grid-row: 1 / 3;
    grid-column: 3 / 3;
    width: 190px;
    overflow-y: scroll;
    scrollbar-width: thin;
}

#card {
    border-style: double;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    padding: 3px;
    text-align: center;
    height: 210px;
}


#username {
    font-family: 'doto';
    font-size: 20px;
    text-shadow: 1px 1px 1px #ffffff,-1px 1px 1px #ffffff,1px -1px 1px #ffffff,-1px -1px 1px #ffffff;
}


.pfp {
  width: 145px;
  height: 145px;
  border: 2px dotted #765533;
  border-radius: 2px;
}

    
    #iconbox:hover #icon {
  animation-name: rotateDiv;
  transform-origin: 0 100%;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  z-index: 200;
}

@keyframes rotateDiv {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(240deg);}
  20% {transform: rotate(50deg);}
  30% {transform: rotate(200deg);}
  40% {transform: rotate(100deg);}
  50% {transform: rotate(160deg);}
  65% {transform: rotate(120deg);}
  80% {transform: rotate(140deg);}
  100% {transform: rotate(135deg);}
}

#webmasterdesc {
    margin-top: 6px
}

#mybuttons {
    border-style: double;
    padding: 3px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    height: 118px;
    margin-top: 2px;
}

#textbutton {
    justify-content: center;
    text-align: center;
}

#neighborsywebz {
    border-style: double;
    padding: 3px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    text-align: center;
    margin-top: 2px;
    margin-bottom: 1.3px;
}

#webmarquee {
    margin-top: 3px;
}

#to-do {
    border-style: double;
    padding: 3px;
    background-color: rgba(249, 244, 245, 0.3);
    backdrop-filter: blur(10px);
    height: 86px;
    margin-top: 1px;
}

#list {
    padding: 3px;
    height: 63px;
}