border: 8px solid white; 

* {
  cursor: url("/cursor.png"), auto !important;
}

@font-face {
font-family: "Asimov";
src: url('https://sunpop.neocities.org/fonts/Asimov.ttf') format("truetype");
}


body { 
background-image: url("/images/junk/shrines/yellowsubmarine/ysholes.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-color: #060606;

}

body:background-image {
  filter: brightness(50%);
}

.body1 {
  color: #fff;
display: flex;
margin: 10px 20%; 
flex-direction: column;
font-family: "Lucida Console", "Courier New", monospace;
line-height: 150%;
}


.container { 
background-color: #06060687; 
backdrop-filter: blur(1.5rem);
padding: 20px;
border: 10px groove darkred; 
border-radius: 5px;
transition: 3s;
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-evenly;
align-content:stretch;
gap: 10px;
line-height: 150%;
}

.container:hover {
  backdrop-filter: blur(2rem);
  border-color: gold;
}

h1, h2, h3 {
  color: orange;
  font-family: "Asimov";
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  color: gold;
  font-size: 1.25rem;
}

.clearcontainer { 
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-evenly;
align-content:stretch;
gap: 10px;
line-height: 150%;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.box1 {
  background-color: #003153;
  color: #fff;
  flex: 1;
  text-align: left;
  height:30vh;
  align-self: normal;
  overflow-y:scroll;
  padding: 0% 2.5%;
  width:95%;
  scrollbar-width: thick; 
  scrollbar-color: gold darkred; 
}
    
    .box1:-webkit-scrollbar {
      width: 12px; 
    }
    .box1:-webkit-scrollbar-thumb {
      background-color: yellow;
      border-radius: 6px; 
    }
    .box1:-webkit-scrollbar-track {
      background: darkred;
    }

    .box1:a:link {color: yellow;}
    .box1:a:visited {color: orange;}
    .box1:a:hover {color: gold;}
    .box1r:a:link {color: yellow;}
    .box1r:a:visited {color: orange;}
    .box1r:a:hover {color: gold;}

.box2 img {
  display: block;
  margin: auto;
  object-fit:contain;
  height: 30vh;
  width: auto;
}

ul {
  text-align: left;
  list-style: square;
}

.box2 {
  flex: 1;
  height:100%;
  align-self: normal;
}


.button {
    transition:.5s;
}

.button:hover {
  transform: scale(1.7);
}

.smallzoom {
    transition:.5s;
}

.smallzoom:hover {
  transform: scale(1.15);
}  

.spinny:hover {
  transform: rotate(360deg);
  transition: 1s
}

.linker {
  padding: 10px;
  border: 3px;
  border-color: #fff;
  transition: .5s;
  color: #000;
  text-decoration: none;
}
    .linker:a:visited {
      color: #000;
      text-decoration: none;
    }
    .linker:a:visited:hover {
      color: #fff;
    }
    .linker:hover {
        background-color: #e43f4099;
        color: #fff;
    }

.minimg {
  height:250px;
  width:auto;
  padding: 5px;
  }
  

.drawer {
  color: #000;
  border-radius: 10px; 
  border: 8px solid #52392a;
  background: #ff7d5b; 
  padding: 10px; 
  flex: 3;
  font-size: 1.3rem;
}






.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  font-size:large;
  }

 /* Size 721x721*/
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
  transition:.25s;
}

.grid a {
  position: relative;
  display: inline-block;
  transition: opacity 0.25s;
  color:#fff
}
.grid:a:visited {
  color: #fff;
  text-decoration: none;
}
.grid:a:visited:hover {
  color: #fff;
}

/*YELLOW SUB*/
#sub{
  width: 56px;
  height: 44px;
  position:fixed;
  background-image: url("/images/junk/shrines/yellowsubmarine/sub.png");
  z-index: 2;
  pointer-events: none;
}
  


/**{
  outline: 1px solid red !important;
}*/






@media screen and (max-width: 799px) {
  
.container { 
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

.box1 {
	width: calc(100% - 20px);
	float:none;
	padding:10px;

}

.box2 {
  width: calc(100% - 20px);
	float:none;
	padding:10px;
}

.butto { 
  background:    #22A878;
  border-radius: 1000px;
  box-shadow:    4px 4px #444444;
  padding:       20px 45px;
  color:         #ffffff;
  display:       inline-block;
  font:          normal bold 26px/1 "Lucida Console";
  text-align:    center;
  text-shadow:   1px 1px #000000;
}

.butto:a:link {
  text-decoration:none
}

.butto:hover {
  background: #197e5a;
  box-shadow: 0px 0px;
}











@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}