@import url('https://fonts.googleapis.com/css?family=Roboto');



            html {
                scroll-behavior: smooth;
            }

            body {
                text-align: center;
                background-image:url("resources/background/8.jpg") ;
                background-color: #000000;
                background-position: top;
                background-repeat: repeat;
                background-size: auto;
                color: #dedede;
                font-family: 'Roboto Thin', 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif;
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 0px;
                list-style-type: none;
            }
            header {
                margin: 0 0 0 0;
                background-color: #141414;
                text-align: center;
                background-position: center;
                color: #dedede;
            }

	
            ::-webkit-scrollbar {
                width: 2px;
            }
            
            ::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px rgb(58, 58, 58); 
                border-radius: 10px;
            }
            
            ::-webkit-scrollbar-thumb {
                background: rgb(148, 20, 20); 
                border-radius: 10px;
            }
            
            ::-webkit-scrollbar-thumb:hover {
                background: #b30000; 
            }
                header a {
                text-decoration: none;
                color: #dedede;
                text-transform: uppercase;
                margin-top: 25%;
            }
            header a:hover {
                color: rgb(226, 79, 79);
            }

            header .logo a {
                background-image: url("resources/logo.png");
                background-size: 100%;
                background-repeat: no-repeat;
                display: table-cell;
                position: relative;
                top: 0px;
                width: 500px;
                height: 75px;
                text-indent: -9999999px;
                
            }header .logo-new a {
                background-image: url("resources/logo-new.png");
                background-size: 100%;
                background-repeat: no-repeat;
                display: table-cell;
                position: relative;
                top: 0px;
                width: 500px;
                height: 75px;
                text-indent: -9999999px;
                
            }

            header li {
                padding: 2%;
                display: inline-block;
            }
            header li.navigator {
                font-size: 150%;
                font-family: 'Courier New', monospace;
            }


            section.par {
                margin-top: 0%;
                padding-top: 5%;
                margin-bottom: 5%;
                padding-left: 1%;
                padding-right: 1%;
            }

            section.feature.close {
                color: #efefef;
                padding: 2%;
                font-size: 125%;
                font-family: 'Courier New';
            }
            section.feature.lilclose {
                color: #efefef;
                padding: 2%;
                font-size: 100%;
                font-family: 'Courier New';
            }

            section.feature.title {
                color: #dedede;
                padding: 3%;
                font-size: 100%;
            }
            section.feature.ce {
                color: #dedede;
                padding: 0%;
                font-size: 150%;
                font-family: 'Copperplate Gothic Light';
            }
			
			section.feature.title.bigger {
                color: #dedede;
                padding: 0%;
                font-size: 300%;
                font-family: 'Courier New';
            }
            h2{
                margin-top: 3%;
                margin-bottom: 0%;
            }

            .feature div {
                text-align: center;
                font-size: 125%;
                color: #dedede;
                margin: 1px;
                width: 100%;
            }

            footer {
                text-align: center;
                background-attachment: scroll;
                background-position: 0% 0%;
                position: fixed;
                bottom: 0;
            }

            

            img.contact {
                margin-top: 3%;
                margin-left: 1%;
                margin-right: 1%;
                width: 10%;
                border-bottom-left-radius: 0%;
                border-bottom-right-radius: 9%;
                border-top-left-radius: 9%;
                border-top-right-radius: 0%;
            }

            img.contact:hover{
                filter: brightness(0.8);
            } 

            img.games {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 300px;
            }
            img.ill {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 17%;
            }
            
            img.games1 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 700px;
            }
            img.games2 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 150px;
            }
            img.games3 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 250px;
            }
            img.games4 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 100px;
            }
            img.games5 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 400px;
            }
            img.games6 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 600px;
            }
            img.games7 {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                width: 500px;
            }

            img.games:hover{
                filter: brightness(0.7);
            }
             img.games1:hover{
                filter: brightness(0.7);
            } 
            img.games2:hover{
               filter: brightness(0.7);
           }

            section .mybutton {
                text-decoration: none;
                font-family: 'Courier New', monospace;
                font-size: 27px;
                color: #151D21;
                background: rgb(219, 66, 66);
                display: inline-flex;
                padding: 5px;
                margin-top: 30px;
                margin-right: 1%;
                margin-left: 1%;
                border: none;
                border-top-left-radius: 10px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 10px;
            }
        
            section .mybutton:hover {
                background: rgb(177, 18, 18);
                font-size: 27px;
            }

            img.bio {
                margin-left: 5px;
                margin-right: 5px;
                margin-top: 5px;
                border-bottom-left-radius: 20%;
                border-bottom-right-radius: 20%;
                border-top-left-radius: 20%;
                border-top-right-radius: 20%;
                width: 100px;
            }
            .iconDetails {
                margin: auto;
                border-bottom-left-radius: 20%;
                border-bottom-right-radius: 20%;
                border-top-left-radius: 20%;
                border-top-right-radius: 20%;
                width: 100px;
                float:left; 
                padding: 10px;
               } 
               
            .container2 {
                margin:auto;
                width:40%;
                height:auto;
                padding: 5px;
            }
            
            h4 {
                float:left; 
                font-size: 20px;
                margin-top:30px;
                margin-top:30px;
                text-align: left;
            }
            h5 {
                float:left; 
                font-size: 15px;
                margin:0;
            }

            .collapsible {
                background-color: #181818;
                color: rgb(255, 255, 255);
                cursor: pointer;
                padding: 18px;
                width: 20%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
              }
              
              /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
              .active, .collapsible:hover {
                background-color:#cc3244;
              }
              
              /* Style the collapsible content. Note: hidden by default */
              .content {
                padding: 0 15px;
                display: none;
                overflow: hidden;
                background-color: #181818;
              }
              img.games44 {
                  margin: auto;
                  width: 100%;
                  text-align: center;
                  display: block;
                  
              }