/* chicle-regular - latin */
@font-face {
    font-family: 'Chicle';
    font-style: normal;
    font-weight: 400;
    src: url('./resources/fonts/chicle/chicle-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/fonts/chicle/chicle-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/fonts/chicle/chicle-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/fonts/chicle/chicle-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./resources/fonts/chicle/chicle-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/fonts/chicle/chicle-v21-latin-regular.svg#Chicle') format('svg'); /* Legacy iOS */
}
/* pt-sans-regular - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700italic - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 700;
    src: url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/fonts/pt-sans/pt-sans-v17-latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

body {
    background-color: #f095b4;
    color: #161616;
    font-family: 'PT Sans', sans-serif;
    letter-spacing: 0.01em;
    padding: 0;
    margin: 0;
    height: 100%
}


/* Top level grid & font styles */

.container {
    display: grid;
    grid-template: repeat(6, 1fr) / repeat(6, 1fr);
    height: 100%;
}

.dashboard {
    grid-column: span 1;
    grid-row: span 6;
}

.header {
    grid-column: span 5;
    grid-row: span 1;
}

.main {
    grid-column: span 5;
    grid-row: span 5;
}

.title-name,
.fullname,
.p1-title,
.p2-title,
.p3-title,
.p4-title,
.p5-title,
.p6-title {
    font-family: 'Chicle', serif;
    letter-spacing: 0.05em;
}

.greeting,
.projects-title,
.announce-title,
.b1-title,
.b2-title,
.b3-title,
.trending-title {
    font-weight: 700;
    letter-spacing: 0.05em;
}

.projects-title,
.announce-title,
.trending-title {
    font-size: 18px;
}

.title-name {
    font-size: 35px;
    color: #ffe9c4;
}

.info-name {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fullname {
    font-size: 30px;
}

.fullname > a {
    font-size: 24px;
}

.home-name,
.profile-name,
.messages-name,
.history-name,
.tasks-name,
.communities-name,
.settings-name,
.support-name,
.privacy-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffe9c4;
}

.p1-title,
.p2-title,
.p3-title,
.p4-title,
.p5-title,
.p6-title {
    font-size: 20px;
    letter-spacing: 0.02em;
    color: #161616;
    padding-bottom: 10px;
}

.p1-title:hover,
.p2-title:hover,
.p3-title:hover,
.p4-title:hover,
.p5-title:hover,
.p6-title:hover {
    color: purple;
}

.p1-text,
.p2-text,
.p3-text,
.p4-text,
.p5-text,
.p6-text {
    font-size: 14px;
    color: #4f4f4f;
    cursor: default;
    padding: 0 20px 0 15px;
}

.b1-title,
.b2-title,
.b3-title,
.trending-box {
    font-size: 14px;
}

.b1-title,
.b2-title,
.b3-title,
.b1-handle,
.b2-handle,
.b3-handle,
.b4-handle {
    color: black;
    cursor: default;
}

.b1-handle:hover,
.b2-handle:hover,
.b3-handle:hover,
.b4-handle:hover {
    cursor: pointer;
}

.b1-text,
.b2-text,
.b3-text {
    font-size: 12px;
    color: #4f4f4f;
    cursor: default;
}

.b1-description,
.b2-description,
.b3-description,
.b4-description {
    color: #606060;
    cursor: default;
}


/* 1-Dashboard */

.dashboard {
    background-color: #f15e2e;
    color: #ffe9c4;
    display: grid;
    grid-template-rows: 100px 275px 200px;
    padding-left: 5%;
}

.title,
.dashboard-top > div,
.dashboard-bottom > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6%;
}

.dashboard-top > div,
.dashboard-bottom > div {
    gap: 20px;
}

.dashboard-top,
.dashboard-bottom {
    padding-left: 5%;
}

.dashboard-top {
    padding-top: 5%;
}


/* 2-Header */

.header {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    background-color: #ffe9c4;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}

.header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 3%;
    padding-right: 5%;
}

.search,
.info,
.user,
.buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

input {
    border: none;
    outline: none;
    border-radius: 15px;
    background-color: white;
    width: 400px;
    height: 26px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    padding: 0 10px; 
}

.info {
    gap: 25px;
}

.info-icon {
    width: 20px;
}

@keyframes shake {
    10%, 90% {
      transform: translate3d(-2px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-2px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(2px, 0, 0);
    }
}

.info-icon:hover,
.b1-icon:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

.info-image {
    width: 40px;
}

.info-name:hover,
.greeting:hover,
.fullname:hover,
span:hover {
    cursor: default;
}

.bottom {
    padding-bottom: 1.5%;
}

.user-icon {
    width: 60px;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.user-icon:hover,
.info-image:hover,
.b2-icon:hover {
    animation: spin 500ms ease-out;
}

.buttons {
    gap: 25px;
}

button {
    background-color: #161616;
    color: #ffc75e;
    font-family: 'PT Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    border: none;
    outline: none;
    padding: 8px 0;
    border-radius: 20px;
    width: 90px;
}

button:hover {
    cursor: pointer;
    background-color: rgb(70, 29, 0);
}

button:active {
    background-color: rgb(108, 45, 0);
    -webkit-box-shadow: inset 2px 3px 8px rgb(42, 18, 0);
    -moz-box-shadow: inset 2px 3px 8px rgba(42, 18, 0);
    box-shadow: inset 2px 3px 8px rgba(42, 18, 0);
}

/* 3-Main */

.main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 25px 20px;
}

/* 3A-Projects */

.projects {
    grid-column: span 3;
}

.projects-title,
.announce-title,
.trending-title {
    padding-bottom: 10px;
    cursor: default;
}

.projects-grid {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    gap: 20px;
}

.projects-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffe9c4;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
    border-left: 8px solid #faab17;
    border-radius: 10px;
    padding: 25px 20px;
}

.p1-content,
.p2-content,
.p3-content,
.p4-content,
.p5-content,
.p6-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p2-image,
.p4-image {
    width: 100px;
    border-radius: 5px;
}

.p1-image,
.p3-image,
.p6-image {
    width: 90px;
    border-radius: 5px;
}

.p5-image {
    width: 75px;
    border-radius: 5px;
}

.p1-image:hover,
.p2-image:hover,
.p3-image:hover,
.p4-image:hover,
.p5-image:hover,
.p6-image:hover {
    transform: scale(1.05);
}

.p1-icons,
.p2-icons,
.p3-icons,
.p4-icons,
.p5-icons,
.p6-icons {
    display: flex;
    justify-content: end;
    gap: 20px;
}

/* 3B-Announcements */

.announcements {
    grid-column: span 1;
    display: grid;
    grid-template-rows: 48% 52%;
}

.announce-box,
.trending-box {
    background-color: #ffe9c4;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.announce-box {
    padding-top: 25px;
}

.box-1,
.box-2 {
    border-bottom: 1px solid #a2a2a2;
    padding-bottom: 10px;
}

.b3-icon {
    transition: all 500ms ease-out;
}

.b3-icon:hover {
    transform: scale(1.3);
}

.b4-icon {
    transition: all 500ms ease-out;
}

.b4-icon:hover {
    transform: scale(0.7);
}

.b1-text,
.b2-text,
.b3-text {
    padding-top: 1px;
}

a {
    text-decoration: none;
}

.trending-box > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.trending-box {
    gap: 25px;
}

.b1-icon,
.b2-icon,
.b3-icon,
.b4-icon {
    width: 40px;
}