html {
  background-image: url(gifs/bluebg.png);
    background-size: 60px auto;
    background-repeat: repeat; }
   
.mlain {
 margin: auto;
 width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color:#EDF2FB;
  text-align: center;
 border-radius: 5px;
border-width: 7px;
border-style: solid; 
border-image: url(gifs/blueborder.png) 7 fill round;
}

.whiteborder {
   border-radius: 5px;
border-width: 7px;
border-style: solid; 
border-image: url(gifs/whiteoutline.png) 7 fill round;
}

.navxtra {
  width: 70%;
  margin-left:auto;
  margin-right:auto;
 text-shadow: -1px -1px 0 #ABC4FF, 1px -1px 0 #ABC4FF, -1px 1px 0 #ABC4FF, 1px 1px 0 #ABC4FF;
display: inline-block;
  color:#F9F9F9;
  font-family:daydream;
  text-align:center;
  margin-bottom:5px;  margin-top:10px;
  font-size:10px;
}

#header {
  border-style: solid;
  border-color:white;
  border-width:1px;
  border-radius:5px;
  height: 120px;
  background-image: url(https://64.media.tumblr.com/a51bbc5821486e3806a2b6e7739e038b/e2eb7c92a871e649-9e/s250x400/5f5b980093ea5d29f0100198f2db6738808f66bc.jpg);
  background-repeat: repeat;
  background-size: 100px auto;
  margin: 10px;
  animation: moveIt 60s linear infinite;
}
@keyframes moveIt {
  from {background-position:  left;}
  to {background-position:  right;}
}

#headerombre {

background: linear-gradient(103deg, rgba(42, 123, 155, 0) 0%, rgba(87, 199, 171, 0) 19%, rgba(247, 250, 255, 1) 100%);
height: 100%;
width: 100%;
 display: flex;
  position: relative;
  border-radius: 2px;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  
}

.shadow {
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}


#metanoia {
  color: #ABC4FF;
  
  width: 100%;
    padding-bottom: 10px;
    position: absolute;
  bottom: 0;
font-family: cursivebob;
  margin-left: auto;
  margin-right: auto;
  
     text-shadow: 0 0 5px #99B7FF;
        transition: transform 0.3s ease;
}

#metanoia:hover {
  font-family: dos;
 transform: scale(1.1);
  text-shadow: #6C8D9F 1px 0 10px;
  color:white;    font-size:15px;
} 


#urfavizzy {
  color:white;
  font-size: 35px;
  text-align: center;
  width: 100%;
 margin-top: auto;
 margin-bottom: auto;
  font-family: daydream;
  margin-left: 20px;

 text-shadow: -1px -1px 0 #ABC4FF, 1px -1px 0 #ABC4FF, -1px 1px 0 #ABC4FF, 1px 1px 0 #ABC4FF;
display: inline-block;
  transition: transform 0.2s;
}

#urfavizzy:hover {
  animation: wiggle 0.5s infinite;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.column3 {
   display: grid;
grid-template-columns: .45fr 2fr .75fr;
gap: 5px;
background-color:white;
margin: 10px;
 border-radius: 5px;
border: 1px solid #CAD2C5;
padding: 2px;
}

#lace1 {
   background-image: url(gifs/tumblr_d71736de42e9d73da97d45006106f29c_8be8378f_250.png);
             background-size: auto 20px;
  background-repeat: repeat-x;
  
  width:100%;
  height: 21px;
}

#lace2 {
   background-image: url(gifs/upside.png);
             background-size: auto 20px;
  background-repeat: repeat-x;
  
  width:100%;
  height: 21px;
}
#lace3 {
   background-image: url(
http://media.tumblr.com/59bd11ebc4e29cde928a2dc443cd9ec3/tumblr_inline_mp2cqc0sEe1qz4rgp.gif
);
             background-size: auto 40px;
  background-repeat: repeat-x;
  
  width:100%;
  height: 41px;
}


#pearl {
   background-image: url(https://64.media.tumblr.com/c7400a29e8c17f12b10037fb162d1e2b/d0d3e8bead78803a-25/s1280x1920/f7e28be51ea1cc4d04c94d1a3a5c595864dca521.pnj);
             background-size: auto 20px;
  background-repeat: repeat-x;
  width: 100%;
  height: 20px;
 
}


#col1 {

text-shadow: #FFFFFF 1px 0 5px;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
   padding-bottom: 5px;
    font-size: 10px;
   font-family:cursivebob;
background-image: linear-gradient(#ffffff 2px, transparent 2px), linear-gradient(to right, #ffffff 2px, transparent 2px);
background-size: 12px 12px;
background-color: #eef8ff; 
margin-bottom: 3px;

width: 100%;
margin-left: auto;
margin-right: auto;
}

#col2 {
  padding: 15px;
}
  
#metan {
  font-family: dos;
  color: #255F82;
  font-size:15px;
  text-shadow: #FFFFFF 1px 0 10px;
    transition: transform 0.3s ease;

}

#metan:hover {
 transform: scale(1.1);
  text-shadow: #6C8D9F 1px 0 10px;
  color:white;    font-size:15px;
} 


