/* ===PRIMARY CSS=== */
/* CODE BY: SIMSAV00 */

/* ===VARIABLES=== */
:root{
    --body-background:Linear-gradient(140deg,hsl(0,0%,0%),hsl(0,0%,15%));
    --default-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --default-font-colour:white;

    --navbar-font-colour:white;
    --navbar-background-hover:hsl(0,0%,30%);
    --card-background:linear-gradient(130deg,hsl(0,0%,10%),hsl(0,0%,15%));
    
    --sun-svg-colour:hsl(0,0%,95%);
    --moon-svg-colour:hsl(0,0%,20%);
    --sun-icon:inline-block;
    --moon-icon:none;
    
    --link-colour:hsl(203,100%,67%);

    --footer-content:'© Simple Grid';
}
*,*::before,*::after{
    margin:0;
    padding:0;
    font-family:var(--default-font);
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}
body{
    min-height: 100vh;
    background:var(--body-background) no-repeat fixed;
    background-size: cover;
    color:var(--default-font-colour);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ===NAVIGATION BAR=== */
.body-header{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin:0 auto;
    padding:1.5rem;
}
.header-logo{
    display:flex;
    align-items: center;
    gap:.5em;
}
.header-logo .header-title{
    margin-bottom: 0;
    line-height: 1;
    font-weight: 500;
}
.header-logo img{
    width:33px;
}
.header-navbar ul{
    display: flex;
    justify-content:flex-start;
    gap:20px;
}
.header-navbar ul li{
    list-style: none;
}
.header-navbar ul li a{
    color:var(--default-font-colour);
    text-decoration: None;
    border: .01px solid transparent;
    border-radius:5px;
    padding:7px;

    transition:background .25s;
}
.header-navbar ul li a:hover{
    background:var(--navbar-background-hover);
}
.header-navbar ul li a.navbar-active-page{
    position: relative;
}
.header-navbar ul li a.navbar-active-page::before{
    content:'';
    background:var(--default-font-colour);
    position:absolute;
    height:2px;
    width:100%;
    bottom:0;
    left:0;
}
/* !!! */
/* !!!-IMPORTANT-!!! */
.header-navbar ul li:last-child{
    display: none;
}
/* !!! */
/* !!!-OMIT THIS SOON!-!!!*/

/* ===LIGHTMODE TOGGLE FUNCTIONALITY=== */
body:has(.header-logo input[type=checkbox]:checked){
    --body-background:linear-gradient(150deg,hsl(0,0%,100%),hsl(0,0%,95%));

    --default-font-colour:black;
    --card-background:hsl(200,0%,89%);
    --moon-icon:inline-block;
    --sun-icon:none;
    --navbar-background-hover:hsl(0,0%,89%);
    --link-colour:blue;
}
.darkmode input[type=checkbox]{
    display:none;
}
.sun-icon svg{
    fill:var(--sun-svg-colour);
    width:auto;
    height:1.1rem;
}
.sun-icon{
    display:var(--sun-icon);
    user-select: none;
    font-size:1.5em;
}
.moon-icon svg{
    fill:var(--moon-svg-colour);
    width:auto;
    height:1.1rem;
}
.moon-icon{
    display:var(--moon-icon);
    user-select:none;
    font-size:1.5em;
}
.sun-icon,.moon-icon{
    transition:transform .1s;
    cursor: pointer;
}
.sun-icon:hover,.moon-icon:hover{
    transform:scale(1.1);
}
.sun-icon:active,.moon-icon:active{
    transform: scale(0.9605);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===MAIN CONTENT== */
.body-main{
    flex:1;
    margin:0 auto;
    max-width:800px;
    padding:20px;
    min-height:calc(100vh - 110px);
}
.information{
    padding-bottom: 1.5rem;
}
.breadcrumb ol{
    display: flex;
    list-style: none;
    gap:5px;
}
.breadcrumb ol li a{
    color:var(--link-colour);
    text-decoration: none;
}
.breadcrumb ol li:not(:last-child)::after{
    content: '»';
}
.card-list .card{
    list-style: none;
    background:var(--card-background);
    border-radius: 10px;
    padding:20px;
    margin-top:20px;
    transition:transform 100ms;
}
.card a{
    color:var(--default-font-colour);
    text-decoration: none;
}
.card h2{
    margin-bottom: 5px;
}
.card p{
    font-size:17px;
}
.card footer{
    margin-top:5px;
    font-size:13px;
}
.card:hover{
    transform: scale(1.010);
}
.card:active{
    transform: scale(0.9655);
}
.changelog-ul .changelog-li{
    list-style: none;
}
.main-article h2{
    margin-top:1rem;
    margin-bottom: 1rem;
}
.main-article ul,
.main-article ol {
    margin-left: 1rem;
}
.main-article img{
    border-radius: 5px;
}
.body-footer{
    text-align: center;
    font-size:12px;
}
.metadata{
    margin-top:.2rem;
}
.metadata span::after{
    content:'•';
}
.body-footer::after{
    content:var(--footer-content);
}

/*===RESPONSIVE CSS===*/
@media(max-width:636px){
    .body-header{
        flex-direction: column;
    }
    .body-header ul{
        margin-top:20px;
    }
    .sun-icon,.moon-icon{
        margin-top:.35rem;
    }
    .sun-icon svg,.moon-icon svg{
        height:1.4rem;
    }
}