*{
    box-sizing: border-box;
}

/*There was a * before {box-sizing} just check if this works*/
/*Variables*/
.index {/*Mustard Yellow*/--active-color: rgba(232,201,0,0.75);}
.skills {/*Silver*/--active-color: rgba(125,134,135,0.75);}
.professional {/*Bronze*/--active-color: rgba(113,77,22,0.75);}
.gamesJams {/*Ruby*/--active-color: rgba(224,30,30,0.75);}
.solo {/*Sapphire*/--active-color: rgba(15,91,238,0.75);}
.rd2 {/*NeonBlue*/--active-color: rgba(23,211,247,0.75);}
.coinOp {/*Blue*/--active-color: rgba(0,109,255,0.75);}
.hauntedHelper {/*Lilac*/--active-color: rgba(130,83,174,0.75);}
.quantumAxle {/*DarkPurple*/--active-color: rgba(65,30,255,0.75);}
.doomedFlux {/*PaleGreen*/--active-color: rgba(112,199,187,0.75);}
.static {/*Coralbrown*/--active-color: rgba(126,81,96,0.75);}
.aKOM {/*Mustard Yellow*/--active-color: rgba(232,201,0,0.75);} /*Same as Index*/
.rem {/*PalePurple*/--active-color: rgba(147,79,233,0.75);}
.fotp {/*Red*/--active-color: rgba(242,22,39,0.75);}
.pDisorder {/*Jade*/--active-color: rgba(27,221,169,0.75);}
.suzaku {/*Brown*/--active-color: rgba(96,65,35,0.75);}
.sakuraCell {/*Peach*/--active-color: rgba(238,198,152,0.75);}
.robot {/*DarkGreen*/--active-color: rgba(41,124,108,0.75);}
.wHeart {/*Copper*/--active-color: rgba(184,95,51,0.75);}


h1
{
    width: 100vw; /*Was 100vw*/
    margin: 0;/*HAD !important*/
    padding: 50px;/*padding was 50px*/
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative; /*Was relative*/
    font-family: "Kosugi Maru", serif;
    font-style: bold;
    font-size: clamp(30px, 5vw, 65px);
    border: 3px solid #115F63;
    color: white;
   /*Should be Teal
  
    
    /*
    border-bottom-style: solid;
    border-bottom-width: 0.5em; 
    border-bottom-color: #115F63;
 */   
    background-color: rgba(19,131,137,0.5);
   
}

.homePage h1
{
     background-color: rgba(19,131,137,0.5);
     border: 3px solid #115F63;
} 

.skillsEducation h1
{
    background-color: rgba(73,23,116,0.5);
    border: 3px solid rgb(130,57,130);
}

.professionalWorks h1
{
    background-color: rgba(39,64,36,0.5);
    border: 3px solid rgb(82,99,37);
}

.gamesJams h1
{
    background-color: rgba(44,39,39,0.5);
    border: 3px solid rgb(43,6,6);
}

.soloUniversity h1
{
    background-color: rgba(140,154,181,0.5);
    border: 3px solid rgb(0,39,113);
}

.rd2 h1 
{
     background-color: rgba(255,0,221,0.5);
     border: 3px solid rgb(57,21,93);
     font-family: "Dela Gothic One", sans-serif; /*HAD !important*/
     font-weight: 400;
}

.wHeart h1
{
    background-color: rgba(210,207,152,0.5);
     border: 3px solid rgb(47,235,255);
     font-family: "Zen Antique Soft", serif; /*NEED TO FIND A FONT THAT SUITS*/
     font-weight: 400;/*HAD !important*/
}

