/*general*/
body {
  font-size: 14px;
  color: #5f311e;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  h5{color: #69b9d6;
  font-weight: lighter;
  font-style: italic}
  
}
/*link style*/
  a{
    text-decoration: none;
    color: inherit
   }
  a:hover{ transform: scale(-1, -1);
    display: inline-block;}

.linkpage{
  a:hover{transform:scale(1);
  font-style: italic;}
  a:visited{text-decoration: line-through;}
}

/*sticky images*/
.sticky {
  position: sticky;
  top: 0;
  float:right
  ;
}
.flipsticky{
  position: sticky;
  top: 0;
  float: left;
  transform: scalex(-1);
}

/*layout of general divs*/
.gridcontainer{
  display: grid;
  place-content: center;
  column-gap:10px;
  grid-template-columns: 1fr minmax(0, 600px) 1fr
}
.centerdiv{
  background-color:#69b9d6d6; 
  padding: 1px 10px; 
  place-items: center;
  width:100%;
  max-width:600;
  margin: auto;
    
  border-radius: 20px; 
  border-style: double;
  border-width: 10px;
  border-color: #cfcec9;
  grid-column: 2;
justify-self: center;}
  
.main{
  padding: 10px; 
}
.footer{
  background-color: #225496d6; 
  padding: 1px 10px; 
  border-radius: 20px; 
  width: 100%;
  max-width: 600px;
  margin: auto;

  text-align: justify;
  align-content: center;}
.left{
  background-color: #69b9d6d6;
  grid-column: 1;
   border-radius: 20px; 
  border-style:solid;
  border-width: 4px;
  border-color: #cfcec9;
  max-height: 100;
  width:125;
  padding: 10 5;}

/*divs used in pages with no blue squoval*/
.upperdivportfolio{
  background-color:#69b9d6d6; 
  padding: 1px 10px; 
width: 100%;
max-width: 600
  border-radius: 20px; 
  place-items: center;
}
.bottomdivportfolio{
  border-style: hidden;
  padding: 10px 5px;
  color: #69b9d6;
}

/*div containing image buttons*/
.griddirectory{
  display:flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  
.griddirectory img{
  height: 300px;
}
.imagebuttons{
  a:hover {
filter:
saturate(150%);
filter: brightness(150%);
transform: scale(1)
} 

/*centers image when used as class*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}

}



 
}

/* Create two equal columns that sits next to each other */
.column {
  display: flex;
  flex: 50%;
  padding: 0 4px;
  align-items:center;
  margin: auto;
  justify-content: center;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
       
    
}
.border {
border-width:8px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/rr5se47u373c2yn/orange%20lace.png") 8 fill round;      
    

}
.photogrid{
  display: grid;
  place-content: center;
  column-gap:10px;
  row-gap: 10px
}
.column1{
  grid-column: 1;
  align-items: center;
}
.column2{
  grid-column:2;
  align-items:center;

}

.textbox{
  width:230px;
  font-style: oblique;
  padding: 10 2
}
</style>