@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 400;
    src: url('ms_sans_serif.woff') format("woff");
    src: url('ms_sans_serif.woff2') format("woff2");
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 700;
    src: url('ms_sans_serif_bold.woff') format("woff");
    src: url('ms_sans_serif_bold.woff2') format("woff2");
}


body {
  font-size: 14px;
  color: #222;
  -webkit-font-smoothing: none;
  font-family: "Pixelated MS Sans Serif";
    
}

.title-bar {
    align-items: center;
    background:silver;
    display: flex;
    justify-content: space-between;
    padding: 3px 5px 3px 3px;
    margin-bottom: 3px;
   box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    outline: 1px #222;
    z-index: 5;
    color: #601212;
    text-shadow: 0 0 2px #51090a;
}


.title-bar-text {
    font-weight: 700;
    letter-spacing: 0;
    margin-right:24px;
    text-shadow: 0 0 2px #51090a;
     color: #601212;
}

.title-bar-controls {
    display: flex;
    padding: 0;
    margin: none;
}

.title-bar-controls button {
    display: flex;
    min-height: 17px;
    min-width: 19px;
    padding: 5px;
    margin: auto;
   box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
}

.title-bar-controls button:active {
    padding: 0;
}

.title-bar-controls button:focus {
    outline: none;
}

.title-bar-controls button[aria-label=Minimize],.title-bar-controls button[aria-label].minimize {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
    background-position: bottom 3px left 4px;
    background-repeat: no-repeat;
    margin-left: 2px;
}

.title-bar-controls button[aria-label=Maximize],.title-bar-controls button[aria-label].maximize {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");
    background-position: top 2px left 3px;
    background-repeat: no-repeat;
}

.title-bar-controls button[aria-label=Maximize]:disabled,.title-bar-controls button[aria-label].maximize:disabled {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='grey'/%3E%3C/svg%3E");
    background-position: top 2px left 3px;
    background-repeat: no-repeat;
    margin-left: 2px;
}


.title-bar-controls button[aria-label=Close],.title-bar-controls button[aria-label].close {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
    background-position: top 3px left 4px;
    background-repeat: no-repeat;
    margin-left: 2px;
}
.window{
    border: 2px silver solid;
    outline-style: solid;
    outline-color: #5e5e5e;
    outline-width: 1px;
    box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    background-color:grey;
    padding: 0;
    align-items: center;
    justify-content: center;
    width:331px;
    height: 380px;
    color: #601212;
    text-shadow: 0 0 2px #51090a;
    overflow:clip;
}

.window[role=tabpanel]{
    margin: 0 0 -2px;
    
}

.window-body{
    align-items: center;
    justify-content: center;
    width:331px;
    height: 380px;
    overflow: clip;
    position: relative;
}

menu[role="tablist"] {
    display: flex;
    list-style-type: none;
    padding-left:8px;
    border: none;
    margin: 0;
    box-sizing: border-box;
    border-right:1px #222 solid;
    border-left:3px #dfdfdf solid;
    padding-top: 3px;
    outline:transparent 0;
    background-color: grey;
    height: 23px;
    position:relative;
}
    
  menu[role="tablist"]  button {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-top:grey 1px solid;
    box-shadow:inset 1px 1px #dfdfdf,  inset 2px 2px silver;
    font-size: 15px;
    box-sizing: border-box;
    font-family: inherit;
    
    margin: 2px;
    border-left: 1px solid;
    border-bottom: grey;
    text-decoration: none;
    margin-top: -4px;
    background-color: #808080;
    margin-left: -9px;
    padding-left: 9px;
    padding-bottom: 0;
    padding-top:4px;
    outline:transparent 0;
    color: #363636;
    text-shadow: 0 0 2px #191919;
    z-index: 1;
    height: 23px;
    position:relative; }
  