.coinOp h1
{
    background-color: rgba(173,173,173,0.5);
     border: 3px solid rgb(255,25,175);
     font-family: "Rampart One", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.hauntedHelper h1
{
    background-color: rgba(17,93,80,0.5);
     border: 3px solid rgb(56,234,230);
    font-family: "Potta One", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.quantumAxle h1
{
    background-color: rgba(70,0,111,0.5);
     border: 3px solid rgb(134,164,255);
    font-family: "Mochiy Pop One", sans-serif; /*HAD !important*/
     font-weight: 400;
}

.doomedFlux h1
{
    background-color: rgba(173,9,57,0.5);
     border: 3px solid rgb(68,0,2);
    font-family: "New Tegomin", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.static h1
{
    background-color: rgba(31,88,75,0.5);
     border: 3px solid rgb(0,239,255);
    font-family: "DotGothic16", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.aKOM h1
{
     background-color: rgba(212,14,75, 0.5);
     border: 3px solid rgb(23,211,247);
    font-family: "Yuji Mai", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.rem h1
{
     background-color: rgba(255,157,2, 0.5);
     border: 3px solid rgb(241,22,72);
    font-family: "Hachi Maru Pop", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.fotp h1
{
     background-color: rgba(6,0,0, 0.5);
     border: 3px solid rgb(223,122,0);
    font-family: "Yuji Boku", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.robot h1
{
     background-color: rgba(237,28,36, 0.5);
     border: 3px solid rgb(64,221,217);
    font-family: "RocknRoll One", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.sakuraCell h1
{
     background-color: rgba(255,170,184, 0.5);
     border: 3px solid rgb(114,46,56);
    font-family: "M PLUS 1 Code", sans-serif;
     font-weight: 400;/*HAD !important*/
}

.suzaku h1
{
     background-color: rgba(37,234,250, 0.5);
     border: 3px solid rgb(255,158,46);
    font-family: "Stick", sans-serif; 
     font-weight: 400;/*HAD !important*/
}

.pdisorder h1
{
     background-color: rgba(245,20,20, 0.5);
     border: 3px solid rgb(237,233,69);
    font-family: "Reggae One", sans-serif; 
     font-weight: 400;/*HAD !important*/
}



ul.topnav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    
}

/*This is the list position, i.e. home, games jams etc.*/
ul.topnav li
{
    margin-left: 10px;
    float: left;
    /*Will see about this border*/
    /*Should be a dark purple.rgba(22,15,56,0.5)*/
    /*border: 5px solid rgba(153,153,153,0.5);*/
}

 ul.topnav li.language
{
   margin-right: 10px;
    float: right;
   /* transform: translateY(-15px);*/
} 

ul.topnav li.language a:hover
{  
    /*Red text*/
    color: red;}


ul.topnav li a:hover:not(.active)
{
     background-color: #111;
}

ul.topnav li.language a:hover:not(.active)
{  background-color: white;
   /*margin-top:0;*/} /*WAS ON*/
   /*transform: scaleY(0.5);}*/

/*This is the active page i.e. home page will be a set colour when active.*/
ul.topnav a.active
{
      /*Mustard yellow*/
    background-color: rgba(232,201,0,0.75);
}

ul.topnav a.skillsEducation.active 
{
    /*silver*/
    background-color: rgba(125,134,135,0.75);
}

ul.topnav a.professionalWorks.active 
{
    /*Bronze*/
    background-color: rgba(113,77,22,0.75);
}

ul.topnav a.gamesJams.active 
{
    /*Ruby*/
    background-color: rgba(224,30,30,0.75);
}

ul.topnav a.soloUniversity.active
{
    /*Sapphire*/
    background-color: rgba(15,91,238,0.75);
}


ul.topnav a.rd2.active 
{
    /*Cyan*/
    background-color: rgba(23,211,247,0.75);
}

ul.topnav a.wHeart.active
{/*Copper*/
    background-color: rgba(184,95,51,0.75);
}

ul.topnav a.coinOp.active 
{
    /*Blue*/
    background-color: rgba(0,109,255,0.75);
}

ul.topnav a.hauntedHelper.active 
{
    /*purple*/
    background-color: rgba(130,83,174,0.75);
}

ul.topnav a.quantumAxle.active 
{
    /*purple*/
    background-color: rgba(65,30,255,0.75);
}

ul.topnav a.doomedFlux.active 
{
    /*teal/green*/
    background-color: rgba(112,199,187,0.75);
}

ul.topnav a.static.active 
{
    /*teal/green*/
    background-color: rgba(126,81,96,0.75);
}

ul.topnav a.rem.active 
{
    /*teal/green*/
    background-color: rgba(147,79,233,0.75);
}

ul.topnav a.fotp.active 
{
    /*teal/green*/
    background-color: rgba(242,22,39,0.75);
}

ul.topnav a.robot.active 
{
    /*teal/green*/
    background-color: rgba(41,124,108,0.75);
}

ul.topnav a.sakuraCell.active 
{
    /*Peach*/
    background-color: rgba(238,198,152,0.75);
}

ul.topnav a.suzaku.active 
{
    /*Brown*/
    background-color: rgba(96,65,35,0.75);
}

ul.topnav a.pdisorder.active 
{
    /*Jade*/
    background-color: rgba(27,221,169,0.75);
}
/*ul.topnav a.aKOM.active 
{
    /*Cyan
    background-color: rgba(23,211,247,0.75);
}


/*This is the list's links themselves their shape and colour i.e. Games jam, home etc.*/
/*ul.topnav*/ li a, .dropbtn
{
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    /*background-color: rgba(72,72,72,1);*/
}

/*This is the default list when you hover over it, it will change the BG colour i.e. gamesjams*/

li a:hover, .dropdown:hover .dropbtn
{
    /*rgba(22,15,56,0.5) purple Below is a dark grey*/
    background-color: rgba(46,46,48,0.5);
}
/*I toggled this out before shall see what happens.*/
/*li.dropdown
{
    /*Was inline-block
    display: inline-block;
}*/


/*Dropdown boxes*/
.dropdown-content
{
    display: none;
    /*was absolute*/
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden; /*was hidden but it stops the sticky from working allegedly*/
}
/*Link colours for dropdown.*/
.dropdown-content a
{
    /*list-style-type: none;*/
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    /*was block*/
    display: grid;
    text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content
{display: block;
 }


.language 
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px; 
      /*transform: translateY(-15px);*/
}

.language img
{
    /*margin-top: 15px;*/
    /*align-self: end;*/
     display: inline-block;
     width: 24px;
     height: auto;
     vertical-align: middle;
     transform: translateY(3px);
    /*padding-top: 15px;*/
}

@media screen and (max-width: 1024px) /*768*/
{
     ul.topnav li {float: none;}
     ul.topnav li.language{float: none;} 
}

/*This is for mobile devices and will alter the shape of our nav to suit the device.*/
@media screen and (max-width: 500px) 
{
    ul.topnav li {float: none;}
    ul.topnav li.language{float: none;} 
}

body
{
min-height: 100vh;
display: flex;
/*flex: 3;*/
flex-direction: column;
    /*Justify content was felx-start*/
justify-content: center;
align-items: center;
margin: 0;
/*margin-left: 10px;
margin-right: 10px;*/
padding: 0 5%;
font-family: "Kosugi Maru", serif;
font-size: calc(10px + 0.5vw);
text-align: center;/*Was center*/
color: white;   
    /*Should be code Navy blue,  old was Charcoal 72,72,72/grey*/
background-color: rgba(13,17,22,100);
/*Z-index: -1;*/  
 /*max-width: 90%;*/
 white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /*Seeing if this fixes Horizontal scrolling.*/
    overflow-x: hidden;
    width: 100%;
}
/*
@media only screen and (max-width: 500px)
{ body
 {
     display: block;
 }
    
}
*/
div.text
{
    box-sizing: border-box;
    /*max-width: 1600px;*/ /*Was 1200px*/
    min-width: 200px;
    width: 100%;
    margin: 0 auto;
}
/*Desktops*/

@media only screen and (min-width: 1367px) {
    div.text {
        max-width: 1600px;
        /*color: green;*/
    }
}
/*Tablet/CB/Laptop*/
@media only screen and (max-width: 1366px) /*768*/
{div.text
 {
    max-width: 900px;
    /* color: red;*/
    
 }
}

@media only screen and (max-width: 1366px) and (orientation: portrait) /*768*/
{div.text
 {
    max-width: 600px;
    /* color: red;*/
    
 }
}

/*Mobile*/


@media only screen and (max-width: 799px) /*was 500*/
{div.text
 {
    max-width: 500px;
      /*color: pink;*/
      
 }
}


@media only screen and (max-width: 799px) and (orientation: portrait) /*was 500*/
{div.text
 {
    max-width: 300px;
      /*color: pink;*/
      
 }
}

main
{
    flex-grow: 1;
}

h2
{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Kosugi Maru", serif;
    font-style: bold;
    font-size: clamp(28px, 4vw, 55px);
    color: white;
  
}

.rd2 h2
{font-family: "Dela Gothic One", sans-serif;
font-weight: 400;}/*HAD !important*/

.wHeart h2
{
     font-family: "Zen Antique Soft", serif; 
     font-weight: 400;/*HAD !important*/
}

.coinOp h2{font-family: "Rampart One", sans-serif;
           font-weight: 400;} /*HAD !important*/

.hauntedHelper h2{font-family: "Potta One", sans-serif;
                  font-weight: 400;} /*HAD !important*/

.quantumAxle h2{font-family: "Mochiy Pop One", sans-serif;
                font-weight: 400;} /*HAD !important*/

.doomedFlux h2 {font-family: "New Tegomin", sans-serif;
                font-weight: 400;} /*HAD !important*/

.static h2 {font-family: "DotGothic16", sans-serif;
            font-weight: 400;} /*HAD !important*/

.aKOM h2{font-family: "Yuji Mai", sans-serif;
         font-weight: 400;} /*HAD !important*/

.rem h2 {font-family: "Hachi Maru Pop", sans-serif;
         font-weight: 400;} /*HAD !important*/

.fotp h2 {font-family: "Yuji Boku", sans-serif;
          font-weight: 400;} /*HAD !important*/

.pDisorder h2{font-family: "Reggae One", sans-serif;
              font-weight: 400;} /*HAD !important*/

.suzaku h2{font-family: "Stick", sans-serif;
           font-weight: 400;} /*HAD !important*/

.sakuraCell h2{font-family: "M PLUS 1 Code", sans-serif;
               font-weight: 400;} /*HAD !important*/

.robot h2{font-family: "RocknRoll One", sans-serif;
          font-weight: 400;} /*HAD !important*/



h3
{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Kosugi Maru", serif;
    font-style: bold;
    font-size: clamp(24px,3vw,45px);
    color: white;
    
}

.rd2 h3
{
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;/*HAD !important*/
}

.wHeart h3
{
     font-family: "Zen Antique Soft", serif; 
     font-weight: 400;/*HAD !important*/
}

.coinOp h3{font-family: "Rampart One", sans-serif;
           font-weight: 400;}/*HAD !important*/

.hauntedHelper h3{font-family: "Potta One", sans-serif;
                  font-weight: 400;} /*HAD !important*/

.quantumAxle h3{font-family: "Mochiy Pop One", sans-serif;
                font-weight: 400;} /*HAD !important*/

.doomedFlux h3 {font-family: "New Tegomin", sans-serif;
                font-weight: 400;} /*HAD !important*/

.static h3 {font-family: "DotGothic16", sans-serif;
            font-weight: 400;} /*HAD !important*/

.aKOM h3 {font-family: "Yuji Mai", sans-serif;
          font-weight: 400;} /*HAD !important*/

.rem h3 {font-family: "Hachi Maru Pop", sans-serif;
         font-weight: 400;} /*HAD !important*/

.fotp h3 {font-family: "Yuji Boku", sans-serif;
          font-weight: 400;} /*HAD !important*/

.pDisorder h3{font-family: "Reggae One", sans-serif;
              font-weight: 400;} /*HAD !important*/

.suzaku h3{font-family: "Stick", sans-serif;
           font-weight: 400;} /*HAD !important*/

.sakuraCell h3{font-family: "M PLUS 1 Code", sans-serif;
               font-weight: 400;} /*HAD !important*/

.robot h3{font-family: "RocknRoll One", sans-serif;
          font-weight: 400;} /*HAD !important*/



h4
{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Kosugi Maru", serif;
    font-style: bold;
    font-size: clamp(20px,2vw,35px);
    color: white;
}
.rd2 h4
{
    font-family: "Dela Gothic One", sans-serif; /*HAD !important*/
    font-weight: 400;
}

.wHeart h4
{
     font-family: "Zen Antique Soft", serif; 
     font-weight: 400;/*HAD !important*/
}

.coinOp h4{font-family: "Rampart One", sans-serif;
           font-weight: 400;} /*HAD !important*/

.hauntedHelper h4{font-family: "Potta One", sans-serif;
                  font-weight: 400;} /*HAD !important*/

.quantumAxle h4{font-family: "Mochiy Pop One", sans-serif;
                font-weight: 400;}

.doomedFlux h4 {font-family: "New Tegomin", sans-serif;
                font-weight: 400;}

.static h4 {font-family: "DotGothic16", sans-serif;
            font-weight: 400;}

.aKOM h4 {font-family: "Yuji Mai", sans-serif;
          font-weight: 400;}

.rem h4 {font-family: "Hachi Maru Pop", sans-serif;
         font-weight: 400;}

.fotp h4 {font-family: "Yuji Boku", sans-serif;
          font-weight: 400;}

.pDisorder h4{font-family: "Reggae One", sans-serif;
              font-weight: 400;}

.suzaku h4{font-family: "Stick", sans-serif;
           font-weight: 400;}

.sakuraCell h4{font-family: "M PLUS 1 Code", sans-serif;
               font-weight: 400;}

.robot h4{font-family: "RocknRoll One", sans-serif;
          font-weight: 400;}

/*Wound Hearts colours may need changing*/
#WoundHeartTitle h4
{
        -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgba(210,207,152,0.5);
         text-shadow: 4px 4px 4px rgba(210,207,152,0.5);
}

  #coinopcapitalTitle h4
    {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(255,25,175);
         text-shadow: 4px 4px 4px rgba(255,25,175,0.75);
    }

#hauntedHelperTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(56,234,230);
         text-shadow: 4px 4px 4px rgba(56,234,230,0.75);
}

#quantumAxleTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(65,30,255);
         text-shadow: 4px 4px 4px rgba(65,30,255,0.75);
}

#doomedFluxTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(173,9,57);
         text-shadow: 4px 4px 4px rgba(173,9,57,0.75);
}

#staticTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(24,245,255);
         text-shadow: 4px 4px 4px rgba(24,245,255,0.75);
}

#aKOMTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(237,34,100);
         text-shadow: 4px 4px 4px rgba(237,34,100,0.75);
}

#remTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(147,79,233);
         text-shadow: 4px 4px 4px rgba(147,79,233,0.75);
}

#fotpTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(222,121,0);
         text-shadow: 4px 4px 4px rgba(222,121,0,0.75);
}

