a {
    color: inherit;
    text-decoration: none;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.page_layout1 {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 75px 1fr 30px;
    width: 100%;
    height: 100vh;
    margin: 0;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer"
}

.box {
    width: 100%;
    height: 100%;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header {
    grid-area: header;
    border-bottom: 5px solid #050d63;
    background: linear-gradient(to bottom, #09317a, #050d63);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar {
    padding-top: 5px;
    grid-area: sidebar;
    background: linear-gradient(90deg, #c44e1c, #bd3c08);
    border-right: 5px solid #050d63;
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    flex-direction: column;
}

.navbar_youtube {
    background-image: url('../images/YouTube.png');
    width: 95px;
    height: 75px;
    background-size: 80px, 80px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_spotify {
    background-image: url('../images/Spotify.png');
    width: 95px;
    height: 90px;
    background-size: 80px, 80px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_instagram {
    background-image: url('../images/Instagram.svg');
    width: 95px;
    height: 100px;
    background-size: 80px, 80px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_x {
    background-image: url('../images/X.png');
    width: 95px;
    height: 80px;
    background-size: 80px, 80px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_tiktok {
    background-image: url('../images/TikTok.png');
    width: 95px;
    height: 105px;
    background-size: 80px, 80px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_discord {
    background-image: url('../images/Discord.png');
    width: 95px;
    height: 85px;
    background-size: 150px, 150px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    grid-area: main;
    background: linear-gradient(90deg, #bd3c08, #c44e1c, #bd3c08);

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.footer {
    grid-area: footer;
    border-top: 5px solid #050d63;
    background: linear-gradient(to bottom, #050d63, #09317a);

    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea4e06;
}

.content_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 250px 200px 1fr;
    grid-template-areas: 
        "box1 box1 box1 box1"
        "box2 box2 box2 box2"
        "user1 user2 user3 user4";
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
}

.content_box1 {
    grid-area: box1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
}

.content_box2 {
    grid-area: box2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
    width: 100%;
    height: 100%;
}

.text_header {
    text-align: center;
    font-size: 60px;
    font-family: 'Righteous', cursive;
    color: white;
}

.user {
    display: contents;
}

.name {
    text-align: center;
    font-size: 30px;
    font-family: 'Righteous', cursive;
    color: white;
}

.text {
    text-align: center;
    font-size: 18px;
    font-family: Arial, sans-serif;
    color: white;
}

.page_title {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 4fr 75px 12fr 4fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "null1 broncos title null2";
}

.page_title_text {
    grid-area: title;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 55px;
    font-family: 'Righteous', cursive;
}

.null {
    width: 100%;
    height: 100%;
}

.broncos {
    width: 70px;
    height: 70px;
    grid-area: broncos;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 65px;
    font-family: 'Righteous', cursive;
    background-image: url('../images/Broncos_Country.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (width < 800px) {

    .page_layout1 {
        grid-template-columns: 55px minmax(0, 1fr);
        grid-template-rows: 65px minmax(0, 1fr) 30px;
    }

    /* Sidebar */

    .navbar_youtube,
    .navbar_spotify,
    .navbar_instagram,
    .navbar_x,
    .navbar_tiktok,
    .navbar_discord {
        width: 50px;
        height: 50px;
        background-size: 40px;
    }

    .navbar_discord {
        background-size: 50px;
    }

    /* Header */

    .page_title {
        grid-template-columns: 5px 55px minmax(0, 1fr) 5px;
    }

    .broncos {
        width: 55px;
        height: 55px;
    }

    .page_title_text {
        font-size: 20px;
        position: relative;
        justify-content: center;
        align-items: center;
    }

    /* Main content */

    .content_grid {
        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            180px
            100px
            150px
            150px;

        grid-template-areas:
            "box1 box1"
            "box2 box2"
            "user1 user2"
            "user3 user4";

        gap: 5px;
    }

    .content_box1 {
        font-size: 16px;
        padding: 10px;
    }

    .text_header {
        font-size: 40px;
    }

    .name {
        font-size: 22px;
    }

    .text {
        font-size: 14px;
    }
}