/* General */

@font-face {
    font-family: "Handjet";
    src: url("Fonts/Handjet/static/Handjet-Regular.ttf");
}

@font-face {
    font-family: "Victor Mono", monospace;
    src: url("Fonts/Victor_Mono/static/VictorMono-ExtraLight.ttf") format("Extra Light"), 
          url("Fonts/Victor_Mono/static/VictorMono-Regular.ttf") format("Regular"),
          url("Fonts/Victor_Mono/static/VictorMono-Medium.ttf") format("Medium"),
          url("Fonts/Victor_Mono/static/VictorMono-SemiBold.ttf") format("Semibold"),
          url("Fonts/Victor_Mono/static/VictorMono-Bold.ttf") format(Bold); 
}

body {
    margin-left: 50px;
    margin-right: 50px;
    background-image: url('backgrounds/stars3.gif');
}

h1 {
    font-family: "Handjet";
}

h3 {
    text-align: center;
    color: rgb(0, 244, 219);
    background-color: rgb(100, 81, 245);
    margin-left: 10px; 
    margin-right: 10px;
    font-family: "Victor Mono", monospace;
    font-size: 25px;
    border: 1px solid;
    border-radius: 15px;
    border-color: rgb(0, 244, 219);
    padding: 8px;
}

h2 {
    margin: 25px;
    font-family: "Victor Mono", monospace;
    font-size: 23px;
}

p {
    margin: 30px;
    font-family: "Victor Mono", monospace;
    font-weight: 400;
    font-size: 20px;
}

li {
    font-family: "Victor Mono", monospace;
    font-size: 20px;
    margin-left: 30px;
    margin-right: 25px;
    list-style-image: url('./blinkies/phone.gif');
}

button {
    border: solid;
    border-radius: 20px;
    border-color: rgb(0, 244, 219);
    padding: 10px;
    margin: 5px;
    background-color: blueviolet;
    font-family: "Victor Mono", monospace;
    font-size: 13px;
    color: blanchedalmond;
    transition: 0.2s ease-out;
}

button:hover {
  color: rgb(0, 244, 219);
  background: rgb(193, 126, 255);
}

a {
  color: rgb(0, 244, 219);
  transition: 0.3s ease-out;
  text-decoration: none;
}

a:hover {
    color: blanchedalmond;
}

/* Top Navigation */

.navbar {
margin: auto;
margin-bottom: 15px;
width: 900px;
background-color: rgb(156, 147, 254);
text-align: center;
font-family: "Victor Mono", monospace;
font-size: 25px;
border-radius: 30px;
padding: -16px;
}


#navul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
    overflow: hidden;
    display: inline-block;
    padding: 16px;
    color: white;
}

/* Home Page Grid Containers */

.grid-container {
    display: grid;
    gap: 1em;
    grid-template-areas: 
    "box-1 box-2 box-2"
    "box-3 box-2 box-2"
    "box-4 box-4 box-4"
    "box-5 box-6 box-6";
}

.grid-container-2 {
    display: grid;
    gap: 1em;
    grid-template-areas: 
    "box-7 box-8 box-8";
}

.grid-container-3 {
    display: grid;
    gap: 1em;
    grid-template-areas: 
   "box-9 box-10 box-10" ;
}

.box {
    background-color: rgb(156, 147, 254);
    border-radius: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    
}

.box2 {
    background-color: rgb(156, 147, 254);
    border-radius: 15px;
    margin-top: 25px;
    margin-bottom: 25px;

}

.box3 {
 background-color: rgb(156, 147, 254);
    border-radius: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
}


/* Link box */

#linkli {
    list-style: none;
    text-align: center;
    padding: 7px;
    margin-top: -20px;
    font-family: "Victor Mono", monospace;
    font-size: 23px;
    font-weight: lighter;
}

#linkli2 {
    margin: 5px;
    list-style: none;
}

/* Resorcources page*/

.resli {
list-style-image: url('./blinkies/star.gif');
}

#resc a {
  color: rgb(0, 244, 219);
  transition: 0.3s ease-out;
}

#resc a:hover {
    color: blanchedalmond;
}

/* Shrine Page */

.shrinegrid {
    display: grid;
    grid-template-columns: 250px 250px 250px;
    grid-auto-rows: 250px 250px 250px;
    gap: 5px;
    text-align: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-bottom: 25px;
}

.shrinegrid div {
    margin: auto;
    border: 1px transparent;
    width: 250px;
    height: 250px;
}

.Shrinebutton {
    width: 250px;
    height: 250px;
    margin: auto;
    border-radius: 0;
    font-size: 30px;
    background-color: transparent;
    color: transparent;
}

.Shrinebutton:hover {
    color: white;
    background: rgb(193, 126, 255);
    opacity: 0.8;
}

#witchhat {
    background-image: url('./shrineimages/witchhat.jpg');
}

#ena {
    background-image: url('./shrineimages/enadbbq.jpg');
}

#tadc {
    background-image: url('./shrineimages/the-amazing-digital-circus-poster-2.png');
}

#toh {
    background-image: url('./shrineimages/toh.jpg');
}

#at {
    background-image: url('./shrineimages/at.jpg');
}

#su {
    background-image: url('./shrineimages/SU.jpg');
}

/* Art page */

.art {
    text-align: center;
}


/* misc */
 #transparent {
    color: transparent;
 }

 #lesbianspider {
    text-align: center;
 }

 #flags {
    text-align: center;
 }

 #title {
    text-align: center;
    font-size: 200px;
    padding: 0px;
    margin: 45px;
    color: rgb(103, 35, 220);
    text-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 1em blue,
    0 0 0.2em rgb(151, 113, 255);
    font-family: "handjet";
 }

 #links {
    height: 210px;
    margin-top: 40px;
    border-radius: 25px;
    margin-right: 55px;
    margin-left: 55px;
 }

 #tools {
    height: 260px;
    border-radius: 25px;
    margin-right: 45px;
    margin-left: 45px;
 }

 #instructions {
    font-size: small;
 }

 #welcome {
    margin-left: -30px;
    margin-right: 20px;
 }

 #stuff {
    height: 620px;
 }

#stuff p {
    font-size: small;
    text-align: center;
}

 #updates {
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 800px;
 }

 #divider {
    text-align: center;
 }

 #accbuttons {
    font-size: 18px;
    height: 55px;
    width: 120px;
    margin: 7px;
 }

 .access {
    text-align: center;
    margin-top: -10px;
 }

 .bnb {
    text-align: center;
 }

 /* Other pages */

 #page {
    width: 800px;
 }

 #access2 {
    height: 260px;
    border-radius: 25px;
    margin-right: 25px;
    margin-left: 25px;
 }