body{
    margin: 0;
    padding: 0;
    background-color: #363636;
    font-family: consolas, monospace;
    color: aliceblue;
}

.fullwrapper{
    display: grid;
    height: 100vh;
    grid-template-rows: 1fr 1fr;
}

.introductoryblock{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.center-content{
    grid-column: 2;
    display: flex;
    flex-direction: column;
}

.greetings{
    text-align: left;
    font-size: 1rem;
    padding-left: 5px;
    padding-top:90px;
    margin-bottom: 0px; 
    opacity: 0.8;
}

.name{
    font-size: 3.5rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.onlinename{
    text-align: right;
    font-size: 1.3rem;
    font-weight: bold;
    padding-right: 5px;
    margin-top: 5px;
    opacity: 0.8;
    color: #cd5b09; 
}

.socialsgithub{
    padding-top: 50px;
}

.projectlist{
    grid-row: 2;
    padding: 300px 50px 30px;;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: center;
    gap: 1vw;
}

.projectbox{
    flex: 0 0 30%;
    border: 1px solid white;
    display: grid;
    grid-template-rows: auto;
    transition: border-color 0.4s ease;
}

.projectbox:hover {
    border-color: #cd5b09; 
    transition: border-color 0.4s ease;
}

.projectnamebar{
    display: flex;
    flex-direction: row;
    padding-top:5px;
    padding-bottom:3px;
    border-bottom: 1px solid white;
}

.projectname{
    flex: 1 0 1px;
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 5px;
}

.projectdemo{
    /* border-bottom: 1px solid white; */
}

.projectdetails{
    padding: 10px;
    border-bottom: 1px solid white;
}

.projecttechstack{
    padding:12px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.5vw;
    border-bottom: 1px solid white;
}

.stacknodejs{
    padding: 5px 15px;
    border: 1px solid #349e33; 
    background-color: rgba(52, 158, 51, 0.2); 
    color: white;
}

.stackejs {
    padding: 5px 15px;
    border: 1px solid #B4CA65;
    background-color: rgba(180, 202, 101, 0.2); 
    color: white;
}

.stackmongodb {
    padding: 5px 15px;
    border: 1px solid #4DB33D;
    background-color: rgba(77, 179, 61, 0.2);
    color: white;
}

.stackaws {
    padding: 5px 15px;
    border: 1px solid #FF9900;
    background-color: rgba(255, 153, 0, 0.2);
    color: white;
}

.stackexpress {
    padding: 5px 15px;
    border: 1px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.1); 
    color: white;
}

.stackpython {
    padding: 5px 15px;
    border: 1px solid #306998;
    background-color: rgba(48, 105, 152, 0.2); 
    color: white;
}

.stacktensorflow {
    padding: 5px 15px;
    border: 1px solid #FF6F00;
    background-color: rgba(255, 111, 0, 0.2);
    color: white;
}

.stackjavascript {
    padding: 5px 15px;
    border: 1px solid #F7DF1E;
    background-color: rgba(247, 223, 30, 0.2);
    color: white;
}

.projectstats{
    padding: 10px;
}