/* ====R==== VARIABLES : var(--text-color) ====R==== */
:root {
  /* Link Colors: */
  --link-color: #a0e825;
  --link-color-hover: #19eca6;

  --sidenav-link: #f4e543;

  /* Pane Colors: */
  --pane-bg: linear-gradient(to bottom, #121010 65%, #113a15);
}

/* INDEX : 
- Foundation >> Fauxheader >> Page_grid >>
- Page_content_style >> Animations >> Devices */


/* ================================================== */
/* FOUNDATION */
/* ================================================== */

.container {
    max-width: 79.5%;
    margin: auto;
    transition: 400ms;
} /* site container : makes sure everything is centered */

body {
    font-size: 17px;
    background-color: #505364;
    color: #ccd2b0;
    font-family: Monaco, monospace;
}

/* * GENERAL LINKS: * */
a {
  text-decoration: none;
  color: var(--link-color);
}

a:hover, a:focus {
  color: var(--link-color-hover);
  text-decoration: underline;
}

::selection {
  background: rgba(210, 207, 24, 0.5);
} /* (text highlighted by the user) */


/* ================================================== */
/* SIDE NAVIGATION LINKS : FAUXHEADER */
/* ================================================== */

#sidenav-id a {
    position: absolute;
    left: 11%;
    width: 100px;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    border-style: double;
    text-decoration: none;
    color: #000000;
    font-family: Times new Roman Medium;
    font-size: 20px;
    transition: 190ms;
}
#sidenav-id a:hover {
    width: 120px;
    filter: brightness(116%);
    box-shadow: 0px 0px 2px 2px rgba(244, 194, 67, 0.566);
    color: #ffc464;
}
.sidenav a {
    background-color: #26ab43;
    border: solid;
}

#homepage {
    top: 20px;
}
#musicpage {
    top: 80px;
}
#artwall {
    top: 140px;
}
#tumblrlink {
    top: 200px;
    background-color: #148b76;
}
#translatelink {
    top: 260px;
    background-color: #148b76;
}


/* ================================================== */
/* PAGE_CONTENT_STYLE */
/* ================================================== */

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 2px;
    margin: 0.4em;
    font-family: Times New Roman Medium;
}

hr {
    margin-block: 14px;
    border: 1px outset #ccd2b0
}

.letter-column {
    columns: 2;
    column-gap:calc(100% / 5);
    column-rule: outset #ccd2b0;
}
.letter-column p {
    margin-block: 0;
    margin-left: 4px;
}

.sticker {
    height: 90px;
    width: 90px;
    border: none;
}
#sticker-home {
    position: relative;
    bottom: -85%;
    left: 12%;
}

img {
    border: double #9dc672;
}
.image_large {
    height: 300px;
}
.image_medium {
    height: 200px;
}
.image_small {
    height: 100px;
}

.panes > p {
    margin-inline: 4px;
}

.home-pane-3 .feedtext a {
    margin: 0;
    line-height: 2rem;
}
.home-pane-3 .feedtext a:hover {
    background-color: #ec9b19;
    color: brown;
}

/* ================================================== */
/* PAGE_GRID : HOME - PLAYLISTS - PROJECTS */
/* ================================================== */

.panes {
    background-image: var(--pane-bg);
    border-style: groove;
    border-color: #faffcd;
    padding: 6px;
}

/* * HOME PAGE [GRID]: * */
.home-grid {
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    grid-template-rows: repeat(5, minmax(120px, auto));
    column-gap: 10px;
    row-gap: 10px;
}

.home-pane-1 { grid-area: 1 / 1 / 6 / 2; }
.home-pane-2 { grid-area: 1 / 2 / 5 / 5; }
.home-pane-3 { grid-area: 1 / 5 / 5 / 6; }
.home-pane-4 { grid-area: 5 / 3 / 5 / 6; }
.home-pane-5 { 
    grid-area: 5 / 2 / 5 / 3;
    overflow-y: auto;
}

.comments {
    min-height: 120px;
}
.comment-content {
    overflow: hidden;
    background-color: #505364;
    height: 230px;
    max-width: 490px;
    margin: auto;
}
#commentframe {
    overflow:hidden;
    position:relative;
    top: -55%;
    left:-11%;
    height: 995px;
    width: 120%;
    margin-top: -490px;
    filter:invert();
    clip-path: polygon(1% 57%, 1960% 47%, 100% 90%, -2% 90%);
}


/* * PLAYLIST PAGE [GRID]: * */

/* * PROJECTS PAGE [GRID]: * */


/* ================================================== */
/* ANIMATIONS */
/* ================================================== */

/* NONE, YET */


/* ================================================== */
/* MY BEUTIFUL MODILE DEBISE + fullscreen */
/* ================================================== */
@media (min-width: 1200px) {
    .container {
    max-width: 70%;
    margin: auto;
    transition: 400ms;
} /* site container : makes sure everything is centered */
#sidenav-id a {
    position: absolute;
    left: 15.6%;
    width: 120px;
}
#sidenav-id a:hover {
    width: 150px;
}
}


/* FOR DEVICES LESS THAN 768PX */
@media (max-width: 770px) {
.container {
    max-width: 90%;
    margin: auto;
} /* site container : makes sure everything is centered */   

#sidenav-id a {
    position: absolute;
    left: 6.5%;
    width: 100px;
}
#sidenav-id a:hover {
    width: 120px;
}
}


/* FOR DEVICES LESS THAN 670PX */
@media (max-width: 670px) {
.container {
    max-width: 90%;
    margin: auto;
} /* site container : makes sure everything is centered */

body {
    font-size: XX;
  }


.home-grid {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    grid-template-rows: repeat(7, minmax(120px, auto));
    column-gap: 10px;
    row-gap: 10px;
}
     .home-pane-1 { grid-area: 1 / 1 / 5 / 2;}
     .home-pane-2 { grid-area: 1 / 2 / 6 / 4;}
     .home-pane-3 { grid-area: 6 / 1 / 7 / 2;}
     .home-pane-4 { grid-area: 6 / 2 / 6 / 4;}
     .home-pane-5 { grid-area: 5 / 1 / 6 / 2;}

.comments {
    min-height: 190px;
}

#sidenav-id a {
    position: absolute;
    left: 7%;
    width: 100px;
}
#sidenav-id a:hover {
    width: 120px;
}
#sticker-home {
    bottom: -78%;
    left: 16%;
}
}


/* for devices less than 480px */
@media (max-width: 480px) {
.container {
    max-width: 100%;
    margin: auto;
} /* site container : makes sure everything is centered */

#sidenav-id a {
    position: absolute;
    left: 2.5%;
    width: 90px;
    font-size: 18px;
}
#sidenav-id a:hover {
    width: 110px;
}
#sticker-home {
    bottom: -82%;
    left: 0;
}
}