/* IMPORTS */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* VARIABLES */
:root {
    --body-background: white;
    --content-box-shadows: 5px 5px 10px 5px #000000;
    --content-box-shadows-lesser: 5px 5px 10px 5px rgba(0,0,0,0.6); 
    --button-box-shadows: 5px 5px 6px 0px rgba(0,0,0,0.6);
    --intro-background-colour: #d9f99d;
    --sidebar-background-color: #0d9488;
    --fonts: "Oswald", Arial, Helvetica, sans-serif;
}

/* BODY RESET FONTS and LINK CREDIT */
body {
    margin: 0px;
    padding: 0px;
    background-color: var(--body-background);
    position: absolute;
    height: 100%;
    width: 100%;
    font-family: var(--fonts)
}
a {
    color: orange;
}

a:visited {
    color: rgb(204, 134, 4);
}

/* BASE GRID */

.container {
    display: grid;
    grid-template-columns: 1fr 6fr;
    grid-template-rows: 125px 8fr;
    height: 100%;
}

/* HEADER SECTION */

.header {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: 1fr 2fr;
}

.header-top {
    background-color: var(--intro-background-colour);
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    border-bottom: 2px black solid;
}

.icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons > svg {
    height: 25px;
    width: 25px;
    margin-right: 15px;
}

.icons > svg:hover {
   fill: orange;
   cursor: pointer;
}

.icons > img {
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

.icons > span {
    margin-left: 10px;
    font-weight: 700;
    font-size: 20px;
}

.icons > span:hover {
    color: orange;
    text-decoration: underline;
    cursor: pointer;
}

.search-bar > input {
    width: 40%;
    height: 25px;
    border-radius: 10px;
    background-color: rgb(231, 231, 231);
    border: none;
    margin-left: 7px;
    font-family: var(--fonts);
    padding-left: 10px; /*Sets padding on the text inside an input field */
}

.search-bar > svg {
    height: 25px;
    width: 25px;
    margin-left: 10px;
}

.search-bar > svg:hover {
    fill: orange;
    cursor: pointer;
}

.header-bottom {
    background-color: var(--intro-background-colour);
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    border-bottom: 4px black solid;
}

.introduction {
    display: flex;
    justify-content: start;
    align-items: center;
}
.introduction > img {
    height: 60px;
    width: 60px;
    border-radius: 100%;
    margin-left: 15px;
}

.introduction span {
    margin-left: 10px;
    /* Name in the welcome message can be moved to be even with the "Hi there," part either using negative margin or smarter use of selectors, 
       but I think it looks better this way */
}

.welcome-message {
    display: block;
    font-size: 28px;
    font-weight: 600;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

button  {
    height: 30px;
    width: 100px;
    border-radius: 13px;
    background-color: #a3e635;
    border: 2px solid white;
    font-size: 15px;
    box-shadow: var(--button-box-shadows);
    font-family: var(--fonts)

}

button:hover {
    background-color: orange;
    cursor: pointer;
}

button:active {
    background-color: #d9f99d;
}

/* SIDEBAR SECTION */

.sidebar {
    background-color: var(--sidebar-background-color);
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: 80px 1fr 1fr 1fr;
}
.sidebar > p {
    margin-top: 10px;
    font-size: 34px;
    margin-left: 10px;
}

.sidebar svg {
    height: 30px;
    width: 30px;
    margin-right: 5px;
}

.sidebar > ul {
    list-style: none;
}
li {
    font-size: 24px;
}

li:hover {
    text-decoration: underline;
    cursor: pointer;
    color: orange;
}

/* MAIN CONTENT SECTION */

.content {
    background-color: var(--body-background);
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 4fr 1fr;
    padding-bottom: 10px;
    gap: 30px; /* Serves as an insurance for shadow overlaping when changing screen size */
}

.content-center {
    background-color: var(--body-background);
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
}

.content-header {
    display: flex;
    justify-content: center;
}

.content-cards {
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    justify-items: center;
    gap: 40px;
    margin-top: 20px;
}



.card {
    background-color: white;
    height: clamp(150px, 250px, 400px);
    width: clamp(200px, 300px, 500px);
    border-radius: 10px;
    padding: 0px 5px;
    box-shadow: var(--content-box-shadows);
    border: 4px solid #d9f99d;
    display: grid;
    grid-template-rows: 1fr 50px;
}

.card-icons {
    justify-self: end;
}

.card-icons > svg {
    height: 30px;
    width: 30px;
    margin-right: 5px;
}

.card-icons > svg:hover {
    fill: orange;
    cursor: pointer;
}

.card-text > p {
    color: rgb(80, 80, 80);
}

.card-text > h4:hover {
    color: orange;
    text-decoration: underline;
    cursor: pointer;
}

.content-side {
    background-color: white;
    display: grid;
    align-items: start;
}

.announcements {
    background-color: var(--body-background);
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    justify-content: center;
}

.announcements-card, .trending-card {
    height: clamp(150px, 240px, 400px);
    width: clamp(180px, 250px, 450px);
    background-color: white;
    color: black;
    border-radius: 10px;
    box-shadow: var(--content-box-shadows-lesser);
    border: 4px solid #d9f99d;
}

.announcements-card  p, .trending-card > p, .announcements-card h4 {
    margin: 0;
    padding-left: 10px;
    margin-top: 3px;
}

.announcements-card p {
    color: gray;
    font-size: 14px;
}
.announcements-card h4:hover {
    color: orange;
    text-decoration: underline;
    cursor: pointer;
}

.announcements-card {
    display: grid;
    grid-template-rows: repeat(2, 1fr)
}

.announcements-content-top {
    border-bottom: 2px solid var(--sidebar-background-color);
}


.trending-card {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
}

.trending {
    background-color: var(--body-background);
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    justify-content: center;
}

.trending-content {
    display: grid;
    grid-template-columns: 40px 1fr;
}

.trending-content > img {
    height: 35px;
    width: 35px;
    border-radius: 100%;
    margin-left: 15px;
}

.trending-content-text > p, .trending-content-text > h5 {
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

.trending-content-text > p:hover, .trending-content-text > h5:hover {
    color: orange;
    text-decoration: underline;
    cursor: pointer;
}
.trending-content-text > p {
    color: rgb(80, 80, 80);
}


/* Truncates text with ellipsis, at the line number defined in webkit-line-clamp, code copied from https://css-tricks.com/line-clampin/ and modified*/
.truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
    }

/* MEDIA QUERIES */

@media (max-width: 960px) {

    .welcome-message {
        display: inline;
        font-size: 18px;
        margin-left: 0px;
    }

    .introduction span {
        margin-left: 3px;
    }

    .sidebar > p {
        font-size: 22px;
    }

    li {
        font-size: 24px;
    }

    .content-side {
        display: grid;
        grid-template-rows: 400px 400px;
    }

    .announcements-card, .trending-card {
        margin-top: 15px;
    }

    .introduction > img {
        height: 40px;
        width: 40px;
    }
    
}

@media (max-width: 1440px) {
    .content-side {
        display: grid;
        grid-template-rows: 400px 400px;
    }

    .announcements-card, .trending-card {
        margin-top: 15px;
    }

    .sidebar > p {
        font-size: 22px;
    }
}