/*
    Colors
    Are ya yellow?!: #feda6a
    Silver Fox: #d4d4dc
    Deep Matte Grey: #393f4d
    Dark Slate: #1d1e22
    text color   : white
    Green: #2ECC40
*/

/* dm-mono-300 - latin */
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 300;
    src: local(''),
         url('./fonts/dm-mono-v10-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/dm-mono-v10-latin-300.woff') format('woff'), /* Modern Browsers */
  }
  
  /* dm-mono-regular - latin */
  @font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('./fonts/dm-mono-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/dm-mono-v10-latin-regular.woff') format('woff'), /* Modern Browsers */                  
  }

  /* dm-mono-500 - latin */
  @font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('./fonts/dm-mono-v10-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/dm-mono-v10-latin-500.woff') format('woff'), /* Modern Browsers */
  }

body{
    font-family: 'DM Mono', monospace;
    background-color: #1d1e22;
    color: white;
    font-size: 1.1em;
}

h1, h2{
    margin: 0 auto;
    text-decoration: #feda6a underline;
    padding-bottom: 1vh;
}

a,  a:visited{
    color: #feda6a;
}

a:hover{
    color: #f9bf0f;
}

img{
    float: left;
    padding-right:1vw;
}

li{
    font-size: 1.5em;
    list-style: none;
}

.panel{
    background-color: #393f4d;
    padding: 2vh 2vh 2vw 2vw;
    border-radius: 4px;
    border: solid 1px #feda6a;
}

.ethernet-frame-grid{
    border: 1px solid #151d30;
    background-color: #feda6a;
    color: black;
    cursor: pointer;
}

.ethernet-frame-cell{
    border-left: 1px solid #151d30;
    text-align: center;
}

.frame-text{
    margin-top: 0.25em;
}

#tooltip {
    position: absolute;
    background: #1d1e22;
    color: white;
    padding: 8px;
    z-index: 999;
    border-radius: 4px;
    border: 1px solid #feda6a;
}

#wrapper{
    width: 70%;
    margin: 0 auto;
}