#aboutoutline {
height: auto;
background-color: #ECF8FF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='scale(0.07)'%3E%3Ccircle id='a' data-color='outline' fill='none' stroke='%23F8FEFF' stroke-width='43.89' r='.5'%3E%3C/circle%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='50'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);

}

#about {
   box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  border: #E8E8E8 1px solid;
 text-align: center;
  height: auto;
   border-radius: 10px;
   color: #93AEBA;

background-color: #F7FAFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(32) scale(0.05)'%3E%3Cpath id='a' data-color='fill' fill='%23FFF' stroke='%23FFF' stroke-width='21.73' d='M49-1h2v102h-2z'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

}

#abouttext {
     font-family: planet;
   margin: 10px;
   font-size: 16px;
   
}

#psa { 
  border: 1px solid #CAD2C5;
  background-color: white;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
 border-radius: 5px;
 font-family: mbytepc;
 padding: 5px;
 text-shadow: 0 0 3px #99B7FF;
}

  #twosplit {
    grid-template-columns: 1fr 1fr;
gap: 10px;
display: grid;
}

#navlace {
  
 background-image: url(https://64.media.tumblr.com/582963b9fbaed066768b9aab72bc7375/11ccc40b46fe2198-29/s2048x3072/e448c9f5d2d788d0228bc2183950d885f15f61df.pnj);
             background-size: auto 70px;
  background-repeat: repeat-x;
  height: 71px;
  width: 100%;
}

#nav {
  height:210px;
overflow-y:auto;
overflow-x: clip;
border: 1px solid #D4DFE6;
background-color: #D8EEFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(90) scale(0.03)'%3E%3Cpath id='a' data-color='fill' fill='%23FFF' stroke='%23FFF' stroke-width='48' d='M49-1h2v102h-2z'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 5px;
  width: 100%;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

#directory {
  font-family: cursivebob;
  font-size:30px;
  color:#FFFFFF;
       text-shadow: 0 0 5px #3F4E56;
}

#directorysite {
  width:auto;
  color:#667895;
  font-family: mbytepc;
 transition: transform 0.3s ease;
   margin-left: auto;
  margin-right: auto;

}

#directorysite:hover {
 transform: scale(1.1);

  text-shadow: #D3F2FF 1px 0 15px;
  color:white;
  background: #b0d7ff;
  font-family: cursivebob;
background: radial-gradient(circle,rgba(176, 215, 255, 1) 0%, rgba(87, 199, 171, 0) 51%, rgba(247, 250, 255, 0) 100%);
} 

#directoryborder {
   border-bottom: 1px #83A4BD dotted;
   margin-left: auto;
   margin-right: auto;
   margin-top: 3px;
   margin-bottom: 3px;
width: 50%;
}

#metanoiabutton {
  box-shadow:
  0 0 0 2px #FFFFFF,
  0 0 0 4px #CCE2F4;
  
  margin-top: 3px;
   width:90px;
 height:auto;
  transition: transform 0.3s ease;

}

#textmeta {
  width: 100%
  
}

#metanoiabutton:hover {
 transform: scale(1.05);

}

#panel, #flip {
  padding: 0px;
  text-align: center;
  width:100%;
  height:auto;
}

#panel {
  padding: 0px;
  display: none;
}

#metanoiabuttons {
  display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
height:auto;

 
 
}

#mybuttons {
  border: 1px #C5CCD1 solid;
  
}


.blueplaidbg {
  background: repeating-linear-gradient(transparent, transparent 2.5px, #f6fbff 2.5px, #f6fbff 3.75px, transparent 3.75px, transparent 5px, #f6fbff 3.75px, #f6fbff 10px, transparent 10px, transparent 11.25px, #f6fbff 11.25px, #f6fbff 12.5px, transparent 12.5px, transparent 20px), repeating-linear-gradient(90deg, transparent, transparent 2.5px, #f6fbff 2.5px, #f6fbff 3.75px, transparent 3.75px, transparent 5px, #f6fbff 3.75px, #f6fbff 10px, transparent 10px, transparent 11.25px, #f6fbff 11.25px, #f6fbff 12.5px, transparent 12.5px, transparent 20px), #ffffff;
background-blend-mode: multiply;
background-color: #ffffff;
}
  
  


::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #D8EEFF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #D8EEFF;
}

.tooltip {
  position: relative;
  display: inline-block;
 
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #D5EDFF;
  color: #B1CCE1;
  text-align: center;
  padding: 2px 0;
  border-radius: 5px;
  font-size:12px;
  border: 2px solid #B1CCE1;
 font-family: mbytepc;
  /* Position the tooltip text - see examples below! */
  position: relative;
  bottom: -5;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.guestbook {
  margin-top:5px;
  
background-color: #EBF5FF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='scale(0.07)'%3E%3Cpath id='a' data-color='outline' fill='none' stroke='%23FFF' stroke-width='25' d='M-1-1h2v2h-2z'%3E%3C/path%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='50'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family:cursivebob;
color:#9BB4C1;
text-shadow: 0 0 5px #5279A2;
        transition: transform 0.3s ease;
}


#guestlink {
  color:#FFFFFF;
    transition: transform 0.3s ease;

}

#guestlink:hover {
 transform: scale(1.5);
  text-shadow: #6C8D9F 1px 0 10px;
  color:white; 
}