@font-face {
    font-family: "tme-rg";
    src: url("../fonts/toyota-display/toyotadisplay_rg.woff") format('woff');
    font-weight: normal;
}

@font-face {
    font-family: "tme-bd";
    src: url("../fonts/toyota-display/toyotadisplay_bd.woff") format('woff');
    font-weight: bold;
}

html, body {

    /*   This is also the color of the WebGL background as long as no environment is provided  */
    background-color: #ffffff;

    color: #ffffff;
    font-family: tme-rg,Helvetica,Arial,Roboto,sans-serif;
    padding:0;
    margin:0px; 

    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);


    touch-action: manipulation; /* manipulation */

    /* iOS: avoid callouts on touch */
    -webkit-touch-callout: none;

    /* avoid selection of text and other elements */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* avoid native ui appearance */
    appearance: none;

    overflow: hidden;
    
    /*height:100vh;*/

    
    
}

legend {
  font: 8px arial, sans-serif;

}


p { 
/*                color: #CC2229;*/
    color: #000000;
    font-size: 1.4em;
    letter-spacing: 3px;
/*                line-height: 100%;*/
    font-family: tme-bd;
}

h1 { 
    font-size: 6vh;
    /*font-family: lexus-bo;*/
    text-shadow: 0px 0px 15px rgba(126,89,55,0.55);

    /*text-shadow: 0px 0px 25px rgba(206,89,55,0.85);*/
    /*text-shadow:0px 0px 10px #454741, 0px 0px 4px #5a5f53;*/
    /*text-shadow: -3px -3px 0 #a9aca1, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
}
h2 { 
    /*color: #a9aca1;*/
    color: #ffffff;
    font-size: 1.5em;
    /*font-family: lexus-bo;*/
    /*text-shadow: 0px 0px 40px #a9aca1;*/
    text-shadow: 0px 0px 25px rgba(255,255,255,0.85);
}

/* webgl canvas container */
.tme {
    width: 100vw;
    height: 100vh;
}

#gpu {
    text-align: center; 
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
}

#rotateDevice {
    pointer-events: none;
    display: flex;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    visibility: hidden;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.orientationChange {
    width: 80px;
    height: auto;
}


/* scrollable container */            
main {
    width: 100vw;
    height: 100vh;
    z-index: 99;
    position: absolute;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    /*scroll-snap-type: y proximity;*/
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* scroll areas */ 
section {

    height: 100vh;
    top: 0%;
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*padding: 20px;*/
    font-size: 4vh;

    /*scroll-snap-align: center;*/
    
}


nav {
    top: 0px;
    width: 100vw;
    height: 70px;
    z-index: 100;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    overflow: hidden;
    margin-left: calc(100vw - 100%);
    margin-right: 0;

    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 45px #cccccc;
}
nav::-webkit-scrollbar {
    background: transparent; /* make scrollbar transparent */
}



#logo {

    /*position: fixed;*/
    /*margin-left: -100px;*/
    pointer-events:none;
    width: 100px;
    height: 200px;
    background: none;
    background-image: url('../images/toyota.svg');    
    background-size: contain;
    background-position: 0%;
    background-repeat: no-repeat;
}





.menu {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  justify-items: center;
}

#area1 {
  margin-right: auto;
}

#area2 {
  
}

#area3 {
  margin-left: auto;
}

main::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

main::-webkit-scrollbar-track {
  background: rgba(169, 172, 160, 1);        /* color of the tracking area */
}

main::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .4);    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  /*border: 3px solid rgba(190, 190, 160, .6);  /* creates padding around scroll thumb */*/
}

.scrollbar::-webkit-scrollbar {
  display: none;
}

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}