html{
    background: linear-gradient(135deg, #FFE5B4 0%, #F7B267 50%, #FCD5CE 100%);
}
body {
    font-family: sans-serif ;
    color: #4a2c17;
    height: 100%;
    background-image: #000000;
}

.contentsection {
    background-color: #d2a679;
    border: 6px solid #8b5a2b;
    box-shadow: inset 0 0 0 4px #f5deb3;
    padding: 10px;
    border-radius: 5px;
    
}
.name {
    text-align: center;
    font-family: 'Micro 5', monospace;
    font-size: 2.8em;
}
.image {
    background: #f5deb3;
    border: 6px solid #8b5a2b;
    border-radius: 5px;
    box-shadow:
    inset 0 0 0 4px #d2a679,
    inset 0 0 0 8px #f5deb3,
    0 4px 0 #5c3a1a,
    0 8px 12px rgba(0,0,0,0.3);
    image-rendering: pixelated;
}




ul {
    list-style: none;
    padding-left: 0;
}

li  {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.6em;
}
li::before {
content: " ";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1em;
    height: 1em;
    background-image: url("bullet.png");
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
.platforms ul{
    list-style: none;
    padding-left: 0;
    column-count: 2;
    column-gap: 2rem;
}
.platforms li {
    break-inside: avoid;
    margin-bottom: 0.6em;
}

a {
    color: #4a2c17;
    text-decoration: none;
}

@media (min-width: 0px) {

    body {
        font-size: 10px;
    }

    
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 15px;
        margin: 0 auto;
    }

    .name {
        grid-column: 1 / 4;
        grid-row: 1;
        
    }

    .image {
        grid-column: 4 / 6;
        grid-row: 1;
        display: flex;
        align-items: flex-center;
        
    }

    .image img {
        height: auto;
        object-fit: contain;
        max-width: 100%;
    }

    .profile {
        grid-column: 1 / 6;
        grid-row: 2;
    }

    .project {
        grid-column: 1 / 6;
        grid-row: 3;
    }

    .language {
        grid-column: 1 / 6;
        grid-row: 4;
    }
    .platforms {
        grid-column: 1 / 6;
        grid-row: 5;
    }
    .link {
        grid-column: 1 / 6;
        grid-row: 6;
    }

    .contact {
        grid-column: 1 / 6;
        grid-row: 7;
    }
}

@media  (min-width: 700px) {

    body {
        font-size: 16px;
    }
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 15px;
        max-width: 1000px;
    }
    .contentsection {
    padding-left: 50px;
    }

    .name {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .image {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
        max-width: unset;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    
    .image img {
        max-width: 300px;
    }

    .profile {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    .project {
        grid-column: 1 / 6;
        grid-row: 3;
    }

    .language {
        grid-column: 1 / 4;
        grid-row: 4;
    }

    .platforms{
        grid-column: 1 / 6;
        grid-row: 5;
    }
    .link {
        grid-column: 4 / 6;
        grid-row: 4;
    }

    .contact {
        grid-column: 1 / 6;
        grid-row: 6;
    }

}