#rd2Title h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(255,0,221);
         text-shadow: 4px 4px 4px rgba(255,0,221,0.75);
}

#pdisorderTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(0,255,193);
         text-shadow: 4px 4px 4px rgba(0,255,193,0.75);
}

#suzakuTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(255,141,0);
         text-shadow: 4px 4px 4px rgba(255,141,0,0.75);
}

#sakuraCellTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(255,105,150);
         text-shadow: 4px 4px 4px rgba(255,105,150,0.75);
}
#robotTitle h4
 {
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: rgb(0,180,145);
         text-shadow: 4px 4px 4px rgba(0,180,145,0.75);
}



div.projectMargin
{
    margin-bottom: 100px;
}

@media only screen and (max-width: 1024px) /*768*/
{div.projectMargin
 {
   margin-bottom: 75px;
 }
}
@media only screen and (max-width: 500px)
{div.projectMargin
 {
   margin-bottom: 25px;
 }
}

h5
{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Kosugi Maru", serif;
    font-style: bold;
    font-size: clamp(18px,1vw,25px);
    color: white;
    
}
/*HAD !important*/
.rd2 h5
{
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
}

.wHeart h5
{
     font-family: "Zen Antique Soft", serif; 
     font-weight: 400;/*HAD !important*/
} 

.coinOp h5{font-family: "Rampart One", sans-serif;
           font-weight: 400;}

