/*layout with centre content div and right (contact details)*/
/*overall grid styling*/

body {
    margin: 0;
    color: rgb(255, 201, 250);
    background-color: #04ff00;
    background-image: url(piccies/monsterenergy.png);
    background-repeat: repeat;
}

.container { 
    width: 100vw;
    height: 100vh;

    display: grid;
    justify-content: center;

    grid-template: repeat(6, auto) /repeat(5, 20vw);
    grid-template-areas: 
        ". subcont subcont subcont ."
        ". subcont subcont subcont ."
        ". subcont subcont subcont ."
        ". subcont subcont subcont ."
        ". subcont subcont subcont ."
        ". subcont subcont subcont ."
        ". subcont subcont subcont .";
    background-size: 100%;
}

.sub-container {
    display: grid;
    max-width: 815px;
    
    grid-template: auto 39px 30px 1fr 1fr 45px 40px /repeat(3, auto);
    grid-template-areas: 
        "header header header"
        "nav nav nav"
        "bands bands bands"
        "content content content"
        "content content content"
        "footer footer footer"
        "footer2 footer2 footer2"; 

    gap: 10px;
    padding: 10px;
    box-sizing: border-box;

    font-family: Verdana, monospace;
    font-weight: bold;
    font-size: 15px;

    grid-area: subcont;
}
header {
    grid-row: 1 / span 1;
    grid-column: 2 / span 3;

    background-color: rgb(0, 0, 0);
    
    grid-area: header;
}

nav {
    grid-row: 2 / span 1;
    grid-column: 2 / span 3;

    background-color: #000000c3;

    grid-area: nav;
    a:hover {
    text-decoration: none;
}
}

bands {
    grid-row: 3 / span 1;
    grid-column: 2 / span 3;

    background-color: rgb(0, 0, 0);
    
    grid-area: bands;
}

/* (A) FORCE ALL ITEMS INTO SINGLE ROW */
.hmove { display: flex; }
.hitem { width: auto; min-width: 100px; height: 30px; flex-shrink: 0; }
.hwrap { overflow: hidden; }
 
/* (B) MOVE ITEMS FROM RIGHT TO LEFT */
/* first item = 0, fourth item = -300% */
@keyframes tickerh {
  0% { transform: translatex(100%); }
  100% { transform: translatex(-400%); }
}
.hmove { animation: tickerh linear 20s infinite; }
.hmove:hover { animation-play-state: paused; }

.content {
    margin-right: auto;
    grid-row: 4 / span 2;
    grid-column: 2 / span 3;

    display: grid;
    grid-template: 1fr / 1fr 1fr 1fr;
    grid-template-areas: 
    "left centre right"; 

    gap: 10px;
    box-sizing: border-box;

    grid-area: content;
}

.box {
    display: block;
    position: relative;
    padding: 10px;
    max-height: 270px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;

    background-color: #cb1ca272;
    outline-color: #cb1ca2;
    outline-style: ridge;
    outline-width: 4px;
    outline-offset: 0;
}

left {
    grid-row: 4 / span 1;
    grid-column: 1 / span 1; 

    background-color: #000000c3;
    
    grid-area: left; 
}

centre {
    grid-row: 4 / span 1;
    grid-column: 2 / span 2; 
    
    background-color: #000000c3;

    grid-area: centre;
}

right {
    grid-row: 4 / span 1;
    grid-column: 3 / span 1; 

    background-color: #000000c3;
    
    grid-area: right; 
}

footer {
    grid-row: 5 / span 1;
    grid-column: 2 / span 3;

    background-color: #000000c3;

    grid-area: footer;
}

footer2 {
    grid-row: 6 / span 1;
    grid-column: 2 / span 3;

    grid-area: footer2;
}


img.transparent, img.transparent2, img.transparent3 {
    display: block;
    max-height: 270px;
    margin-left: auto;
    margin-right: auto;
}

img.transparent2:hover {
        transform: skew(-25deg)
}

img.transparent3:hover {
        transform: skew(25deg)
}

img.friendly {
    display: relative;
    max-height: 200px;
    max-width: 140px;
}

img.header {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 6px;
}

img.header:hover {
        transform: skew(-25deg)
}

img.general {
    display: block;
    position: relative;
    max-height: 270px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;

    outline-color: #1fc01c;
    outline-style: ridge;
    outline-width: 4px;
    outline-offset: 0;
}

img.footer2 {
    min-width: 100%;
}

img.fixed {
  position: fixed;
  width: 100vw;
  max-height: 30%;
  bottom: 0;
  right: 0;
}

img.profile {
    position: relative;
    max-height: 270px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;

    outline-color: #000000;
    outline-style: ridge;
    outline-width: 4px;
    outline-offset: 0;
}

@media all and (max-width: 479px) {
  .container {
    max-width: 100vw;
    height: auto;
    grid-template-areas: "subcont";

  }

    .sub-container {
        width: 100vw;
        grid-template-columns: 1fr;
        grid-template-rows: auto 39px auto auto auto 40px;
        grid-template-areas: 
        "header"
        "nav"
        "bands"
        "left"
        "centre"
        "right"
        "footer"
        "footer2";
    }

    .content {
        display: contents;
    }

}

/* smaller-scale styling */
/*link formatting*/
a {
    color:#e907c7;
    text-decoration: none;
}

a:hover {
    color: #1fc01c;
    background-color:  #1fc01c76;

}

/*border decoration and padding*/

header, nav, left, centre, right, footer{  
    outline-color: #000000;
    outline-style: ridge;
    outline-width: 4px;
    outline-offset: 0;
}

header, nav, footer{  
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
}

left, centre, right{  
    padding-left: 20px;
    padding-right: 19px;
    padding-bottom: 5px;
    padding-top: 2px;
}

footer{
    text-align: center;
    padding-top: 13px;  
}

/*text alignment, word breaks, headers*/
p{
    line-height: 1.4em;
}

@font-face {
     font-family: mcr;
     src: url(/my_chemical_romance.ttf);
  }

h1, h2{
    text-align: center;
}

h1{
    font-size: xx-large;
    font-family: mcr;
}

h2{
    font-size: x-large;
    font-family: 'Goudy Old Style', serif;
}

h3{
    font-size: large;
    font-size: x;
    text-decoration: underline;
}

.date, figcaption{
    display: block;
    margin-top: 0;
    font-size: 0.9em;
    font-style: italic;
}

.email{
    word-break: break-all;
}

.long{
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*navbar*/
nav ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

nav a{
    color: #cb1ca2;
    padding: 10px;
    display: block;
    text-align: center;
}

nav a:hover{
    color: #1fc01c;
    background-color:  #1fc01c76;
}

nav li{
    float: left;
}