/*---------------------------------------------------------------------------*/
:root {
   --headerColor : #496B8F;   
   --borderColor : #999;
   --bodyWidth   : 1024px;
}
/*---------------------------------------------------------------------------*/
body { 
    width        : var(--bodyWidth);
    max-width    : var(--bodyWidth);
    min-width    : var(--bodyWidth);
    margin-left  : auto;
    margin-right : auto;
    border       : 0px dotted #999; 
    font-family  : "Arial", "Helvetica", "sans-serif";
    height       : fit-content;
    min-height   : fit-content; 
    max-height   : fit-content;
    font-size    : 12pt; 
}

table {
   border-collapse : collaspse; 
   border-top      : 1px dotted var(--borderColor); 
   border-left     : 1px dotted var(--borderColor); 
}

table tbody tr td {
   border-right    : 1px dotted var(--borderColor); 
   border-bottom   : 1px dotted var(--borderColor); 
   padding         : 0.2em; 
}

table.clean {
   border : 0px dotted #999; 
}

table.clean tbody tr td {
   border-right    : 0px dotted var(--borderColor); 
   border-bottom   : 0px dotted var(--borderColor); 
}

.oneEm {
   position: fixed; 
   left : 0px; 
   top : 0px; 
   width     : 1em;
   min-width : 1em; 
   max-width : 1em;
}

footer {
   position   : absolute; 
   bottom     : 0em;
   width      : 100%;
   text-align : center;
}

.projectLinkImg {
   width         : 300px;
   min-width     : 300px;  
   max-width     : 300px;
   height        : 159px;
   min-height    : 159px; 
   max-height    : 159px;
   border        : 1px dotted var(--borderColor);
   border-radius : 1em; 
   display       : inline-block; 
}

h5 {
   font-size     : 1.2em; 
   font-weight   : bold;
   color         : var(--headerColor);
   margin-bottom : 0.5em; 
   margin-top    : 0.2em; 
}

div {
   text-align    : justify;
} 

.myProjects {
   
   width      : 100%; 
   text-align : left;
   border     : 0px dotted forestgreen;
}

.myProjects a {
   margin-bottom: 0.5em;
}

a {
   width : fit-content; 
}
/*---------------------------------------------------------------------------*/

@media screen and (max-width: 768px) 
{
   body {
      width     : 98%;
      min-width : 98%; 
      max-width : 98%;
   }
   
   .myProjects {
      text-align : center; 
   }
}

@media screen and (max-width: 1280px) 
{
   body {
      width     : 98%;
      min-width : 98%; 
      max-width : 98%;
   }
}

@media screen and (max-width: 860px) 
{
   body {
      width     : 98%;
      min-width : 98%; 
      max-width : 98%;
   }
   
   .myProjects {
      text-align : center; 
   }
  
}

@media screen and (max-width: 384px) 
{
   body {
      width     : 384px;
      min-width : 384px; 
      max-width : 384px;
   }
   
   .projectLinkImg {
      display : block; 
   }
   
   .myProjects {
      text-align : center; 
   }
   
   .myProjects a {
      display : block; 
      margin-left:auto; 
      margin-right: auto; 
   }
}
/*---------------------------------------------------------------------------*/