.hauntedHelper h5{font-family: "Potta One", sans-serif;
                  font-weight: 400;}

.quantumAxle h5{font-family: "Mochiy Pop One", sans-serif;
                font-weight: 400;}

.doomedFlux h5 {font-family: "New Tegomin", sans-serif;
                font-weight: 400;}

.static h5 {font-family: "DotGothic16", sans-serif;
            font-weight: 400;}

.aKOM h5 {font-family: "Yuji Mai", sans-serif;
          font-weight: 400;}

.rem h5 {font-family: "Hachi Maru Pop", sans-serif;
         font-weight: 400;}

.fotp h5 {font-family: "Yuji Boku", sans-serif;
          font-weight: 400;}

.pDisorder h5{font-family: "Reggae One", sans-serif;
              font-weight: 400;}

.suzaku h5{font-family: "Stick", sans-serif;
           font-weight: 400;}

.sakuraCell h5{font-family: "M PLUS 1 Code", sans-serif;
               font-weight: 400;}

.robot h5{font-family: "RocknRoll One", sans-serif;
          font-weight: 400;}


/*Initial Images*/
/*THIS IS COMMENTED OUT FOR THE TEST*/

div.initialImage {display: inline-block;
    max-width: 100%;
    width:100%;
   width: fit-content;
    margin: auto; 
    }

