*, *:before, *:after {
    /* border: 1px solid rgb(131, 131, 240); */
    margin: 0;
}

html {
    box-sizing: border-box;
    font-size: 16px;

    background-color: #000000;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Corp Trial';
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol, ul {
     list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

@font-face {
    font-family: 'cedge1';
    src: url('fonts/cedge1.woff2') format('woff2'),
        url('fonts/cedge1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corp Trial';
    src: url('fonts/CorpTrial-Regular.woff2') format('woff2'),
        url('fonts/CorpTrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corp Trial Med';
    src: url('CorpTrial-Medium.woff2') format('woff2'),
        url('CorpTrial-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corp Trial';
    src: url('CorpTrial-Light.woff2') format('woff2'),
        url('CorpTrial-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corp Trial';
    src: url('CorpTrial-Bold.woff2') format('woff2'),
        url('CorpTrial-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


body {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr 4fr;
}

aside {
    grid-row: 1 / 3;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 5fr;
    gap: 10px;

}

main {
    grid-row: 2 / 3;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff0000' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    
}

.logo {
    font-family: 'cedge1';
  

    display: grid;
    grid-template-columns: 30% 70%;
    align-content: center;
    justify-content: flex-start;
}

.logo > img {
    width: clamp(50px, 4vw, 3.5rem); 
    height: auto;
    justify-self: right;
    margin-right: 15px;

}

.logo > span {
    font-size: clamp(50px, 4vw, 3.5rem); 
    align-self: center;
  
    color: red;
} 



#navlist1,
#navlist2 {
    font-size: 1.4rem;
    color: white;

    display: grid;
}

#navlist2 {
    margin-top: 50px;
    margin-bottom: 100px;
}

li {
    display: grid;

    grid-template-columns: 30% 70%;
    align-content: center;
    justify-content: flex-start;
    
    margin-bottom: 30px;

    
}

li > span {
    margin-top: 5px;
}

li > svg {
    width: clamp(30px, 4vw, 30px);
    height: auto;
    justify-self: right;
    margin-right: 15px;
}

svg {
    width: 30px;
    height: auto;

}


span {
    align-items: center;
}

span:hover, svg {
    cursor: pointer;
    color: red;
}

header {
    background-color: white;
    box-shadow: 0 5px #dba101;

    display: grid;
    grid-template-columns: 10fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding-bottom: 20px;

} .search,
.notif,
.greet,
.head-buttons {

    display: grid;


} .search input[type='search'] {
    -webkit-appearance: none;
    border: none;
    background-color: rgb(223, 223, 223);
    border-radius: 9999px;
    height: 40px;
    width: 100%;
    padding-left: 2%;
    font-size: 1.2rem;
    

} .search > svg,
.notif > svg {
    height: auto;
    width: 40px;
    margin-right: 5px;
} 

.notif > svg {
    justify-self: right;
}

/* Hides 'x' */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.search {
    display: grid;
    grid-template-columns: 50px minmax(90%, auto);
    justify-items: flex-start;
    align-items: center;
    margin-left: 50px;
}

.notif {
    justify-content: right;
   

    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    justify-content: right;
    /* margin-left: 50px; */
    margin-right: 10px;
}


.notif > img,
.greet > img {
    border-radius: 50%;
    height: auto;
    width: 50px;
    justify-self: center;
}

.greet > img {
    width: 70px;

    justify-self: right;
    margin-right: 10px;
}


.notif > span {
    font-weight: bold;
    font-size: 1.8rem;
    

}

.greet {
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 100px minmax(90%, auto) ;
    justify-items: flex-start;
    align-items: center;
    margin-left: 20px;
    margin-top: 20px;
}


.greet > p {

    display: grid;
    
    grid-template-rows: 20px 1fr;
    color: #000000;
    
}


p > span {
    font-size: 1.5rem;
    font-weight: 900;
}

.head-buttons {
    grid-template-columns: repeat(3, 1fr);

    align-items: center;
    justify-items: center;
    margin-top: 16px;
    /* margin-right: 190px; */
    margin-left: 70px;
    gap: 20px;
}

button {
    height: 50px;
    width: 120px;
    appearance: none;
    border-radius: 10px;
    font-size: large;
    background-color: rgb(170, 27, 27);
    color: white;
    border: none;
    font-weight: bolder;
    transition: background-color 0.1s ease-in-out, transform 0.1s ease-out;

}

button:nth-child(3){
    margin-right: 20px;
}

button:hover {
    cursor: pointer;
    color: white;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff0000' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #dba101;

}

main {
    display: grid;
    grid-template-columns: 4fr 1fr;
    
}

h1 {
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bolder;
    margin-top: 30px;
    margin-bottom: 15px;
}

.projects-cont,
.right-side {
    margin-left: 50px;
}

.projects-cont {
    margin-right: 80px;
}





.projects {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    
}



.cards {
    display: grid;
    background-color: white;
    height: 250px;
    width: auto;
    border-left: 10px solid rgb(179, 32, 32);
    border-radius: 10px;

    grid-template-rows: 1fr 1fr 1fr;
    
}

.right-side {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

p {
    color: rgb(116, 113, 113);
}

h2 {
    align-self: end;
}

h2, p {
    margin-left: 20px;
    margin-right: 20px;
}

.cards-icon {
   display: grid;
   grid-template-columns: 5fr 1fr 1fr;
   margin-right: 20px;
}

.cards-icon {
    justify-items: end;
    align-items: center;
}

.cards:hover {
    cursor: pointer;
    border-color: #dba101;
}

.right-cont {
    display: grid;

    height: 22em;
    width: 25em;
    background-color: white;
    border-radius: 10px;

    grid-template-columns: 1fr;
   
    
}


.announce-section,
.finance-section {
    height: 100%;
    width: 100%;
    
}

.announce-box {
    height: 70%;
    background-color: white;
    border-radius: 10px;

    display: grid;
    margin-right: 50px;
    
}

.announce-item > p {
    margin-left: 0;
    
}

hr {
    border: none;
    border-top: 1px solid #ccc;  
    width: 100%;
    /* margin: 10px auto; */
}

.announce-box {
    padding: 5% 5%;
}

.finance-box {
    /* background-color: #000000;
    border-radius: 10px; */

    height: 70%;
    background-color: white;
    border-radius: 10px;

    display: grid;
    margin-right: 50px;
    grid-template-rows: 1fr 1fr;
    
}

.finance-box > img {
    height: 100%;
    width: 100%;
    border-radius: 15px 15px 0 0;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    

}

.finance-stock {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;
    grid-template-rows: 1fr 3fr 3fr;
    
}

.svg-p {
    display: grid;
    grid-template-columns: 8px 1fr;
  
}

.svg-p > svg {
    margin-top: 2px;
   
}

.svg-p > p {
    margin-top: 10px;
    color: black;
}

#svg-ars {
    height: auto;
    width: 15px;
    margin-top: 10px;
    margin-left: 10px;
}

.finance-date {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 10px;

}



.finance-date > p:hover {
    cursor: pointer;
    color: black;
}

.finance-date > p:nth-child(3) {
    color: black;

}

.finance-stock > hr {
    grid-column: 1 / 4;
    width: 100%;
    height: 1px;
}

.finance-price {
    display: grid;

    grid-row: 2 / 3;
    grid-column: 1 / 4;
}

.finance-price > p {
    font-family: Arial, Helvetica, sans-serif;
    color: green;

}

.finance-news {
    grid-column: 1 / 4;
    
}

.finance-news > p {
    color: black;
}