body {
    padding: 0em;
}
header {
    padding: 0 0 0 1em;
   
    text-align: center;
    
}
.hero {
    background-image: linear-gradient(rgb(0,0,0,0.5), rgb(0,0,0,0.5)), url(my-projects/minetest/screenshots/my-house-part-5.png);
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

.hero-text{
    text-align: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 50%);
    color: white;
}
.hero-text .name{
    font-weight: bold;
    font-size: 4em;
}

.hero-text .description {
    
    font-size: 1.2em;
}

.projects {
    box-shadow: 4px 4px 6px 0 white;
    padding: 0.1em;
    background-color: white;
    
    border-radius: 1em;
    text-align: center;
    font-size: 2em;
    margin-bottom: 1em;
    margin-top: 1em;

    display: block;
    text-decoration: none;
    width: 100%;

    color: green;
    font-weight: bold;
}

.projects a {
    padding: 1em;
    text-decoration: none;
    color: green;
    font-weight: bold;
}
.skills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
    justify-content: center;
    align-items: center;
}

.skills-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1em;
    min-width: 20%;

    box-shadow: 4px 4px 6px em white;
    padding: 1em;
    background-color: rgb(228, 223, 223);
    border-radius: 1em;

}

.skills-emoji {
    font-size: 3em;
    text-align: center;
}

.skills-description {
    font-size: 1.2em;
    text-align: center;
}
.skills-application {
    font-family: monospace;
    text-align: center;
    font-weight: bold;
}
.todo-title {
    margin-top: 1em;

    box-shadow: 4px 4px 6px em white;
    padding: 0.1em;
    background-color: white;
    
    border-radius: 1em;
    text-align: center;
    font-size: 2em;
}
.todo-title {
    padding: 0.5em;
    text-decoration: none;
    color: red;
    font-weight: bold;
}
.todo {
   
    border-radius: 0.1em;
    text-align: center;

    box-shadow: 4px 4px 6px 0;
    padding: 0.5em;
    background-color: rgb(202, 200, 200);
    margin-top: 1em;
    border-radius: 1em;
    
}



.galaxy-theme {
    background-color: black;
    background-image: url(./my-images/galaxy-background.png);
    color: skyblue;
    font-family: 'Times New Roman', Times, serif;
}


.photos {

    margin: auto;
    width: 40em;
    height: 40em;
}

@keyframes spin {
    0% {
        scale: 150%;
    }

    10% {
        scale: 2;
    }
}

.star {
    position: absolute;
    animation: star 4s linear infinite;
    z-index: 100;
}

.size-50 {
    height: 5em;
    width: 5em;
}

.size-100 {
    height: 10em;
    width: 10em;
}

.size-200 {
    height: 20em;
    width: 20em;
}

@keyframes star {

    0% {
        opacity: 100%;
        transform: translateY(em) rotate(0deg);
    }

    100% {
        opacity: 0%;
        transform: translateY(-100vh)rotate(360deg);
    }

}