/* 
 * css for index.html
 */

body {
   font-family: 'Source Code Pro', monospace, system-ui;
}

a {
   color: #ed0414;
}

/* material icons */
.material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;

   &.size {
      font-size: 16px;
      font-variation-settings: 
      'wght' 400,
      'opsz' 24;
   }
}

.header {
   font-family: 'Times New Roman', Times, serif;
   text-align: center;
   justify-content: center;
}

.socials {
   text-align: center;
   padding: 12px;
}

.linkl {
   text-decoration: none;
   /* vertical-align: middle; */
}

.logo {
   vertical-align: -5px;
}

.collapsible {
   font-family: 'Source Code Pro', monospace, system-ui;
   font-size: 12pt;
   background-color: #000;
   color: #fff;
   cursor: pointer;
   padding: 18px;
   width: 64%;
   border: none;
   text-align: left;
   outline: none;
   /* source: https://stackoverflow.com/questions/15300234/how-can-i-horizontally-center-a-button-element-in-a-div-element 
      centers the button */
   margin: 0 auto;
   display: block;
}

.active, .collapsible:hover {
   background-color: #ed0414;
}

.collapsible:after {
   content: "\002B";
   color: #fff;
   font-weight: bold;
   float: right;
   margin-left: 5px;
}

.active:after {
   content: "\2212";
}

.content {
   background-color: #eee;
   padding: auto; /* FIXME */
   width: 64%;
   text-align: left;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   margin: 0 auto;
   display: block;
}

/* 
   unordered list style
   source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style 
   changes style of list, unordered or ordered 
*/
.one {
   list-style: square;
}

.details {
   font-family: 'Victor Mono', monospace, system-ui;
   font-size: 9pt;
   color: #999;

   &.right {
      text-align: justify;
      text-align-last: right;
   }

   &.version {
      font-size: 6pt;
   }
}

.footer {
   text-align: center;
   padding: 12px;
}