/*Gallery May need to adjust this for AKOM and other games colour palettes*/

/*AKOM Pink colour for border images. Will need to change this per game. USE CSS Variables for this*/
div.gif, div.video, div.gallery {
    display: inline-block;
    max-width: 100%;
    width:100%;
    /*width: fit-content;*/ /*WAS ORIGINALLY ON*/
    margin: auto; /*Was AUTO*/
    
    border-radius: 0px 15px 15px 15px;  border: 6px solid rgba(212,14,75, 0.5);}

/*Mobile*/

@media screen and (max-width: 500px) {
    .initialImage img{
        width: 200px; /*Was 200 x 150px*/
        height: 150px;
    }
}


div.index.gallery

{
       border: 6px solid #115F63;
}

 div.index.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(232,201,0); box-shadow: 2px 2px 2px 2px rgba(232,201,0,0.75);}





 div.gif:hover  ,div.video:hover, div.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid #E8C900; box-shadow: 2px 2px 2px 2px rgba(255,253,154,0.5);}

div.aKOM.initialImage
{
 border: 6px solid rgba(212,14,75, 0.5);  
}

div.aKOM.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid #E8C900; box-shadow: 2px 2px 2px 2px rgba(255,253,154,0.5);}

/*RD2*/


div.rd2.gallery, div.rd2.gif, div.rd2.video
{
    border: 6px solid rgba(255,0,221,0.5);
}

div.rd2.initialImage
{
 border: 6px solid rgba(255,0,221,0.5);   
}

div.rd2.gif:hover  ,div.rd2.video:hover, div.rd2.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgba(23,211,247,1); box-shadow: 2px 2px 2px 2px  rgba(23,211,247,0.5);}

div.rd2.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgba(23,211,247,1); box-shadow: 2px 2px 2px 2px  rgba(23,211,247,0.5);}

/*Wound Heart*/

div.wHeart.gallery, div.wHeart.gif, div.wHeart.video
{border: 3px solid rgba(184,95,51,0.75);}

div.wHeart.initialImage
{border: 3px solid rgba(184,95,51,0.75);}

div.wHeart.initialImage:hover{border-radius: 0px 15px 15px 15px; border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(47,235,255); box-shadow: 2px 2px 2px 2px  rgba(47,235,255);}



div.wHeart.gif:hover  ,div.wHeart.video:hover, div.wHeart.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(47,235,255); box-shadow: 2px 2px 2px 2px  rgba(47,235,255);}

/*Coin OP*/


div.coinOp.initialImage
{
 border: 6px solid rgba(173,173,173,0.5);  
}

div.coinOp.initialImage:hover{border-radius: 0px 15px 15px 15px; border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(255,25,175); box-shadow: 2px 2px 2px 2px  rgba(255,25,175,0.5);}


div.coinOp.gallery, div.coinOp.gif, div.coinOp.video
{
    border: 6px solid rgba(173,173,173,0.5);
}


div.coinOp.gif:hover  ,div.coinOp.video:hover, div.coinOp.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(255,25,175); box-shadow: 2px 2px 2px 2px  rgba(255,25,175,0.5);}


div.hauntedHelper.initialImage
{
  border: 6px solid rgba(17,93,80,0.5);
}

div.hauntedHelper.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(56,234,230); box-shadow: 2px 2px 2px 2px  rgba(56,234,230,0.5);}

