*{
    margin: 0;
    padding: 0;
}
.container{
    min-width: 530px;
    display: grid;
    grid-template: .4fr 4fr 2fr/ 1fr repeat(3, 1.5fr);
}

.header {
    background-color: rgba(255, 255, 255);
    grid-row: 1 / 1;
    grid-column: 2 / span 3;
    display: grid;
    grid-template: .5fr 1fr / .6fr 3fr repeat(3, 1fr);
    align-items: center;
    font-family: Arial, sans-serif;
    gap: 10px;
}

.search-icon {
    margin: 1rem;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    justify-content: end;
    align-items: center;
    display: flex;
}

.search-icon > img {
    height: 20px;
}

.search-bar{
    display: flex;
    grid-column: 2 / span 2;
    grid-row: 1 / 1;
    margin-right: 4rem;
}

input {
    flex: 1 1 100%;
    height: 25px;
    border-radius: 14.5px;
    border: 1px solid rgb(205, 205, 205);
    padding-left: 10px;
    font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
}
.notification-icon{
    margin: .5rem;
    grid-column: 1;
    grid-row: 1;
    justify-content: right;
    align-items: center;
    display: flex;
}

.notification-icon > img {
    height: 20px;
}

.small-profile-icons{
    grid-column: 4 / 4;
    grid-row: 1 / 1;
    justify-content: right;
    align-items: center;
    display: grid;
    grid-template: 1fr / 1fr 1fr;
}
.small-l {
    grid-column: 2;
    grid-row: 1;
    margin: .5rem;
    display: flex;
    justify-content: right;
    align-items: center;

}
.small-l > img {
    height: 40px;
}

.small-profile-name{
    grid-column: 5 / 5;
    grid-row: 1 / 1;
    font-size: small;
    font-weight: 700;
}

.large-profile-image {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    margin: .5rem;
    display: flex;
    justify-content: right;
    align-items: center;
}

.large-profile-image > img {
    height: 60px;
}

.large-profile-name {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
}

.new-button{
    grid-column: 3 / 3;
    grid-row: 2 / 2;
}

.upload-button{
    grid-column: 4 / 4;
    grid-row: 2 / 2;
}

.share-button {
    grid-column: 5 / 5;
    grid-row: 2 / 2;
}

button {
   background-color: rgb(100, 93, 215);
   height: 40px;
   width: 125px;
   border-radius: 20px;
   color: rgb(255, 255, 255);
   border: none;
   font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
   font-weight: 500;
   font-size: medium;
}

.sidebar{
    background-color: rgb(100, 93, 215);
    display: grid;
    grid-template: .15fr .2fr 1fr / .75fr;
    grid-row: 1 / 4;
    grid-column: 1 / 1;
    font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    color: rgb(255, 255, 255);
    padding-bottom: 4rem;
    align-items: center;
    justify-content: center;
    gap: 30px;
   
}

.dashboard {
    grid-row: 1;
    display: grid;
    align-self: center;
    grid-template: 1fr / 1fr 2fr;
    margin-top: 3rem;
}

.dashboard-icon {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    margin-right: .5rem;
    justify-content: end;
    align-content: center;
}

.dashboard-icon > img {
    grid-row: 1;
    grid-column: 1;
    height: 50px;
}

.dashboard-text{
    font-size: 1.5rem;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
}

.mid-dashboard {
    grid-row: 2;
    display: grid;
    grid-template: repeat(6, 1fr) / 1fr 2fr;
    align-self: start;
    gap: 10px;
}

.mid-dashboard > a {
    margin-right: .5rem;
}


.mid-dashboard > [class*="icon"] > img {
    height: 25px;
    grid-row: 1;
    grid-column: 1;
}

.home-icon {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    justify-content: right;
    align-content: center;
}

.home-text {
    grid-row: 1 / 1;
    grid-column: 2 / 2;
}

