/*
    Theme:      Termideck Dark
    Author:     Joshua D. [ItsT3K]
    License:    GNU GPLv3
    Language:   CSS/HTML
    Type:       Dark, Simple, Minimal, Computer Aimed
*/
/* jacquard-12-regular - latin */

/* ================ START FONT IMPORT ================ */
/* 
    Font Importing - Fonts in this document are licensed under OFL 
    unless stated otherwise
*/
/* Regular Body Font - IBM Plex Sans - Mike Abbink, Bold Monday - Open Font License */
/* ibm-plex-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
    
  /* ======== Font importing ======== */
      /* 
           ! FONT INFORMATION !
      ==============================
      These fonts are copyrighted by
      MonotypeKK and are being used
      for non-commercial purposes.
      
      Fonts can be sourced from
      https://fontworks.co.jp
      */
      @font-face{
          font-family: 'FOT-Rodin Pro L';
          src:
              url("FOT-Rodin Pro L.otf");
              format("opentype");
              }
      @font-face{
	  font-family: 'FOT-Rodin Pro M';
	  src:
              url("FOT-Rodin Pro M.otf");
              format("opentype");
              }
      @font-face{
          font-family: 'FOT-Rodin Pro B';
          src:
              url("FOT-Rodin Pro B.otf");
              format("opentype");
              }
      
  /* ======== Border Box ======== */
      * {
          box-sizing: border-box;
      }
  /* ======== Body Style ======== */
      body {
          margin: 0;
          font-family: 'FOT-Rodin Pro M'; 
          background-color: #335;
          color: #aac;                         /* Font Color - Light Grey instead of White, less likely for visual fatigue */
      }
  /* ======== Top Navigation Bar ======== */
      ul.topnav {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #113;
          opacity: 75%;
          width: 100%;
          font-family: 'FOT-Rodin Pro L';
          margin: auto;
      }
      ul.topnav li {
          float: left;
      }
      ul.topnav li a {
          display: block;
          color: #eec;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }
      ul.topnav li a:hover{
          color: #FFF;
          text-decoration: bold;
          }
  /* ======== Other Stuff ======== */
      .container {
          display: flex;
      }
      table, th, td, tr {
          border: 1px solid #557;
          border-collapse: collapse;
        }
  /* ======== Text Definitions ========= */
        .BigListText{
            font-size: 24px;
            font-family: "FOT-Rodin Pro B";
            text-decoration: underline dotted;
        }
        .MonoText{
            font-family: "IBM Plex Mono Regular", monospace;
            font-weight: 400;
            font-style: normal;
            background-color:#000;
            border:1px;
            border-radius:8px;
            padding:2px;
      }
        .TopText{
            text-align: center;
            font-size: 42px;
            font-family: "FOT-Rodin Pro B";
      }
      .CompanyName{
            font-family: "IBM Plex Mono Regular", monospace;
            font-weight: 600;
            font-style: normal;
      }
      .ExampleText{
            font-family: "IBM Plex Mono Regular", monospace;
            font-weight: 300;
            font-style: normal;
            font-size: 10px;
      }
      .InternalContent {
          background-color: #5a5a5a;
          padding: 10px;
      }
      .CenterText{
          text-align:center
      }
      a:link {
          color:#EEEEEE;
          text-decoration: none; 
        }
      a:visited {
          color:#aaaaaa;
          text-decoration: none; 
        }
      a:hover {
          color:#cccccc;
          text-decoration: none; 
        }
      a:active {
          color:#eeeeee;
          text-decoration: none; 
        }
  /* ======== Shapes ======== */
      #ButtonBox {
          border-radius: 15px;
          border-color: #686868;
          background: #626262;
          padding: 20px; 
          width: 20%;
          height: 128px; 
          filter: drop-shadow(10px 6px 4px #3a3a3a);
          font-size: 150%;
          text-align: center;
          padding-top: 32px;
          color: #DDDDDD;
          font-family: "FOT-Rodin Pro M";
          margin: auto;
          /*background-size: 100%;*/
      } 
        

  /* Style the content */
      .content {
          background-color:rgba(40,40,65,.75); /* dark grey with an alpha channel */
          padding: 10px;
          width: 75%;
          font-family: "FOT-Rodin Pro M";
          color: #eec;
          filter: drop-shadow(10px 2px 4px #1c1c1c);
          margin: auto;
      }

      .footer {   
          background-color:rgba(30,30,60,.90); 
          text-align: center;
          color: #88a;
          font-family: "FOT-Rodin Pro L";
          font-size: 12px; 
          padding: 10px;
          width:75%;
          margin: auto;
          filter: drop-shadow(10px 2px 4px #161616);
      }
      h1 {
          font-weight: normal ;
          font-size: 48px;
          font-family: "FOT-Rodin Pro B";
          color: #dddddd;
      }
      h2 {
          font-weight: normal ;
          font-size: 32px;
          font-family: "FOT-Rodin Pro B";
          color: #dddddd;
      }
      h3 {
          font-weight: normal ;
          font-size: 24px;
          font-family: "FOT-Rodin Pro B";
          color: #dddddd;
      }
      radio {
          background-color: lightgrey;
          width: auto;
          border: 4px solid darkgrey;
          padding: 25px;
          margin: 25px;
  }
    	@media screen and (max-width: 600px) {
        	.content {
            		width: 95%;
        	}

                .footer {
                        width: 100%;
                        } 
    	}