html{
            
            position:relative;
        }
        body
        {
            background-color:#2E3440;
            color:#D8DEE9;
            text-align:center;
            font-family: inherit;
            
        }
        h1
        {    
            color:#ECEFF4;
        }
        div.container
        {
            border-style:solid;
            border-right-width: 20px;
            border-bottom-width: 20px;
            border-left-width:0px;
            border-top-width:0px;
            border-color: #434C5E;
            
            background-color:#3B4252;
            width:50%;
            
            
            text-align:center;
            font-size:20px;
            

            margin-left:auto;
            margin-right:auto;
            font-size:20px;
            padding-left: 2%;
            padding-right: 2%;
            padding-top: 1%;
            padding-bottom:30%;
            margin-bottom:20px;
            z-index:1;
            
}

        div.container
        {
            
        }
        
          #koboldbanner
         {
             height:auto;
             width:100%;
             z-index:1;
             margin-bottom:20px;
             margin-left:auto;
             margin-right:auto;
             min-height: 50px;
             top:250px;
             min-width:50%;
             max-width:90%;
        }  
        
        
        #main
        {
            
            width:50%;
            min-width:450px;
            margin-left:auto;
            margin-right:auto;
        
            
            
        }
        
#bodyDiv
        {
            
            width:50%;
            margin-left:auto;
            margin-right:auto;
            
            
            
        }

img#selfportrait 
        {
             margin-left:auto;
            width:400px;
            height:400px;
            z-index: 1; 
            position:fixed;
            min-height: 400px;
             min-width: auto;
            max-height:400px;
            max-width:auto;
            
            }
        
        @media (min-aspect-ratio:3/2)
        {
        img#selfportrait 
        {
            margin-left:auto;
            width:400px;
            height:400px;
            z-index: -1; 
            position:fixed;
            left:0;
            bottom:0;
              min-height: 400px;
             min-width: auto;
            max-height:400px;
            max-width:auto;
            
            
        }
        }
        
         @media (max-aspect-ratio:8/5)
        {
        img#selfportrait 
        {
             margin-left:auto;
            width:400px;
            height:400px;
            z-index: -1; 
            position:fixed;
            min-height: 400px;
             min-width: auto;
            max-height:400px;
            max-width:auto;
            }
        
        
        
        }
        
         @media (aspect-ratio:1/1)
        {
        img#selfportrait 
        {
             margin-left:auto;
            width:400px;
            height:400px;
            z-index: -1; 
            position:fixed;
            min-height: 400px;
             min-width: auto;
            max-height:400px;
            max-width:auto;
            
            }
        
        
        
        }


#koboldart
        {
            width:100%;
            height:auto;  
            margin-left:auto;
            margin-right:auto;
            margin-bottom:20px;
            
        }
         
        #kobold1
        {
            width:90%; 
            height:auto;
         align-self: right;
            
        }
        
        #koboldanimation
        {
            width:50%; 
            padding-bottom:10px;
            height:auto;
            align-self: left;
            
        }
        
        #noani
        {
            align-self: center;
        }
        
        #noelle
        {
            width:50%; 
            height:auto;
            float:left;
            
        }
        
        a
        {
            color:#D8DEE9;
            
        }


         iframe
        {width:100%; height:30%;}
        


 #index
        {
            
            margin-bottom:0; 
            
            
            
        }
        
        #indexmain{
            
            margin-top: 20px;
        }


        a:link#index { text-decoration: none; }


a:visited#index { text-decoration: none; }


a:hover#index { text-decoration: none; }


a:active#index { text-decoration: none; }


        #links{
            
            border: 1px #D8DEE9 solid;
            background: #D8DEE9;
            color: #3B4252; 
            
        }