.profile-icon{
    display: grid;
    grid-row: 2;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.profile-text {
    grid-row: 2 / 2;
    grid-column: 2 / 2;
}

.messages-icon {
    display: grid;
    grid-row: 3;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.messages-text {
    grid-row: 3 / 3;
    grid-column: 2 / 2;
}

.history-icon{
    display: grid;
    grid-row: 4;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.history-text {
    grid-row: 4 / 4;
    grid-column: 2 / 2;
}

.tasks-icon {
    display: grid;
    grid-row: 5;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.tasks-text {
    grid-row: 5 / 5;
    grid-column: 2 / 2;
}

.communities-icon{
    display: grid;
    grid-row: 6;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.communities-text {
    grid-row: 6 / 6;
    grid-column: 2 / 2;
}

.mid-dashboard > [class*="text"] {
    text-align: left;
    align-self: center;
}


.bottom-dashboard {
    grid-row: 3;
    display: grid;
    grid-template: repeat(3, 1fr)/ 1fr 2fr;
    gap: 10px;
    align-self: start;
}

.bottom-dashboard > a {
    margin-right: .5rem;
}

.bottom-dashboard > [class*="icon"] > img {
    height: 25px;
    grid-row: 1;
    grid-column: 1;
}

.settings-icon{
    display: grid;
    grid-row: 1;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.settings-text {
    grid-row: 1 / 1;
    grid-column: 2 / 2;
}

.support-icon{
    display: grid;
    grid-row: 2;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.support-text {
    grid-row: 2 / 2;
    grid-column: 2 / 2;
}

.privacy-icon {
    display: grid;
    grid-row: 3;
    grid-column: 1;
    justify-content: end;
    align-content: center;
}

.privacy-text {
    grid-row: 3 / 3;
    grid-column: 2 / 2;
}

.bottom-dashboard > [class*="text"] {
    align-self: center;
}

.nav {
    background-color: rgb(252, 250, 226);
    grid-row: 2 / span 2;
    grid-column: 2 / span 3;
    display: grid;
    grid-template: 1fr 4fr 4fr 4fr/ repeat(2, 1.5fr) 1fr;
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
}

.projects {
    grid-row: 1;
    grid-column: 1 / span 2;
    font-size: 1.25rem;
    align-self: flex-end;
}

.nav-box {
    display: grid;
    grid-template: 1fr 3fr 1fr/ 3fr repeat(3, 1fr);
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    border-left: 10px solid rgb(242, 255, 73);
    box-shadow: 2px 2px 2px rgb(0, 0, 0, .2);
    gap: 5px;
    padding: 30px;
}

.nav-box > h5 {
    grid-column: 1 / span 4;
    grid-row: 1 / 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}

.nav-box > h6 {
    grid-column: 1 / span 4;
    grid-row: 2 / 2;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: rgb(0, 0, 0, .7);
}

.nav-box > .star {
    display: flex;
    grid-column: 2 / 2;
    grid-row: 3 / 3;
}
.star {
    width: 15px;
    justify-self: right;
    align-self: center;
}

.nav-box > .eye {
    display: flex;
    grid-column: 3 / 3;
    grid-row: 3 / 3;
}

.eye {
    width: 15px;
    justify-self: right;
    align-self: center;
}

.nav-box > .root {
    display: flex;
    grid-column: 4 / 4;
    grid-row: 3 / 3;
}

.root {
    width: 15px;
    justify-self: right;
    align-self: center;
}

.nav-trend {
    display: grid;
    border-radius: 10px;
    background-color: rgba(255, 255, 255);
    box-shadow: 2px 2px 2px rgb(0, 0, 0, .2);
}

#nav-one{
    grid-row: 2;
    grid-column: 1;
}

#nav-two {
    grid-row: 2;
    grid-column: 2;
}

.announce-side {
    display: grid;
    grid-template: 1fr 4.5fr 1fr 4fr / 1fr;
    grid-row: 1 / span 4;
    grid-column: 3;
}

.announcements {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
    align-self: flex-end;
    margin-bottom: 20px;
    font-size: 1.15rem;
}

#trend-one {
    grid-row: 2;
    grid-column: 1;
    grid-template: repeat(3, 1fr)/ 1fr;
    gap: 5px;
    padding: 30px;
}

.trending {
    grid-row: 3;
    grid-column: 1;
    align-self: flex-end;
    margin-bottom: 20px;
    font-size: 1.15rem;
}

#trend-two {
    grid-row: 4;
    grid-column: 1;
    grid-template: repeat(4, 1fr)/ .75fr 1.5fr;
    gap: 15px;
    padding: 30px;
}

.nav-trend > [class*="ann"] {
    display: grid;
}

.nav-trend > [class*="ann"] > h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    align-self: center;
}

.nav-trend > [class*="ann"] > h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 200;
    color: rgb(0, 0, 0, .7);
}

.nav-trend > [class*="ann"] > hr {
    align-self: flex-end;
    background-color: rgb(0, 0, 0, .5);
    height: 1%;
}

.nav-trend > img {
    width: 50px;
    align-self: center;
    justify-self: center;
}

#trender {
    align-self: center;
}

