/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@font-face
{
    font-family: MainFont;
    src: url(Fixedsys.ttf);
}

body
{
    background-color: #000000;
    color:            #44FF44;
    font-family:      MainFont, "Lucida Console", monospace;
    font-size:        20px;
    max-width:        1160px;
    margin:           auto;
    padding:          0;
    scrollbar-color:  #44FF44 #001100;
}

.right
{
  float:  right;
}

.innerborder
{  
    background-color: #001100;
}
hr
{
    background-color: #008800;
    color:            #008800;
}


/* --------------------------- Top Bar ---------------------------*/

.buttonz
{
    color:            #44FF44;
    display:          flex;
    width:            auto;
    margin:           auto;
    overflow:         auto;
}

.topbar
{
    list-style-type:  none;
    padding:          0;
    display:          flex;
    margin:           auto;
    justify-content:  center;
    align-items:      center;
    height:           140px;
}
.topbar h1
{
    width: 500px;
}
.topbar li a
{
    display:          inline-block;
    background-color: #004400;
    color:            #44FF44;
    text-align:       center;
    padding:          14px 16px;
    width:            80px;
    height:           40px;
    text-decoration:  none;
    margin:           6px 3px;
}
.topbar li a:hover
{
    background-color: #44FF44;
    color:            #000000;
}


/* --------------------------- Links ---------------------------*/
a:link{  color: #44FF44;  background-color: #008800;  text-decoration: none;}
a:visited{  color: #001100;  background-color: #004400;  text-decoration: none;}
a:hover{  color: #000000;  background-color: #44FF44;  text-decoration: underline;}
a:active{  color: #001100;  background-color: #44FF44;  text-decoration: underline;}

h2
{
    background-color: #004400;
    color:            #44FF44;
}

h3
{
    background-color: #002200;
    color:            #44FF44;
    margin-bottom:      0px;
}

.pagecontainer iframe
{
    border:           none;
    height:           800px;
    width:            100%;
    scrollbar-color:  #44FF44 #001100;
}
.mainstuff_full
{
    /* border: 3px solid #44FF44; */
    background-color: #000000;
    color:            #44FF44;
    width: auto;
    padding: 8px 8px;
    scrollbar-color:  #44FF44 #001100;
}

.mainstuff
{
    /* border: 3px solid #44FF44; */
    background-color: #000000;
    color:            #44FF44;
    margin-left: 158px;
    width: auto;
    padding: 8px 8px;
    scrollbar-color:  #44FF44 #001100;
}

.singleitem
{
    background-color: #001100;
    width:            auto;
    padding:          4px 32px;
    margin-top:       0px;
    margin-bottom:    32px;
}

.dlxcontainer
{
    display:          inline-block;
    width:            100%;
    overflow:         auto;
}
.dlx
{
    background-color: #008800;
    color:            #44FF44;
    float:            left;
    display:          flex;
    margin-left:      4px;
    margin-bottom:    4px;
    width:            120px;
    height:           80px;
    overflow:         auto;
}

.dlcontainer
{
    display:          inline-block;
    width:            100%;
    overflow:         auto;
}
.dl
{
    background-color: #008800;
    color:            #44FF44;
    float:            left;
    display:          flex;
    margin-right:     4px;
    margin-bottom:    4px;
    width:            120px;
    height:           80px;
    overflow:         auto;
}
.dl img
{
    background-color: #008800;
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
    height:       100%;
    object-fit:   scale-down;
}

.dl a:link{     display: flex; background-color: #008800; color: #44FF44;  width: 120px; height: 80px; text-decoration:  none;  margin: 0px;  justify-content: center;  align-items: center;}
.dl a:visited{  display: flex; background-color: #004400; color: #001100;  width: 120px; height: 80px; text-decoration:  none;  margin: 0px;  justify-content: center;  align-items: center;}
.dl a:hover{    display: flex; background-color: #44FF44; color: #000000;  width: 120px; height: 80px; text-decoration:  none;  margin: 0px;  justify-content: center;  align-items: center;}
.dl a:active{   display: flex; background-color: #44FF44; color: #001100;  width: 120px; height: 80px; text-decoration:  none;  margin: 0px;  justify-content: center;  align-items: center;}


.sectioncontainer
{
    background-color: #000000;
    color:            #44FF44;
    display:          inline-block;
}

.textfix
{
    margin-top:      0px;
    margin-left:      0px;
    margin-right:     128px;
    margin-bottom:    4px;
    background-color: transparent;
}
.gi1
{
    display:inline;
    margin-left:16px;
    background-color: #008800;
}
.gi2
{
    display:inline;
    margin-left:64px;
    background-color: #008800;
}

/* --------------------------- Image Grid ---------------------------*/
.imagegrid
{
    background-color: #000000;
    margin:           5px;
    border:           3px solid #44FF44;
    float:            left;
    width:            300px;
    height:           300px;
}


.imagegrid a
{
    background-color: transparent;
}

.imagegrid:hover
{
    background-color: #004400;
    border:           3px solid #44FF44;
}

.imagegrid img
{
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
    height:       80%;
    object-fit:   scale-down;
}
.image_title
{
    padding:    15px;
    text-align: center;
}


/* ---------------------------Side Bar ---------------------------*/
.sidebar
{
    /* border: 3px solid #44FF44; */
    background-color: #001100;  
    color: #44FF44;
    margin: 0;
    padding: 8px 8px;
    width: 134px;
    height: 100%;
    position: fixed;
    overflow: auto; 
    justify-content:  center;
    align-items:      center;
}

.sidebar a
{
    display:          block;
    background-color: #004400;
    color:            #44FF44;
    text-align:       center;
    padding:          2px 2px;
    width:            120px;
    height:           70px;
    text-decoration:  none;
    margin:           6px auto;
}

.sidebar a:hover
{
    background-color: #44FF44;
    color:            #000000;
}



.bottomthing
{
    background-color: #001100;
    padding:          0;
    display:          flex;
    margin:           auto;
    justify-content:  center;
}

.bottomthing img
{
    background-color: #001100;
    width: 100%;
    height: 8px;
}





.myface
{
	float:left;
    content: url('Fletcher_avata2rBIGBIG.png');
}
.myface:hover
{	
	float:left;
    content: url('Fletcher_avata2rBIGBIG4.png');
}
.myface:active
{	
	float:left;
    content: url('Fletcher_avata2rBIGBIG3.png');
}

.myface:visited
{	
	float:left;
    content: url('Fletcher_avata2rBIGBIG4.png');
}