div.hauntedHelper.gallery, div.hauntedHelper.gif, div.hauntedHelper.video

{
    border: 6px solid rgba(17,93,80,0.5);
}

div.hauntedHelper.gif:hover  ,div.hauntedHelper.video:hover, div.hauntedHelper.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(56,234,230); box-shadow: 2px 2px 2px 2px  rgba(56,234,230,0.5);}


div.quantumAxle.initialImage
{
  border: 6px solid rgba(70,0,111,0.5);
}

div.quantumAxle.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(134,164,255); box-shadow: 2px 2px 2px 2px  rgba(134,164,255,0.5);}


div.quantumAxle.gallery, div.quantumAxle.gif, div.quantumAxle.video

{
       border: 6px solid rgba(70,0,111,0.5);
}

div.quantumAxle.gif:hover  ,div.quantumAxle.video:hover, div.quantumAxle.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(134,164,255); box-shadow: 2px 2px 2px 2px  rgba(134,164,255,0.5);}

div.doomedFlux.initialImage
{
 border: 6px solid rgba(173,9,57,0.5);  
}

div.doomedFlux.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(68,0,2); box-shadow: 2px 2px 2px 2px  rgba(68,0,2,0.5);}


div.doomedFlux.gallery, div.doomedFlux.gif, div.doomedFlux.video

{
    border: 6px solid rgba(173,9,57,0.5);
}

div.doomedFlux.gif:hover  ,div.doomedFlux.video:hover, div.doomedFlux.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(68,0,2); box-shadow: 2px 2px 2px 2px  rgba(68,0,2,0.5);}

div.static.initialImage
{
  border: 6px solid rgba(31,88,75,0.5);
}

div.static.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(0,239,255); box-shadow: 2px 2px 2px 2px  rgba(0,239,255,0.5);}


div.static.gallery, div.static.gif, div.static.video

{
       border: 6px solid rgba(31,88,75,0.5);
}

div.static.gif:hover  ,div.static.video:hover, div.static.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(0,239,255); box-shadow: 2px 2px 2px 2px  rgba(0,239,255,0.5);}

div.rem.initialImage
{
 border: 6px solid rgba(255,157,2, 0.5);
}

div.rem.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(241,22,72); box-shadow: 2px 2px 2px 2px  rgba(241,22,72,0.5);}

div.rem.gallery, div.rem.gif, div.rem.video

{
    
    border: 6px solid rgba(255,157,2, 0.5);
}

div.rem.gif:hover  ,div.rem.video:hover, div.rem.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(241,22,72); box-shadow: 2px 2px 2px 2px  rgba(241,22,72,0.5);}

div.fotp.initialImage
{
 border: 6px solid rgba(6,0,0, 0.5);
}

div.fotp.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(223,122,0); box-shadow: 2px 2px 2px 2px  rgba(223,122,0,0.5);}

div.fotp.gallery, div.fotp.gif, div.fotp.video

{
       border: 6px solid rgba(6,0,0, 0.5);
}

div.fotp.gif:hover  ,div.fotp.video:hover, div.fotp.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(223,122,0); box-shadow: 2px 2px 2px 2px  rgba(223,122,0,0.5);}

div.robot.initialImage
{
 border: 6px solid  rgba(237,28,36, 0.5);
}

div.robot.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(64,221,217); box-shadow: 2px 2px 2px 2px  rgba(64,221,217,0.5);}

div.robot.gallery, div.robot.gif, div.robot.video

{
    
    border: 6px solid  rgba(237,28,36, 0.5);

}

div.robot.gif:hover  ,div.robot.video:hover, div.robot.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(64,221,217); box-shadow: 2px 2px 2px 2px  rgba(64,221,217,0.5);}

div.sakuraCell.initialImage
{
 border: 6px solid rgba(255,170,184, 0.5);
}

div.sakuraCell.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(114,46,56); box-shadow: 2px 2px 2px 2px  rgba(114,46,56,0.5);}

div.sakuraCell.gallery, div.sakuraCell.gif, div.sakuraCell.video

{
       border: 6px solid rgba(255,170,184, 0.5);
}

div.sakuraCell.gif:hover  ,div.sakuraCell.video:hover, div.sakuraCell.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(114,46,56); box-shadow: 2px 2px 2px 2px  rgba(114,46,56,0.5);}

div.suzaku.initialImage
{
  border: 6px solid rgba(37,234,250, 0.5);
}

div.suzaku.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(255,158,46); box-shadow: 2px 2px 2px 2px  rgba(255,158,46);}

div.suzaku.gallery, div.suzaku.gif, div.suzaku.video

{
       border: 6px solid rgba(37,234,250, 0.5);

   
     
}

div.suzaku.gif:hover  ,div.suzaku.video:hover, div.suzaku.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(255,158,46); box-shadow: 2px 2px 2px 2px  rgba(255,158,46);}

div.pdisorder.gallery, div.pdisorder.gif, div.pdisorder.video

