/* Abandon all faith yee who enter here*/




h1, h2, h4, p{
  /*color:rgba(181, 168, 210,1); */
  color: white;
  text-align: center;
}

a,b{
  color: white;
}
/* font sizes, letter spacing and gap between lines, the last dont seen to need a unit of mesurement*/
p, a, li{
  font-size: 17px;
  letter-spacing: 1px;
  line-height:1.5;
  }
  
.menu p{
 font-size: 18px; 
  }

body{
  background-color:black;
  background-image: url("https://file.garden/aEDhQbOrExy6D54j/art/asset/Website_bg.png");
   background-repeat: no-repeat;
   background-size:cover;
}


header{
  background-color: rgb(22, 18, 42);
  border: 5px solid rgb(87, 80, 204);
  padding: 30px;
  max-width: 850px;
  margin: auto;
  border-radius:10px;
}





/* pls work fonts  format generated by fontsquirrel*/
@font-face {
    font-family: 'faculty glyphic';
    src: url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/facultyglyphic-regular-webfont.woff2') format('woff2'),
         url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/facultyglyphic-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gothica';
    src: url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-boldoblique-webfont.woff2') format('woff2'),
         url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-boldoblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gothica';
    src: url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-bookoblique-webfont.woff2') format('woff2'),
         url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-bookoblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gothica';
    src: url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-bold-webfont.woff2') format('woff2'),
         url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gothica';
    src: url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-book-webfont.woff2') format('woff2'),
         url('https://file.garden/aEDhQbOrExy6D54j/art/asset/Fonts/webfontkit-20250629-155549/gothica-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* For headers n the like */
.label{
  background-color:rgb(22, 18, 42);
  padding: 3px;
  border: 3px solid rgb(36, 154, 215);
  border-radius:10px;
} 


 /* the idea is for the unordered list to look like a older window kinda, withicons are for inky bullets instead of normal*/
.withicons{
  list-style-image: url("https://file.garden/aEDhQbOrExy6D54j/art/asset/Inky_emoji.png");
  margin: 10px;
  color:white;
  
  }
  
  /*.disclaim refers to the disclaimer btw*/
  .disclaim li{
    color: white;
  }

  /* for middle div elements */
  .main{
  border-top: 20px solid rgb(87, 80, 204);
  border-right: 3px solid rgb(87, 80, 204);
  border-bottom: 3px solid rgb(87, 80, 204);
  border-left: 3px solid rgb(87, 80, 204);
  padding: 15px;
  background: rgba(22, 18, 42,0.5) no-repeat center;
   border-radius:10px;
  /*Should make the window a specific size and the auto centers it*/
  max-width: 1050px;
  margin: auto;
  }

/* Hopefully this will set up a responsive layout better than float bc im using flex box the game plan is to create a new flex property and add it to main (everything in it will inherit the flex attributes */
.flex{
  display:flex;
  justify-content: space-evenly;
  
}

/*same as flex but for rows AND columns instead of just one or the other chances are the entire site moves to here for web eventually and on mobile switch back? if possible */
.grid{
  display:grid;
   grid-template-columns: repeat(auto-fit, 250px); /*making it responsive */
   gap: 4px 6px;
    justify-content: space-evenly;
 
 
  }
  

.inky{
margin: auto
}


.sideright{
position: absolute;
top:220px;
right: 50px;
width:200px;
 
  }
  
  .sideleft{
  position: absolute;
  top:220px;
  left: 50px;
  width:200px;
  
  }


 /* for stuff on the  inside the main*/
.content{
  padding: 0px 10px 0px 10px;
  margin: 3px 2px 0px 2px ;
  border-top: 20px solid rgb(87, 80, 204);
  border-right: 3px solid rgb(87, 80, 204);
  border-bottom: 3px solid rgb(87, 80, 204);
  border-left: 3px solid rgb(87, 80, 204);
  background: rgb(56, 26, 119) no-repeat center;
   border-radius:10px;
  }
  
  .menu {
    float: left;
    width: 20.33%;
  margin: 10px;
    background: rgb(56, 26, 119) no-repeat center;
    border-radius: 20px 10px;
  }
  .menu a{
     text-align: center;
  }
  
  
  .box, .codetext{
   border-top: 3px solid rgb(87, 80, 204);
  border-right: 3px solid rgb(87, 80, 204);
  border-bottom: 3px solid rgb(87, 80, 204);
  border-left: 3px solid rgb(87, 80, 204);
  padding: 0px 5px 0px 5px;
  background: rgba(22, 18, 42,0.5) no-repeat center;
   border-radius:10px;
  }
  
  
  /* this is were the imgs go, each galley gets 1 img */
  .gallery{
   margin: auto;
  border: 2px solid #ccc;
   border-radius:10px;
  }
  
  div.gallery{
   width: 150px;
  }
  
  
   div.gallery img {
  width: 100%;
  height: auto;
  border-radius:6px;
}

/* changes color on mouse hover */
.gallery:hover{
  border: 5px solid rgb(36, 154, 215);
}
  
  
  .splitter{
    display:block;
   margin-left: auto;
  margin-right: auto;
    }
  
  /* rest of the links should be affected by this, rn just text color */
  a:link, a:visited{
    color: white;
    text-decoration: none;
  }
  
  a:hover , a:active {
    color:white;
    text-decoration: none;
    border-color:rgb(36, 154, 215);
  
  }

  
  /*Makes links look like buttons, this one is for default and visited links, also seems like i can make multiple elements do the same thing? with a comma. also it shhhoouulld only work for the navbar....hopefully */
  
  .buttonlink:link, .buttonlink:visited {
  background-color: rgb(87, 80, 204);
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  }
  
  
  .buttonlink:hover, .buttonlink:active, .menu :hover, .menu :active {
  background-color: rgb(22, 18, 42);
  border-radius: 5px;
  color:white;
  text-decoration: none;
  }
 
  
   /*making the shit small screen friendly....hopefully*/
  @media only screen and (max-width: 950px) {
  
  .flex{
    flex-wrap: wrap;
    overflow: auto;
    }
  
  .grid{
   display:flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
    overflow: auto;
    }
  
  .extra{
    display:none;
    }
  }
  .gallery{
    width: 59.99999%;
    margin: auto;
     float: none;
   overflow-wrap: break-word;
  }
  
 
  
  .main{
   max-width: 900px;
   
  }
  .content, .menu{
    width: 90%;
    overflow: hidden;
    }