/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root{
  --main: #78866b;
  --outline: #4d5d53;
  --secondary: #738678;
  --accentg: #8f9779;
  --accentb: #738276;
  /*inset outlines a little bit from the boxes*/
}

body{
  color: whitesmoke;
  background-image: url("darkforest.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  cursor:url("/buttons/fairynoback.png"), auto;
}

section.grid {
	display: grid;
	margin: 50px 100px 20px 100px;
	padding: 5px;
	gap: 10px;
	grid-template: 
		"header header"
		"sidebar main"
		"footer footer"
		/1fr 2fr;
	scrollbar-gutter: auto;
	width: 70%;
}

section.other{
  width: 60%;
  display: grid;
	margin: auto;
	gap: 10px;
	grid-template:
	"header header"
	"main main"
	"footer footer";
	scrollbar-gutter: auto;
	
}

header { grid-area: header;
		background-color: var(--secondary);
		border-top: 2px solid var(--outline);
		text-align: center;
  	border-radius: 5px;}

navbar {
  background-color: var(--secondary);
  text-align: center;
  border-bottom: 2px solid var(--outline);
}

  	
#homelink {
  display: flex;
  justify-content: right;
}
  		
aside { grid-area: sidebar;
	background-color: var(--main);
		border: 2px solid var(--outline);
  	border-radius: 5px;
	  text-align: center;
	  height: 775px;
	  overflow-y: auto;
	  align-items: center;
		scrollbar-width: none;
  }
main { grid-area: main; background-color: var(--main);
		border: 2px solid var(--outline);
  	border-radius: 5px;
		text-align: center;
		height: 775px;
		overflow-y: auto;
		scrollbar-width: none;
		padding: 15px;
}

footer { grid-area: footer; 
  background-color: var(--secondary);
	border: 2px solid var(--outline);
  border-radius: 5px; 
  text-align: center;
  padding: 10px;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/*fonts and text decorators*/

h1{
  font-family: american-scribe, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px}

p{
  font-family: black-beard, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

p2{
  font-family: black-beard, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

h3{
  font-family: american-scribe, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px}

a{
  color: var(--gray-brown);
  font-size: 18px;
  font-family: antiquarian-scribe, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
}

footer a{
  color:black;
}

a:hover{
  text-decoration: underline	
}

h2{
  font-family: antiquarian-scribe, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
}

main inner{
  padding: 10px;
}

inner div#wrapper {
  display: grid;
  margin: auto;
  grid-template:
  "topleft topright";
}

inner div#projects {
  display: block;
  padding: 10px;
}

.bordered {
  border: 4px dashed var(--outline);
}
/*for various pages*/
.containerbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.archivebody {
  gap: 10px;
  scrollbar-gutter: auto;
  padding: 5px;
  margin: 50px 100px 20px 100px;
}
.constructionimage{
  background-size: 75% 75%;
}
.elementwidg2 iframe{
  max-height: 70px;
}

.elementwidg a{
  font-size: 12px;
}

.gallerytext{
  position: sticky;
}

.gallerycontainer{
  display: flex;
  flex-wrap: wrap;
}

.gallerycontainer div {
  width: 25%;
  margin: 5px;
  border: 5px solid;
  box-sizing: border-box;
  width: calc(25% - 10px);
  position: relative;
}

.gallerycontainer div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 transition: transform 0.5s ease;
}

.gallerycontainer div:hover img{
  transform: scale(1.35);
}

.textsticker{
  padding: 5px;
  position: fixed;
  bottom: 20px;
  border: 2px solid var(--outline);
  background-color: var(--main);
}

.aboutcontainerbox {
  row-gap: 4px;
  padding: 8px;
}

.aboutcontainer{
  display:block ;
  padding: 8px;
  
}

.aboutcontainerbox img{
  width : 75%;
}

.aboutcontainer div{
  border: 4px dashed var(--outline);
  border-radius: 8px;
  width: 40%;
  padding: 3px;
  scrollbar-width: none;
}


.aboutcontainer div img{
  width: 75%;
}


.archive {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  justify-content: center;
  margin: 5px;
}

.archive div{
  padding: 15px;
}

.archive div.blinkybuttonspace {
  width: 100%;
  display: flex;
  margin: 5px;
  justify-content: center;
}

.archive div.gifspace {
  width: 100%;
  display: flex;
  margin: 5px;
  justify-content: center;
}

.archive div.textwrapper{
  width: 100%;
}
.archive iframe{
  width: 500px;
  height: 250px;
}

.archive div.caption {
  padding: 5px;
  width: 500px;
}


.stickertr{
  position: fixed;
  top: 40px;
  left: 40px;
}

.elementwidg{
	border-top: 1px solid var(--outline);
	border-bottom: 1px solid var(--outline);
	text-align: center;
}
.elementwidg2{
  border-top: 1px solid var(--outline);
	border-bottom: 1px solid var(--main);
  max-height: 100px;
  position: relative;
}

.buttonwidg{
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--outline);
	border-bottom: 2px solid var(--outline);
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.stamps{
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  row-gap: 5px;
  column-gap: 5px;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  text-align: center;
  border-top: 2px solid var(--outline);
	border-bottom: 2px solid var(--outline);
  justify-content: space-evenly;
}

.stamps img{
  height:56px;
  width: 99px;
}

.buttons1{
  display: flex;
  flex-wrap: wrap;
  padding-right: 5px;
  padding-left: 5px;
  align-items: center;
  text-align: center;
  row-gap: 5px;
  column-gap: 5px;
  justify-content: space-evenly;
}

.buttons1 img{
  height: 15px;
  width: 80px;
}

.buttons2{
  display: flex;
  flex-wrap: wrap;
  padding-right: 5px;
  padding-left: 5px;
  align-items: center;
  text-align: center;
  row-gap: 5px;
  column-gap: 5px;
  justify-content: space-evenly;
}

.buttons2 img{
  height: 31px;
  width: 88px;
}

.blinkies{
  display: flex;
  flex-wrap: wrap;
  padding-right: 5px;
  padding-left: 5px;
  align-items: center;
  text-align: center;
  row-gap: 5px;
  column-gap: 5px;
  justify-content: space-evenly;
}

.blinkies img {
  height: 20px;
  width: 150px;
}

.webrings{
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px;
  align-items: center;
  row-gap: 5px;
  column-gap: 5px;
  justify-content: space-evenly;
}

.webrings div{
  padding: 10px;
  width: 35%;
  align-items: center;
  border: 2px dashed var(--outline);
}