{
       border: 6px solid rgba(245,20,20, 0.5);

}

div.pdisorder.gif:hover  ,div.pdisorder.video:hover, div.pdisorder.gallery:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(237,233,69); box-shadow: 2px 2px 2px 2px  rgba(237,233,69,0.5);}

div.pdisorder.initialImage
{
 border: 6px solid rgba(245,20,20, 0.5);  
}

div.pdisorder.initialImage:hover{border-radius: 0px 15px 15px 15px; border: 6px solid  rgb(237,233,69); box-shadow: 2px 2px 2px 2px  rgba(237,233,69,0.5);}


div.gif
{
    /*display: flex;*//*WAS ON*/
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;/*Was Auto*/
    /*width: fit-content; WAS ON*/
    max-width: 100%;
    box-sizing: border-box;
}



div.gif video
{
    display: block;
    width: 100%; /*was width: 100% then max-width: 100% */
    height: auto;
}



div.video
{
    /*display: flex;*/ /*WAS ON*/
    justify-content: center;
    align-items: center;
    width: 100%; /*was width: 100% then max-width: 100%*/
    box-sizing: border-box;
}

div.video iframe
{
    display: block;
    /*width: 560px;
    height: 315px;*/
    width: 100%; /*Was MAx width, Max Height 100%*/
    height: 100%;
    max-width: 100%; /*Max width wasn't here before.*/
    max-height: 100%;
    aspect-ratio: 16 / 9;
    /*object-fit: cover;*/
}

/*WAS ON COMPLETLEY*/
/*WAS div.gif * div.video ONLY,div.gif video, div.video*/
div.gallery img
{
 display:block;
 width: 100%; /*was width: 100% Then max-width: 100%*/
 height: auto;
}


div.desc
{
  padding: 15px;
　font-size: calc(8px + 0.5vw);
  text-align: center;  
  display: block;
}

/*Padding for mobiles & Tablets below*/
@media screen and (max-width: 1024px)/*768*/{
div.desc{
    padding: 10px;

    }
}
@media screen and (max-width: 500px){
div.desc {
    padding: 0px;
    }
}



.responsive
{
    display: inline-block;
    padding: 6px 6px;
    width: 24.99999%;
    text-align: center;
    vertical-align: top;
}



/*THIS SHOULD TARGET THE CONTAINERS*/
@media screen and (max-width: 500px)
{
    /*Changed div.gif to div.gif video*/
   div.gallery,div.gif, div.video {
    display: block !important;
    max-width: 100%; /*Was 100%*/
    width: 100%; /*Was 100%*/
    height: auto;
    margin:0 auto;
    justify-content: unset;
    align-items: unset;
    }
     div.gallery img,div.gif video, div.video iframe {
    display: block !important;
    max-width: 100%; /*Was 100%*/
    width: 100%;
    max-height: 100%; /*Max height wasn't here before.*/
    height: auto;
    margin:0 auto;
    }
}


/*
@media screen and (max-width: 500px) and (orientation: portrait)
{
    div.video iframe
    {
        width: 100vw;
        height: calc(100vw * 9 / 16);
    }
}


@media screen and (max-width: 500px) and (orientation: landscape)
{
    div.video iframe
    {
        width: 90vw;
        height: calc(90vw * 9 / 16);
    }
}

*/

@media only screen and (max-width: 1024px) /*768*/
{.responsive
 {
    max-width: 100%;/*was 49.99999%*/
    width: 75%; /*was 75%*/
    margin: 0 auto;
 }
}
@media only screen and (max-width: 500px)
{.responsive
 {
    display: block;
    max-width: 100%;
    width: 75%; /*Was 100%*/
    margin: 0 auto; /*Was 0px 6px*/
 }
}

ul li
{
    list-style-type: none;
}

ol li
{
     list-style: none;
}


/* Links.*/
a:link, a:visited
{
    color: white;
    text-decoration: none;
}


div.index a
{
    background-color: var(--active-color);
}

div.index a:visited
{
     background-color: var(--active-color);
}

div.skills a
{
    background-color: var(--active-color);
}

div.skills a:visited
{
     background-color: var(--active-color);
}

div.professional a
{
    background-color: var(--active-color);
}

div.professional a:visited
{
     background-color: var(--active-color);
}

div.gamesJams a
{
    background-color: var(--active-color);
}

div.gamesJams a:visited
{
     background-color: var(--active-color);
}


div.solo a
{
    background-color: var(--active-color);
}

div.solo a:visited
{
     background-color: var(--active-color);
}

div.rd2 a
{
    background-color: var(--active-color);
}

div.rd2 a:visited
{
     background-color: var(--active-color);
}

div.wHeart a
{
    background-color: var(--active-color);
}

div.wHeart a:visited
{
     background-color: var(--active-color);
}


div.coinOp a
{
    background-color: var(--active-color);
}

div.coinOp a:visited
{
     background-color: var(--active-color);
}

div.hauntedHelper a
{
    background-color: var(--active-color);
}

