styles.css

:root {
    --size: 30px;
    --theme : 0;        /* 0 -> dark, 1 -> Light*/
    --foreground: white;
    --background: rgb(29,29,29);
}

body{
    background-color: var(--background);
    margin: 0;
    color: var(--foreground);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}
header h1{
    font-size: 60px;
}
.theme{
    position: absolute;
    font-size: 30px;
    right: 20px;
    top: 10px;
    padding: 10px;
    cursor: pointer;
}
.box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.proj{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
    cursor: pointer;
}
.proj-img{
    width: 100%;
    max-width: 400px;
    margin: 20px;
}
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    border: 1px solid var(--foreground);
    /* height: 40px; */
    /* width: 100px; */
    margin-bottom: 10px;
    padding: 5px 20px;
    font-size: 40px;
    transition: 0.3s ease all;   
    color: var(--foreground);
}
a.button:hover{
    background-color: rgb(141, 177, 245);
    cursor: pointer;
}

@media only screen and (max-width: 411px){
    header h1{
        margin-top: 50px;
        font-size: 50px;
    }
    .theme{
        top:5px;
    }
    .box{
        width: 100%;
    }
    .proj{
        width: 100%;
        margin:10px;
    }
    .proj-img{
        margin: 10px;
        width: 100%;
    }
    a.button{
        font-size: 30px;
    }
}

@media only screen and (max-width: 840px){
    .proj{
        max-width: 350px;
        margin: 10px;
    }
}