a {text-decoration:none; border:0; padding:0; margin:0; color:black;}
html {padding:0; border:0; margin:0; }




	        body {background: red; font-size: 1em; padding:0; border:0; margin:0; width:100%; height:100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;} 
            header {background:lightgreen; display: flex; height:10%; min-height:10%;}
            header a {background:lightblue; padding:0 5px; display: flex; justify-content: center; align-items: center; aspect-ratio:1/1;}
            nav {background:lightgrey; display: flex; height:5%; min-height:5%; text-align: center;}
            nav a {background:lightblue; padding:0 5px; display: flex; justify-content: center; align-items: center;}   
            main {background:lightyellow; display: flex; height:auto;}
            footer {background:lightblue; display: flex; height:4%; min-height:4%;}
                
            main_header {background:lightgrey; display: flex; flex-direction:column; flex-basis: auto;  height:5%; min-height:5%; text-align: center;}    
            
            main #dvd,
            main #comics,            
            main #homepage {background:green; width:100%; height:100%; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-content: flex-start; padding-top:0.3em; margin:0; border:0;}
            main #dvd .category,
            main #homepage .category,
            main #comics .category {position: relative; text-align: center; display:flex; width:100px; max-width:33%; flex-grow: 1; flex-shrink: 1; aspect-ratio:1/1; margin:0.3em; position: relative; text-align: center;}
            main #dvd .category a,
            main #homepage .category a,
            main #comics .category a {background:lightyellow; display:flex; width:100%; height:100%;}
            main #dvd .category .categorytext,
            main #homepage .category .categorytext,
            main #comics .category .categorytext {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:1.3em;}
            main #dvd .category .alphatext,
            main #comics .category .alphatext {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:3em;}
            
            main #dvd .category .text-over-image {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
            
            
            
            main #dvd .issue_display,
            main #comics .issue_display     {background:lightyellow; display:flex; flex-direction:column; width:100%; flex-grow: 1; flex-shrink: 1; margin:0.3em; font-size:1em;}
            main #dvd .issue_display a,
            main #comics .issue_display a{background:yellow; display:inline-block;} 
            main #dvd .issue_display img,
            main #comics .issue_display img {height:200px; width:200px;} 
            main #dvd .comic_title,
            main #comics .comic_title       {background:lightyellow; display:flex; width:100%; flex-grow: 1; flex-shrink: 1; margin:0.3em; font-size:1.5em; color:black; justify-content: center; align-items: center;}
            main #dvd .comic_title a
            main #comics .comic_title a     {width:100%; height:100%;  display: flex; justify-content: center; align-items: center;}
            main #dvd .comic_display,
            main #comics .comic_display     {background:lightyellow; display:flex; width:100px; flex-grow: 1; flex-shrink: 1; aspect-ratio:2/3 ; margin:0.3em; font-size:1em; max-width:33%;}
            main #dvd .comic_display a,
            main #comics .comic_display a   {width:100%; height:100%;  display: flex; justify-content: center; align-items: center;}
            main #dvd .comic_details,
            main #comics .comic_details       {background:lightyellow; display:flex; width:100%; flex-grow: 1; flex-shrink: 1; margin:0.3em; color:black;flex-direction: column;}
            main #dvd .comic_details #title,
            main #comics .comic_details #title  {font-size:1.5em; width:100%; height:100%; display: flex; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 1;}
            main #dvd .comic_details #details,
            main #comics .comic_details #details{ font-size:1em;   width:100%; height:100%; display: flex;  align-items: center; flex-grow: 1; flex-shrink: 1;}
            main #dvd .comic_details #details,
            main #comics .comic_number       {background:lightyellow; display:flex; width:100px; flex-grow: 1; flex-shrink: 1; aspect-ratio:2/3 ; margin:0.3em; font-size:1em;  max-width:33%;}
            main #dvd .comic_number a,
            main #comics .comic_number a   {width:100%; height:100%;  display: flex; justify-content: center; align-items: center;}


            main #cart {background:lightgrey; display: flex; flex-direction:column; flex-basis: auto; width:100%; height:5%; min-height:5%; text-align: center;} 
            main #cart .cart_item{background:lightyellow; display: flex; flex-direction:row;}
            main #cart .cart_item .cart_quantity{ background:yellow;width:10%; border:2px solid black;}
            main #cart .cart_item .cart_image   { background:red;   width:15%; border:2px solid black;}
            main #cart .cart_item .cart_details { background:green; width:60%; border:2px solid black;}
            main #cart .cart_item .cart_price   { background:blue;  width:15%; border:2px solid black;}
            
            main #cart .del {background:red;}
            main #cart .del a {color:white;}
            
            
            header p {margin: 0; padding: 20px 0 0 0; font-size: 14px; color: #6b7179; display:inline-block;}
            header p a {color: #2a8eeb; font-weight: 500; text-decoration: none; font-size: 14px; height:2em;}
            header p a:hover {color: #136fc5;}




.login .form, .register .form {display: flex; flex-flow: column; width: 100%;}
.login .form .form-label, 
.register .form .form-label 
{display: block; padding: 20px 0 10px 0; font-weight: 500; font-size: 14px; color: #474b50;}
.login .form .form-group, 
.register .form .form-group 
{display: flex; position: relative; justify-content: space-between; align-items: center; width: 100%; }
.login .form .form-group .form-icon-left, 
.register .form .form-group .form-icon-left, 
.login .form .form-group .form-icon-right, 
.register .form .form-group .form-icon-right 
{fill: #c1c6cb; width: 40px; position: absolute; transform: translateY(-50%); top: 50%; pointer-events: none;}
.login .form .form-group .form-icon-left, 
.register .form .form-group .form-icon-left 
{left: 0;}
.login .form .form-group .form-icon-left + .form-input, 
.register .form .form-group .form-icon-left + .form-input 
{padding-left: 40px;}
.login .form .form-group .form-icon-right, 
.register .form .form-group .form-icon-right 
{right: 0;}
.login .form .form-group .form-icon-right + .form-input, 
.register .form .form-group .form-icon-right + .form-input 
{padding-right: 40px;}
.login .form .form-group:focus-within .form-icon-left, 
.register .form .form-group:focus-within .form-icon-left 
{fill: #989fa8;}
.login .form .form-input, 
.register .form .form-input 
{width: 100%; height: 43px; border: 1px solid #dee1e6; padding: 0 15px; border-radius: 4px; color: #000;}
.login .form .form-input::placeholder, 
.register .form .form-input::placeholder 
{color: #989fa8;}
.login .form .form-link, 
.register .form .form-link 
{color: #2a8eeb; font-weight: 500; text-decoration: none; font-size: 14px;}
.login .form .form-link:hover, 
.register .form .form-link:hover 
{color: #136fc5;}
.login .form p.register-link, 
.register .form p.register-link 
{margin: 0; padding: 20px 0 0 0; font-size: 14px; color: #6b7179;}
.login .btn, 
.register .btn 
{display: inline-flex; align-items: center; justify-content: center; text-decoration: none; appearance: none; cursor: pointer; border: 0; background-color: #3e7bd6; color: #FFFFFF; padding: 0 14px; font-size: 14px; font-weight: 600; border-radius: 4px; height: 42px; box-shadow: 0px 0px 6px 1px rgba(45, 57, 68, 0.1);}
.login .btn:hover, 
.register .btn:hover 
{background-color: #3172d3;}
.login, 
.register 
{display: flex; flex-flow: column; width: 400px; max-width: 95%; background-color: #ffffff; box-shadow: 0px 0px 7px 1px rgba(45, 57, 68, 0.05); border-radius: 5px; margin: 100px auto; padding: 35px;}
.login h1, 
.register h1 
{text-align: center; font-size: 24px; font-weight: 500; padding: 15px 0; margin: 0;}