div.hauntedHelper a:visited
{
     background-color: var(--active-color);
}

div.quantumAxle a
{
    background-color: var(--active-color);
}

div.quantumAxle a:visited
{
     background-color: var(--active-color);
}

div.doomedFlux a
{
    background-color: var(--active-color);
}

div.doomedFlux a:visited
{
     background-color: var(--active-color);
}

div.static a
{
    background-color: var(--active-color);
}

div.static a:visited
{
     background-color: var(--active-color);
}

div.aKOM a
{
    background-color: var(--active-color);
}

div.aKOM a:visited
{
     background-color: var(--active-color);
}

div.rem a
{
    background-color: var(--active-color);
}

div.rem a:visited
{
     background-color: var(--active-color);
}

div.fotp a
{
    background-color: var(--active-color);
}

div.fotp a:visited
{
     background-color: var(--active-color);
}

div.pDisorder a
{
    background-color: var(--active-color);
}

div.pDisorder a:visited
{
     background-color: var(--active-color);
}

div.suzaku a
{
    background-color: var(--active-color);
}

div.suzaku a:visited
{
     background-color: var(--active-color);
}

div.sakuraCell a
{
    background-color: var(--active-color);
}

div.sakuraCell a:visited
{
     background-color: var(--active-color);
}

div.robot a
{
    background-color: var(--active-color);
}

div.robot a:visited
{
     background-color: var(--active-color);
}

.clearfix:after
{
    content:"";
    display: table;
    clear: both;
}

div.warningColor h5
{color: red;}

footer {

        margin-top: auto;
        width:100vw; /*Was 100vw*/
        font-family: "Kosugi Maru", serif;
        font-style: bold;
        font-size: 20px;
        text-align: center;
        background-color: rgba(19,131,137,0.5);
        border: 3px solid #115F63; 
        border-bottom: none;
        border-radius: 12px 12px 0px 0px;
        padding: 50px; /*was 50px*/
        margin-bottom: 0 !important;
        /*padding-bottom: 0;*/
        bottom: 0;
        /*position: fixed;*/
}

footer.homePage
{
     background-color: rgba(19,131,137,0.5);
     border: 3px solid #115F63;
     border-bottom: none;
} 

footer.skillsEducation 
{
   background-color: rgba(73,23,116,0.5);
    border: 3px solid rgb(130,57,130);
    border-bottom: none;
}

footer.professionalWorks 
{
    background-color: rgba(39,64,36,0.5);
    border: 3px solid rgb(82,99,37);
    border-bottom: none;
}

footer.gamesJams
{
    background-color: rgba(44,39,39,0.5);
    border: 3px solid rgb(43,6,6);
     border-bottom: none;
}

footer.soloUniversity 
{
    background-color: rgba(140,154,181,0.5);
    border: 3px solid rgb(0,39,113);
    border-bottom: none;
}

footer.rd2 
{
     background-color: rgba(255,0,221,0.5);
     border: 3px solid rgb(57,21,93);
     border-bottom: none;
}

footer.wHeart
{
    background-color: rgba(210,207,152,0.5);
     border: 3px solid rgb(47,235,255);
      border-bottom: none;
}

footer.coinOp 
{
    background-color: rgba(173,173,173,0.5);
     border: 3px solid rgb(255,25,175);
     border-bottom: none;
}

footer.hauntedHelper 
{
    background-color: rgba(17,93,80,0.5);
    border: 3px solid rgb(56,234,230);
    border-bottom: none;
}

footer.quantumAxle 
{
    background-color: rgba(70,0,111,0.5);
     border: 3px solid rgb(134,164,255);
    border-bottom: none;
}

footer.doomedFlux
{
    background-color: rgba(173,9,57,0.5);
     border: 3px solid rgb(68,0,2);
    border-bottom: none;
}

footer.static
{
    background-color: rgba(31,88,75,0.5);
     border: 3px solid rgb(0,239,255);
     border-bottom: none;
}

footer.aKOM
{
     background-color: rgba(212,14,75, 0.5);
     border: 3px solid rgba(23,211,247,1);
     border-bottom: none;
}

footer.rem 
{
     background-color: rgba(255,157,2, 0.5);
     border: 3px solid rgb(241,22,72);
     border-bottom: none;
}

footer.fotp 
{
     background-color: rgba(6,0,0, 0.5);
     border: 3px solid rgb(223,122,0);
    border-bottom: none;
}

footer.robot
{
     background-color: rgba(237,28,36, 0.5);
     border: 3px solid rgb(64,221,217);
     border-bottom: none;
}

footer.sakuraCell 
{
     background-color: rgba(255,170,184, 0.5);
     border: 3px solid rgb(114,46,56);
     border-bottom: none;
}

footer.suzaku 
{
     background-color: rgba(37,234,250, 0.5);
     border: 3px solid rgb(255,158,46);
     border-bottom: none;
}

footer.pdisorder
{
     background-color: rgba(245,20,20, 0.5);
     border: 3px solid rgb(237,233,69);
     border-bottom: none;
}