/* 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 {
    --fontbig: "Nunito", sans-serif;
    --fontsmall: 'ms ui gothic';

    --outline: #0090d9;
    --mid: #00aaff;
    --dark: #033149;
    --grey: #bbc6cc;

   --s-dark: #0090d9;

   --g-outline: #0090d9;


}

BODY{
cursor:url("/shrines/ubfunkeys/cursor.ico"), default;
background-image: url("/shrines/ubfunkeys/background.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: cursive;
}

p {
   margin-top: 0px;
   font-size: medium;
   color: var(--dark);
}

h2 {
   font-family: "Orbitron", sans-serif;
   font-size: large;
   color: white;
   background-color: var(--outline);
   border: 6px outset var(--outline);
   border-radius: 5px;

   margin: 2px;
   margin-top: 2px !important;
   margin-bottom: 12px !important;

   outline: 1px solid var(--mid);
   outline-offset: -1px;
   padding: 5px;
   margin-top: 0px;
   margin-bottom: 10px;

   text-shadow: 

    1px 2px 0px var(--outline), 
    0px 2px 0px var(--outline), 
    1px 0px 0px var(--outline), 
    0px -1px 0px var(--outline), 
    -1px 0px 0px var(--outline), 
    -1px -1px 0px var(--outline),  
    1px -1px 0px var(--outline), 
    -1px 2px 0px var(--outline);


   box-shadow:  inset 0px 0px 0px 1px var(--mid), inset 0px 15px 0px 0px var(--mid), 0px 0px 0px 2px var(--dark), 0px 7px 0px 0px var(--grey), -2px 7px 0px 0px var(--grey), 2px 7px 0px 0px var(--grey);
}

h2::before {
   content: "\f111";
   font-family: 'Font Awesome';
   font: var(--fa-font-solid);
   margin-right: 5px;
}


#body {
   max-width: 910px;
   border: 12px outset var(--outline);
   border-radius: 20px;

   outline: 1px solid var(--mid);
   outline-offset: -1px;

   padding: 10px;

   background-color: white;

   margin-left: auto;
   margin-right: auto;

   box-shadow:  inset 0px 0px 0px 1px var(--dark), inset 0px 0px 0px 2px var(--dark), 0px 0px 0px 4px var(--dark);

   margin-top: 40px;
}

#header {
   position: relative;
}

#logo {
   position: absolute;
   width: 330px;
   top: -66px;
   left: -50px;
}

#headerimg{
   width: 100%;
   margin-bottom: 5px;

   outline: 2px solid var(--dark);
   outline-offset: -2px;
   border-radius: 20px 8px 0px 0px;
   
}

#header h1{
   position: absolute;
   bottom: -30px;
   right: 5px;

   font-family: "Orbitron", sans-serif;
   text-align: center;
   color: white;

   text-shadow: 
    0px 1px 0px var(--grey),

    1px 2px 0px var(--outline), 
    0px 2px 0px var(--outline), 
    1px 0px 0px var(--outline), 
    0px -1px 0px var(--outline), 
    -1px 0px 0px var(--outline), 
    -1px -1px 0px var(--outline),  
    1px -1px 0px var(--outline), 
    -1px 2px 0px var(--outline),
    
    2px 0px 0px var(--outline),
    0px 3px 0px var(--outline), 
    -2px 3px 0px var(--outline), 
    2px 3px 0px var(--outline), 
    0px -2px 0px var(--outline), 
    -2px -2px 0px var(--outline),

    3px 0px 0px var(--dark),
    0px 4px 0px var(--dark), 
    -3px 4px 0px var(--dark), 
    3px 4px 0px var(--dark), 
    0px -3px 0px var(--dark),
    3px -3px 0px var(--dark),  
    -3px 0px 0px var(--dark), 
    -3px -3px 0px var(--dark);

   filter:

    drop-shadow(0px 2px 1.5px var(--dark));

      
}

#about {
   display: grid;
   grid-template-columns: 200px auto;
   grid-gap: 10px;
   height: 260px;
   margin-bottom: 10px;
}

#about img{
   width: 200px;
   margin-bottom: -5px;

   outline: 2px solid var(--dark);
   outline-offset: -2px;
}

#about .text{

   height: 183px;

}

.text {
   overflow: auto;
   padding: 10px;
   outline: 2px ridge;
   outline-color: var(--dark);
   outline-offset: -2px;
}

#installation {
   display: grid;
   grid-template-columns: 266px auto;
   grid-gap: 10px;
   margin-bottom: 10px;
}

#installation img{
   width: 266px;
   margin-bottom: -5px;

   
}

#installation .text{
   max-height: 214px;
}

#world {
   display: grid;
   grid-template-columns: 350px auto;
   grid-gap: 10px;
   margin-bottom: 10px;
}

#world img{
   width: 350px;
   margin-bottom: -5px;
   transition: ease-in-out 0.2s;
   
}

#world .text{
   max-height: 207px;
}

#worldimages {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 10px;
   

}

#gameplay {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 10px;

}

#gameplay img{
   flex-grow: 1;
   width: 250px;
   border-radius: 10px;
   
}

#worldimages img{
   width: 250px;
   border-radius: 30px;
   transition: ease-in-out 0.2s;
   margin-bottom: 5px;
   flex-grow: 1;
   box-shadow: 0px 5px 0px 0px var(--grey);
}

.a {
   margin-right: 10px;
}

.c {margin-left: 10px;}

#worldimages img:hover {
       transform: scale(200%);
       outline: 1px solid white;
       box-shadow: none;
      filter:
      
      drop-shadow(0px 0px 5px var(--dark))
      drop-shadow(0px 0px 5px var(--dark));
}

#back {
   position: absolute;
   top: 100px;
   font-size: x-large;
   font-weight: bolder;
   left: -30px;
   color: #f2f95e;

   text-transform: uppercase;

   filter:
      drop-shadow(0px 0px 5px #ffa08a);

   text-shadow: 

    1px 1px 0px #6f0801, 
    0px 1px 0px #6f0801, 
    1px 0px 0px #6f0801, 
    0px -1px 0px #6f0801, 
    -1px 0px 0px #6f0801, 
    -1px -1px 0px #6f0801,  
    1px -1px 0px #6f0801, 
    -1px 1px 0px #6f0801,
    
    2px 2px 0px #6f0801, 
    0px 2px 0px #6f0801, 
    2px 0px 0px #6f0801, 
    0px -2px 0px #6f0801, 
    -2px 0px 0px #6f0801, 
    -2px -2px 0px #6f0801,  
    2px -2px 0px #6f0801, 
    -2px 2px 0px #6f0801,

    3px 3px 0px #6f0801, 
    0px 3px 0px #6f0801, 
    3px 0px 0px #6f0801, 
    0px -3px 0px #6f0801, 
    -3px 0px 0px #6f0801, 
    -3px -3px 0px #6f0801,  
    3px -3px 0px #6f0801, 
    -3px 3px 0px #6f0801
    ;
}

#back a{
   color: unset;
   text-decoration: unset;
}

#propaganda {
      display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 10px;
}

#propaganda img{
   width: 220px;
   border-radius: 0px;
   transition: ease-in-out 0.2s;
   margin-bottom: 5px;
}

#propaganda2 {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 10px;
   margin-top: -5px;
}

#propaganda2 img{
   width: 450px;
   border-radius: 0px;
   transition: ease-in-out 0.2s;
   margin-bottom: 5px;
}

#prop1:hover {
   transform: scale(130%) rotate(10deg);
}

#prop2:hover {
   transform: scale(130%) rotate(5deg);
}

#prop3:hover {
   transform: scale(130%) rotate(-15deg);
}

#prop4:hover {
   transform: scale(130%) rotate(3deg);
}

#prop5:hover {
   transform: scale(130%) rotate(-4deg);
}

#prop6:hover {
   transform: scale(130%) rotate(14deg);
}

#prop7:hover {
   transform: scale(130%) rotate(-6deg);
}

#mycrib {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

#mycrib img{
   width: 200px;
   flex-grow: 1;
   margin: 5px;
   transition: ease-in-out 0.2s;
}

#mycrib img:hover {
   transform: scale(160%);
}

#collectioncont {
   display: grid;
   grid-template-columns: 475px auto;
   grid-gap: 10px;
   margin-bottom: 10px;
}

#collectioncont .text{
   height: 498px;
}

#collection {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-content: center;

   margin-top: -5px;
}

#collectiongrid {
   display: grid;
   grid-template-columns: 180px auto;
   grid-gap: 0px;
   margin-bottom: 10px;

   margin-top: -5px;

   outline: 2px solid var(--outline);
   border-radius: 50px;
   outline-offset: -1px;
}

#collectiongrid img{
   transition: ease-in-out 0.2s;
   margin-top: 70px;
   margin-left: 20px;
   filter:

   drop-shadow(0px 5px 0px var(--grey));
}

#collectiongrid img:hover{
   transform: scale(120%);
   filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#collection img{
   height: 180px;
   margin: 10px;
   transition: ease-in-out 0.2s;

   filter:

   drop-shadow(0px 5px 0px var(--grey));
}

#funky1:hover {
   transform: scale(120%) rotate(10deg) !important;
   filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky2:hover {
   transform: scale(120%) rotate(-1deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky3:hover {
   transform: scale(120%) rotate(-10deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky4:hover {
   transform: scale(120%) rotate(13deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky5:hover {
   transform: scale(120%) rotate(5deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky6:hover {
   transform: scale(120%) rotate(-5deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky7:hover {
   transform: scale(120%) rotate(-5deg) !important; 
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky8:hover {
   transform: scale(120%) rotate(7deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky9:hover {
   transform: scale(120%) rotate(2deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#funky10:hover {
   transform: scale(200%) rotate(14deg) !important;
      filter:

   drop-shadow(0px 5px 5px var(--grey));
}

#holygrail {
   display: grid;
   grid-template-columns: auto 335px;
   grid-gap: 10px;
   margin-bottom: 10px;
}

#speakers {
   width: 335px;
   outline: 2px solid var(--dark);
   outline-offset: -2px;

}

#holygrail .text{
   height: 191px;
}

.missing {
   border: 2px solid var(--dark);
   margin-bottom: 10px;
}

.missingheader {
   background-color: red;
   font-family: "Orbitron", sans-serif;
   font-size: x-large;
   color: white;
   font-weight: bolder;
   text-transform: uppercase;
   padding: 10px;
}

.missinggrid {
   padding: 10px;
   display: grid;
   grid-gap: 10px;
   grid-template-columns: 250px auto;
}

.missinggrid img{
   width: 250px;

   transition: ease-in-out 0.2s;

   filter:

   drop-shadow(0px 5px 0px var(--grey));
}

.missinggrid img:hover{
   transform: scale(120%) rotate(14deg) !important;
   filter:

   drop-shadow(0px 5px 5px var(--grey));
}


.missingtext {
   height: 180px;
   overflow: auto;
}

#dc {
   height: 500px;
}

#daydream {
   height: 125px;
}

#diy {
   display: grid;
   grid-template-columns: 350px auto;
   grid-gap: 10px;
   margin-bottom: 10px;
}

#stamps {
    display: flex;
  justify-content: space-around;

}

#stamps img{
   margin: 10px;
}

.c-textInput {
   width: 95% !important;
}