body {
    background-color:   #112211;
    color:              #DFDFDF;

    font-size:          22px;
    font-family:        "Roboto Mono", sans-serif;
    font-weight:        bold;
    text-transform:     uppercase;

    padding:            0px;
    margin:             0px;
}

.header-wrapper {
    background-color:   #111111;
    
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

.header-wrapper p {
    font-weight:        bold;
}

.content-wrapper {
    display:            grid;
    grid-template-rows: 70px 70px 70px;

    margin-top:         10px;
}
.content-wrapper button {
    font-size:          22px;
    font-weight:        bold;

    margin:             10px;
}

/* card */
.card-wrapper {
    background-image: url(Card-01.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    image-rendering: pixelated; 
    
    height: 200px; 
    margin: 20px; 
    
    border-radius: 8px; 
    box-shadow: white 0px 0px 15px; 
    background-color: #163816; 
    
    overflow: hidden;
}

.card-wrapper img{
    width: auto; 
    height: 400px; 
    
    position: relative;
    margin-left: 50%;
    transform: translateY(-80px);
}

.card-wrapper p{
    margin: 5px 0; 
    margin-left: 5px; 
    
    z-index: 5; 
    position: relative; 
    
    font-size: 18px;

    background-color: #00000088;
    width: fit-content; 
}

.card-wrapper p.space-top{
    margin-top: 70px;
}

/* contact button */

.contact-wrapper {
    background-color:   #55bb55;
    color:              #DFDFDF;

    border:             none;
    border-radius:      15px;
    box-shadow:         0 9px #228822;
}

.contact-wrapper:active {
    background-color:   #339933;
    box-shadow:         0 5px #117711;
    transform:          translateY(5px);
}



/* homepage button */

.homepage-wrapper {
    background-color:   #5577bb;
    color:              #DFDFDF;

    border:             none;
    border-radius:      15px;
    box-shadow:         0 9px #224488;
}

.homepage-wrapper:active {
    background-color:   #335599;
    box-shadow:         0 5px #113377;
    transform:          translateY(5px);
}



/* Github button */

.github-wrapper {
    background-color:   #7755bb;
    color:              #DFDFDF;

    border:             none;
    border-radius:      15px;
    box-shadow:         0 9px #442288;
}

.github-wrapper:active {
    background-color:   #553399;
    box-shadow:         0 5px #331177;
    transform:          translateY(5px);
}