/* Stuff to make it center */
* {
    text-decoration: none;
}

h1 {
    font-family: "Lexend", sans-serif;
    font-weight: 800;
}

h2, h3 {
    font-family: "Lexend", sans-serif;
    font-weight: 650;
}   

p, li {
    font-family: "Lexend", sans-serif;
    font-weight: 270;
}

strong {
    font-weight: 700;
    color: rgb(195, 224, 238);
}

hr {
    color: white;
}
body {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* The main structure of the website */
.cardMain {
    display: flex;
    flex-direction: row;
    color: #EEEEEE;
    padding: 5%;
    height: 50rem;
}

.gridItems {
    margin: 0;
    padding: 0;
    display: grid;
    position: relative;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 1fr 10fr 1fr;
    grid-template-areas:
        'heading heading'
        'aside main'
        'aside footer'
    ;

    h2 {
        font-size: 2rem;
    }
}

.gridAside {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    grid-area: aside;
    background-image: url("https://i.pinimg.com/736x/12/a1/b2/12a1b29e6e06c57c1041b66d9cb6a85c.jpg");
    border: 6px #b2d3e8 double;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(19, 100, 143, 0.7);

    ul {
        list-style-type: none;
    }

    .asideIcons {
        margin-left: 1rem;
        margin-right: 0.5rem;
        width: 3rem;
        object-fit: contain;
}


}

.gridHeading {
    background-image: linear-gradient(to bottom, #75c4d6, #4e88ac);
    padding-left: 1rem;
    display: flex;
    grid-area: heading;
    h1 {
        font-size: 3rem;
    }
}

.gridMain {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    grid-area: main;
    background-image: url("https://i.pinimg.com/originals/4a/37/15/4a371524cf385c297c035eb119717cd6.gif");
    background-position: center;
    background-size: 79rem;
    background-repeat: no-repeat;
    background-color: rgba(17, 43, 82, 0.7);
    background-blend-mode: multiply;
}

.gridContent {
        display: flex;
        .contentHeading {
            font-size: 2rem;
            margin-left: 1rem;
        }
 }

.gridArticle {
    img {
        margin-left: 2rem;
        width: min(50%, 20rem);
        object-fit: contain;
    }
}

.gridMain-lyrics {
    display: flex;
    margin: 0.5rem;
    border: 3px dotted #a6d6f3;

    .phaiicon {
        margin-left: 1%;
        width: 10rem;
        object-fit: contain;
    }

    p {
        margin: 0.5rem;
        color: #a6d6f3;
        padding-right: 2rem;
    }
}

.gridFooter {
    grid-area: footer;
    background-color: #6594B1;
}

/* For the Javascript to work */
.gridSection1 {
    overflow-y: auto;
    display: flex;
}

.gridSection2 {
    overflow-y: auto;
    display: none;
}

.gridSection3 {
    overflow-y: auto;
    display: none;
}

/* The CSS below are for the div/span/etc. elements inside the main Grid elements */
/* For the Side Bar (gridAside) */
    .asideLink {
        text-decoration: none;
        color: rgb(255, 255, 255);
    }

    .asideItem {
        display: flex;
        margin: 0.2rem;
        transition: border-bottom ease 0.2s, background-color ease-in 0.3s, backdrop-filter 0.6s;
    }

    .asideItem:hover {
        background-color: rgba(56, 135, 196, 0.6);
        backdrop-filter: blur(2px);
        border-bottom: 5px solid #7daacc;
        cursor: pointer;
        
    }

    div[class*=asideItem] {
        display: flex;
        flex-direction: row;
        margin: 0.4rem;
        background-color: rgba(131, 150, 165, 0.6);
        backdrop-filter: blur(10px);
    }

/* For Main, and basically the CSS used for the rest of the pages */
    .contentParagraph,
    .contentList {
        margin-left: 2rem;
        font-size: 1.1rem;
        margin-bottom: 1.3rem;

        li {
            margin-bottom: 0.5rem;
        }
    }

    .contentCaption {
        font-size: clamp(10%, 1.5rem, 2rem);
    }


    .contentUpdates {
        background-color: rgba(116, 180, 220, 0.5);
        margin: 2rem;
        padding: 1rem;
    }

    /* For Page 1 */
        .favAlbum {
            display: flex;
            flex-direction: column;
            top: 0;
            position: sticky;
            padding: 1rem;
            height: 25rem;
            background-color: rgba(208, 91, 103, 0.5);
            backdrop-filter: blur(3px);
            .newAlbum {
                width: 20rem;
                object-fit: contain;
            }
        }

    /* For Page 2 */
        .subContent {
            display: flex;
            margin: 2rem;
            img {
                border-radius: 25%;
            }
        }
        .subContentInterests, .subContentFandoms{
            border: 0.5rem #a6d6f3 double;
            p {
                margin: 0;
                padding: 1rem;
            }
        }

    /* For Page 3 */
        .subSocials {
            display: flex;
            padding: 10vw;
            margin: 2rem;
            flex-wrap: wrap;
            border: 10px rgb(174, 204, 232) double;
            background-image: url("https://i.pinimg.com/originals/97/25/39/97253941a874955f10c180764759d2cd.gif");
            background-position: center;
            background-size: cover;
            background-color: rgba(15, 49, 75, 0.7);
            background-blend-mode: multiply;
        }

        .subSocialsItem {
            flex-grow: 1;
            background-color: rgba(69, 130, 177, 0.5);
            backdrop-filter: blur(10px);
            padding: 1rem;
            margin: 0.3rem;
            transition: transform ease-in 0.2s, background-color ease-in 0.3s;
            h2, p {
                color: white;
            }

        }
        .subSocialsItem:hover {
            background-color: #78a5c6;
            transform: translateY(-10px);

        }

/* Media Query */
@media only screen and (max-width: 900px) {
    
    h1, h2{ 
        font-size: min(2rem, 3rem) !important;
    }

    p, li {
        font-size: 1rem !important;
    }

    body {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
           overflow-wrap: break-word;
    }
    .asideItem{
    p {
        display: none;
       }
    }

    .gridHeading{
        h1 {
            font-size: min(6vw, 3rem);
        }
    }
    .gridItems {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            'heading'
            'aside'
            'main'
            'footer'
        ;
        height: 95vh;
        overflow-x: auto;
    }

    .gridContent {
        flex-direction: column;
    }

    .favAlbum {
        top: auto;
        position: auto;
        height: 42vw;
        align-items: center;
        justify-items: center;

        .newAlbum {
            width: min(50%, 20rem);
        }
    }
    .subAlbum {
        display: flex;
        flex-direction: row;
    }

    .gridArticle {
        padding: 0;
    }

    .contentHeading,
    .contentParagraph {
        margin-right: 2rem;
    }

    .gridMain-lyrics {
        flex-direction: column;
        justify-items: center;
        align-items: center;
        .phaiicon {
            width: clamp(1rem, 20vw, 100vw);
        }
    }

    .asideIcons{
        margin: 0.1rem !important;
        padding: 0.5rem;
        width: min(5rem, 2rem)  !important;
        width: auto;
    }

    .gridAside {
        padding: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        
    }

    .subContent {
        flex-direction: column;
    }
    .contentUpdates {
        margin: auto;
        padding: 1rem;
    }
}