body {
background:url("./Photos/background.png"); 
background-repeat: repeat; 
background-size: 80px;
background-color: #ffedf2;
font-family: 'angel.ttf';
color: #d09166;
font-size:12px;
line-height: 20px;
cursor: url(./Photos/cursor.png), progress; } 
a:hover { cursor: url(./Photos/cursorhover.png), progress; } 
::selection { color: #e8a2c5; 
}

@font-face {
font-family: 'cutie';
font-weight: normal;
font-style: normal;
src: url('Fonts/cutie.ttf') format('truetype'); 
}

@font-face {
font-family: 'angel';
font-weight: normal;
font-style: normal;
src: url('Fonts/angel.ttf') format('truetype'); 
}

::selection {text-shadow: 0 0 8px #ffaec8;color:#d9c0ad
}
::-moz-selection {text-shadow: 0 0 8px #ffaec8;color:#d9c0ad
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

::-webkit-scrollbar {
width: 5px;
height: 4px;
background-color: #fcdfe9;
-webkit-border-radius: 5ex; 
}
::-webkit-scrollbar-thumb {
background-color: #fcdfe9;
-webkit-border-radius: 5ex; 
border: 1px solid #fcdfe9;
}
::-webkit-scrollbar-track {
background-color: #ffedf4;
-webkit-border-radius: 5ex; 
border: 1px solid #ffedf4;
}

b {
font-weight: 1;
color: #fcb8d8;
text-shadow: 0 0 1px;
}
h1 {
font-size: 12px;
text-decoration: underline dotted pink;
}
h2 {
font-size: 22px;
color: #f9e5aa;
font-weight: bold;
text-shadow: 0 0px 1px;
}
h3 {
font-size: 20px;
color: #cfecca;
font-weight: bold;
text-shadow: 0 0px 1px;
}

a{
text-decoration:none; 
color: #e090b7;
}
a:hover{ 
color: #d4b8be;
}


.smallbox {
    width: 400px;
    height: 270px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 8px;
border-width: 7px;
border-style: solid;
display: inline-block;
align-items: center;
  justify-content: center;
    border-image: url('./Photos/content1.png')7 fill round;
}

* {
box-sizing: border-box;
}
#everything {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
padding: 10px;
}
#navi {
width: 1000px;
height: 100px;
text-align: center;
z-index: 10;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 200px;

}

#mainbox {
border-radius: 12px;
border-width: 7px;
border-style: solid;
border-image: url('./Photos/contentbox.png') 7 fill round;
width: 820px;
height: 680px;
text-align: center;
padding: 15px;
z-index: 1;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 100px;
}

#subbox {
border-radius: 12px;
border-width: 7px;
width: 750px;
height: 450px;
text-align: center;
padding: 15px;
z-index: 2;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 150px;
overflow: scroll;
}

#contentbox {
border-radius: 12px;
border-width: 7px;
border-image: url('./Photos/content1.png')7 fill round;
border-style: solid;
width: 470px;
text-align: center;
padding: 15px;
z-index: 2;
position: absolute;
margin-left: auto;
margin-right: auto;
}

#flexiblebox {
border-radius: 12px;
border-width: 7px;
border-image: url('./Photos/content1.png')7 fill round;
border-style: solid;
text-align: center;
padding: 15px;
z-index: 2;
position: absolute;
margin-left: auto;
margin-right: auto;
}

#decobox {
border-radius: 12px;
border-width: 7px;
border-image: url('./Photos/box2.png')7 fill round;
border-style: solid;
width: 470px;
text-align: center;
padding: 15px;
z-index: 2;
position: absolute;
margin-left: auto;
margin-right: auto;
}


.tooltip {
position: fixed;
display: none;
transition: opacity 0.8s;
max-width: 200px;
padding:3px 4px 5px 4px; 
margin: 15px 10px 0px 20px;
background-color: #e7def1; 
text-align: center;
border-radius: 6px;
border-style: dotted;
border-color: #d9c0ad;
border-width: 1px;
font-size:18px;
color:#d09166;
z-index:9999;
}

 a[title]:hover::after {
         content: attr(title);
         font-size: 14px;
         color: white;
         background-color: blue;
         padding: 5px;
         border-radius: 5px;
      }
      
      
html { text-size-adjust: 100%; }
/* this is for mobile phones in vertical view */
@media screen and (min-width: 1px) and (orientation: portrait){
#everything { 
transform: rotate(90deg);
position: absolute;
zoom: 160%;
left:600px; top:-40px;
}
#mainbox {width: 530px;}
}
/* this is for mobile phones in horizontal view */
@media screen and (max-width: 1000px) and (orientation: landscape){
#everything {
zoom: 80%; 
left: 0px;
}
}