@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');


* {
  
  padding: 0;
  margin: auto;
  box-sizing: border-box;
  font-family: 'Noto Sans', sans-serif;
  font-weight: bold;


}

body {

  background-color: whitesmoke;

}


/* header */

.nav{
    
    margin-bottom: 50px;
    width: 90%;
    text-align: center;
    margin-top: 15px;
    padding: 10px;
}

#navigation {
    
    text-align: center;
    text-decoration: none;
    color: rgb(29, 149, 200);
    font-weight: bold;
    font-family: monospace;
    font-size: 15px;
    padding: 10px;
    display: inline-block;
    border: solid 2px rgb(29, 149, 200);
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.5);
}

#navigation:hover {
    
    color: yellow;
    font-size: 100%;
}

#navigation:link {
    
    color: black;
}


#navigation:active {
    
    color: yellow;
}


.videoControls {

    display: flex;
    justify-content: center;
    margin-top: 10px;
    
  }
  
  .playPauseButton {

    margin: 0 5px;
    padding: 5px 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;

  }

  canvas {

    display: block;

  }
  
  #videoOne {

    width: 100%;
    height: auto;
    max-width: 1280px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
   

  }
  
  .frameContainer {

    padding: 30px;
    

  }

  
  /* OS X Yosemite Template from https://codepen.io/JohJakob/pen/YPxgwo adjusted to fit the requirements of my website */
  /* window BEGIN */
  
  a {

    text-decoration: none;

  }
  
  span {

    line-height: 9px;
    vertical-align: 50%;

  }
  
  .window {

    margin: auto;
    width: 100%; 
    height: auto;
    max-width: 1280px;
    border-radius: 6px;
    overflow: hidden;

  }
  
  .titlebar {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ebebeb, color-stop(1.0, #d5d5d5)));
    background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
    background: -moz-linear-gradient(top, #2c0808, #d5d5d5);
    background: -ms-linear-gradient(top, #ebebeb, #d5d5d5);
    background: -o-linear-gradient(top, #ebebeb, #d5d5d5);
    background: linear-gradient(top, #ebebeb, #d5d5d5);
    color: #000000;
    font-size: 11pt;
    line-height: 20px;
    text-align: center;
    width: 100%;
    height: auto;
    max-width: 1280px;
    border-top: 1px solid #f3f1f3;
    border-bottom: 1px solid #b1aeb1;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    cursor: default;

  }
  
  

#windowTitle {

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px
}

.buttons {

  padding-left: 8px;
  padding-top: 3px;
  float: left;
  line-height: 0px;

}

.buttons:hover a {

  visibility: visible;

}

.close {

  background: #ff5c5c;
  font-size: 9pt;
  width: 11px;
  height: 11px;
  border: 1px solid #e33e41;
  border-radius: 50%;
  display: inline-block;

}

.close:active {

  background: #c14645;
  border: 1px solid #b03537;

}

.close:active .closebutton {

  color: #4e0002;

}

.closebutton {

  color: #820005;
  visibility: hidden;
  cursor: default;

}

.minimize {

  background: #ffbd4c;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 4px;
  width: 11px;
  height: 11px;
  border: 1px solid #e09e3e;
  border-radius: 50%;
  display: inline-block;

}

.minimize:active {

  background: #c08e38;
  border: 1px solid #af7c33;

}

.minimize:active .minimizebutton {

  color: #5a2607;

}

.minimizebutton {

  color: #9a5518;
  visibility: hidden;
  cursor: default;

}

.zoom {

  background: #00ca56;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 6px;
  width: 11px;
  height: 11px;
  border: 1px solid #14ae46;
  border-radius: 50%;
  display: inline-block;

}

.zoom:active {

  background: #029740;
  border: 1px solid #128435;

}

.zoom:active .zoombutton {

  color: #003107;

}

.zoombutton {

  color: #006519;
  visibility: hidden;
  cursor: default;

}

/* window END */  

/* footer */
footer {

  position: fixed;
  padding: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 100%;
  font: inherit;
  text-align: center;
  font-family: monospace;

}