@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
    font-family: 'Herkey';
    src: url('Herkey.woff2') format('woff2'),
        url('Herkey.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'KiwiSoda';
    src: url('KiwiSoda.woff2') format('woff2'),
         url('KiwiSoda.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {
  cursor: url('https://cdn.cursors-4u.net/previews/starbucks-double-chocolaty-chip-frappuccino-d3737d8b-32.webp') 32 32, auto !important;
}

a.links {
  color:lightblue;
  font-weight: bold;
  font-family: 'KiwiSoda','Herkey',Arial;
  transition: transform 0.3s ease;
  width:150px;
  height:40px;
  display:block;
  margin:0 auto;
  padding-top:8px;
}

a.links:hover {
  background-color:#614122;
  opacity: 0.5;
  
}

a.links:active{
	color:lightpink;
}


body {
  background-image: url('website_background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh; /* Ensures body is at least full screen height */
   color: white;
  border-width:7px;
  border-style:solid;
  border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;
  margin: auto;
  width: 884px;
  position: relative;
  padding: 5px;
  z-index: 4;
  align-items: stretch
}

.flex_container {
	display:-webkit-flex;
	display:flex;
	width:100%;
	flex-direction:row; /* can also do column */
	flex-wrap:nowrap; /* the boxes don't go to the next line */
	gap:10px;
}
	
.navigation {
  font-family: 'Herkey';
  color: #614122;
  text-decoration: underline;
  border-width:7px;
  border-style:solid;
  border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  margin: relative;
  width: 25%;
  height: 100%;
  text-align: center;
}


.flexbox_75 {
  border-width:7px;
  border-style:solid;
  border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  margin: relative;
  width: 75%;
  display: relative;
}

.img_box {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABXElEQVR4AezVbWrDQAyE4aaXLD1h6SlTHujAIlZ/EjtGkMCLvpzVzoDx58eQ39yL3n9+7zvOMn63S6/um+coFahKUpsh9bPRWejOMUPm8xzNzW/fXzd0dfrUrqRf4/qMvM7tQvpypE6c6yjViBI5UidSvZJ+jesz8jp3NtKXI3XiPEepRRTUaIbaf7R2Frr/myHzeY7m5lTsyPzouNulV/fMdTRKvHlIfXa0C92e+Y52yq7qz3fUm4dXOWgXun3zHe2UXdV/O3q08/Md9ZXAvzOnB7vQLZrvaKfsqv58R30l8CoH7UK3b66j3rwdndJn+7tdevXceY5SgaoktRlSPxudhe4cM2Q+z9Hc3JuHrk6f2pX0a1yfkde5XUhfjtSJcx2lGlEiR+pEqlfSr3F9Rl7nzkb6cqROnOcotYiCGs1Q+4/WzkL3fzNkPs/R3JyKHZkfHXe79OqeMY7+AQAA//+wQRo/AAAABklEQVQDAGm7QGSD4ShSAAAAAElFTkSuQmCC') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
    display:flex;
    border-radius: 20px;
    padding: 6px;
 }
 

 .about_box {
    background:url(back01.gif);
    border:solid 1px #483b3c;
    margin:1em 0; 
    padding:20px 0;  
    display:flex;
 }
 
 .about_innerbox {
    background:#fff;
    border-bottom:2px dashed #c3c2ad;
    border-top:2px dashed #c3c2ad;
    box-shadow:0 4px 0 #fff,0 -4px 0 #fff;
    padding:15px
}
 
 .about_text {
  color: lightblue;
  font-family: "Press Start 2P";
  font-size: 75%;
  line-height: 1.5;
  text-align: center;
 }
  
.caption {
  color: #614122;
  font-family: "Press Start 2P";
  font-size: 60%;
  transform: translateX(20px);
  line-height: 1.5;
  padding: 3%;
  margin-right: 7px;
  text-align: left;
}
  

.float {
  text-align: center;
  color: lightblue;
  background-color: #614122;
  border-radius:150px 100px;
  font-family: 'KiwiSoda','Herkey',Arial;
  overflow: hidden;
  box-shadow: 5px 7px 5px lightblue;
  font-size: 140%;
  animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @keyframes floating {
  0% { transform: translate(0, 0px); }
  50% { transform: translate(0, 10px); }
  100% { transform: translate(0, -0px); }
}

.flex-container {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	flex-direction:row; /* can also do column */
	flex-wrap:nowrap; /* the boxes don't go to the next line */
}

h3 {
  color: #614122;
  font-family: 'Herkey',Arial;
  text-align: center;
  font-size:160%;
  transform: translateY(10px);
}

.borough {
  color: #614122;
  font-family: 'KiwiSoda',Arial;
  text-align: left;
  font-size:120%;
  transform: translateY(-10px);
}

.coffee_logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.copyright {
  color: white;
  font-family: Arial;
  font-size:70%;
  bottom: 0;
  width:100%;
  position: absolute;
  text-align: center;
}

.sb_gif {
  transform: translateX(20px);
  transform: translateY(150px);
}

a.recipe {
    color: lightblue;
    font-family: "Press Start 2P";
    font-weight: bold;
    width:80px;
    height:15px;
    padding-top:8px;
 }

a.recipe:hover {
  background-color:#614122;
  opacity: 0.5;
  
}

a.recipe:active{
	color:lightpink;
}


a.borough {
    color: lightblue;
    font-family: "Press Start 2P";
    font-weight: bold;
    width:80px;
    height:10px;
    padding:30px;
    transform: translateY(-20px);
    font-size:100%;
}
    
    
a.borough:hover {
  background-color:#614122;
  opacity: 0.5;
  width:65px;
  height:15px;
  position:relative;
}

a.borough:active{
	color:lightpink;
}


::-webkit-scrollbar {
width: 16px
}
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: url("https://dl.dropbox.com/s/9a29qbkza3gmgl7/scroll1.png"), linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
background-repeat: no-repeat;
background-size: 65% auto, cover;
background-position: center;
}
 
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 15px
}
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 3px 0 0;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 0 3px 0;
}