menu[role="tablist"] button[aria-selected="true"] {
            margin-bottom: 2px;
            margin-top: -4px;
            background-color: silver;
            margin-left: -9px;
        box-shadow: inset -1px -1px grey,inset 1px  #fff,inset -1px -1px grey,inset 1px 1px #fff;
            color: rgba(77, 77, 77, 0.7);
            text-shadow: 0 0 2px rgb(33, 33, 33);
            height: 25px;
            border-bottom:#dfdfdf 5px;
            position: relative;
    z-index: 444;
        }
menu[role="tablist"] button[aria-selected="true"]:focus {
            outline: 1px dotted #222;
            outline-offset: -4px;
            background-color: silver;
        }
    




menu[role="tablist"] button {
    position: relative;
    z-index: 1; /* baseline for all */
}
menu[role="tablist"] li:nth-child(1) button {
  z-index: 4;
}
menu[role="tablist"] li:nth-child(2) button {
  z-index: 3;
}
menu[role="tablist"] li:nth-child(3) button {
  z-index: 2;
}

#tab1{
    border:solid black 1px;
    box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    background-color:silver;
    align-items: top;
    justify-content:normal;
    width:329px;
    height: 329px;
    color: #601212;
    text-shadow: 0 0 2px #51090a;
    margin: auto;
    position: relative;
    z-index: 1;

}

#text{
    width: 299px;
    height:50px;
    padding: 20px;
    line-height: 1;
    display: flex;
    color: #373737;
    text-shadow: 0 0 2px #0d0d0d;
    background-color:transparent;
    font-size: 18px;
}




#kero{
    transform: translate(1,-45px);
}

#tab2{
    outline-style: solid;
    outline-color: #5e5e5e;
    outline-width: 1px;
    box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    align-items: center;
    justify-content: center;
    width:329px;
    height: 329px;
    color: #601212;
    text-shadow: 0 0 2px #51090a;
    z-index: 2;
    margin: auto;
    overflow-y: scroll;
    background-color: silver;
}

#tab2 img{
    height: 30%;
    width:30%;
    padding-top:7px;
    padding-left: 6px;
    padding-right: 0;
    padding-bottom: 0;
    margin: auto;
    justify-content: center;
    align-content: center;
    position: relative;
    display: flexbox;
}


#tab3{

    box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    background-color:silver;
    display: flex;              /* <-- correct way */   /* horizontal centering */
    width: 329px;
    height: 329px;
    color: #434343;
    text-shadow: 0 0 2px #51090a;
    z-index: 3;
    margin: auto; 
}

#tab3 iframe {
    display: flex;
    margin: auto;
    z-index: 5;
    width: 98%;
    height: 99%;
    box-shadow: inset -1px -1px #222,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    background-color:silver;
}






#petName-tag {
    float: left;
    top: -210px;
    position: relative;
    width: 100%;
    color: #040404;
}
input[type=button]{
    background: #997576;
    border: none;
    border-radius: 0;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
    font-family: inherit;
    color: #601212;
    text-shadow: 0 0 2px #51090a;;
}

button.default,input[type=button].default,input[type=button].default {
    box-shadow: inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset 2px 2px #fff,inset -3px -3px grey,inset 3px 3px #dfdfdf;
}


button:not(:disabled):active,input[type=button]:not(:disabled):active,input[type=button]:not(:disabled):active {
    box-shadow: inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;
    text-shadow: 1px 1px #222;
}


button:focus,input[type=reset]:focus,input[type=submit]:focus {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=button]::-moz-focus-inner {
    border: 0;
}

:disabled,:disabled+label,input[readonly],input[readonly]+label {
    color: grey;
}

:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled {
    text-shadow: 1px 1px 0 #fff;
}

[role="tabpanel"][hidden] {
  display: none;
}


model-viewer{
    z-index: 6;
    display:flex; 
    width: 100%;
    height: 100%;
    
}
.container{
    display: flex;
    height: 100%;
    
}
#video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill screen without stretching */
  background: black;
  opacity: 1;
  transition: opacity 0.05s ease; /* fade effect */
  pointer-events: none; 
}
#video.fade-out {
  opacity: 0;
}
#video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}
#video::-webkit-media-controls-enclosure {
  display: none !important;
}