#trender > h5 {
    font-size: small;
    font-weight: 200;
}

#trender > h6 {
    font-size: small;
    font-weight: 100;
    color: rgb(0, 0, 0, .7);
}

img:hover {
    scale: 1.15;
    transition: .3s;
}

button:hover {
    scale: 1.1;
    transition: .3s;
}


@media only screen and (max-width: 975px) {
    .container{
        grid-template: .4fr 4fr 2fr/ .5fr repeat(3, 1fr);
    }
    .announce-side {
        display: none;
        visibility: hidden;
    }
    .nav {
        grid-template-rows: .75fr repeat(6, 2fr) ;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #nav-one{
        grid-row: 2 / 2;
        grid-column: 1 / 1;
    }
   
    #nav-two {
        grid-row: 3 / 3;
        grid-column: 1 / 1;
    }

    #nav-three {
        grid-row: 4 / 4;
        grid-column: 1 / 1;
    }

    #nav-four {
        grid-row: 5 / 5;
        grid-column: 1 / 1;
    }

    #nav-five {
        grid-row: 6 / 6;
        grid-column: 1 / 1;
    }
   
    #nav-six {
        grid-row: 7 / 7;
        grid-column: 1 / 1;
    }
    .sidebar{
       grid-template: .1fr .1fr .25fr / .25fr;
      }
    .dashboard-text{
        visibility: hidden;
    }
    .mid-dashboard > [class*="text"] {
        visibility: hidden;
    }
    .bottom-dashboard > [class*="text"] {
        visibility: hidden;
    }
    .dashboard-icon {
        grid-column: 1 / span 2;
        justify-content: center;
    }
    .mid-dashboard > [class*="icon"] {
        grid-column: 1 / span 2;
        justify-content: center;
    }
    .bottom-dashboard > [class*="icon"] {
        grid-column: 1 / span 2;
        justify-content: center;
    }
    button {
        height: 50px;
        width: 50px;
        border-radius: 25px;
        color: rgb(100, 93, 215, 0);
    }
    .header {
        grid-template: .1fr .25fr / .1fr repeat(3, 1fr);
        gap: 0px;
        margin-left: 10px;
        justify-content: left;
    }
    .upload-button, .new-button, .share-button {
        justify-self: center;
    }

    .new-button {
        grid-column: 2 / 3;
    }
   
    .new-button > button {
        background-image: url(images/open-in-new.svg);
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
    }
    .upload-button {
        grid-column: 3 / 4;
    }

    .upload-button > button {
        background-image: url(images/upload.svg);
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
    }

    .share-button {
        grid-column: 4 / 5;
    }

    .share-button > button {
        background-image: url(images/share-all.svg);
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
    }
    .small-profile-icons {
        grid-column: 4 / 4;
    }
    .small-profile-name {
        visibility: hidden;
    }
    .large-profile-image {
        visibility: hidden;
    }
    .large-profile-name {
        visibility: hidden;
    }
    .notification-icon, .small-l {
        justify-content: left;
    }
}