body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.about {
    text-align: center;
    color: white;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    border-radius: 10px;
    transition-duration: 0.3s;
    background: rgb(34,28,133);
    background: linear-gradient(90deg, rgba(34,28,133,1) 0%, rgba(33,33,175,1) 37%, rgba(0,212,255,1) 100%);
}

.about:hover{
    cursor: grab;
    box-shadow: 5px 5px 4px rgba(0,212,255,0.2);
}

.projects {
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.projects-header {
    display: flex;
    justify-content: center;
    color: white;
    transition-duration: 0.3s;
    background: rgb(34,28,133);
    background: linear-gradient(90deg, rgba(34,28,133,1) 0%, rgba(33,33,175,1) 37%, rgba(0,212,255,1) 100%);
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

.projects-header:hover {
    cursor: grab;
    box-shadow: 5px 5px 4px rgba(0,212,255,0.2);
}

.project {
    margin-right: 15px;
    margin-top: 20px;
    display: flex;
    position: relative;
    justify-content: center;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari, Chrome, Opera */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard syntax */
}

.project img {
    border-radius: 10px;
    transition-duration: 0.3s;
    opacity: 40%;
}

.project img:hover{
    cursor: grab;
    box-shadow: 5px 5px 4px gray;
}

.center-text-image {
    font-size: 20px;
    position: absolute;
    text-align: center;
    color: white;
}

.small-text {
    font-size: 15px;
}

.bottom-text {
    position: absolute;
    color: white;
    bottom: 0;
    padding: 5px;
    margin-bottom: 2px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 3px;
}

.footer {
    width: 100%;
    text-align: center;
    background-color: rgb(82, 82, 82);
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
}

.email p {
    text-decoration: none;
    
}

.email a {
    text-decoration: none;
    color: rgba(0,212,255,1);
    transition-duration: 0.2s;
    padding: 5px;
}

.email a:hover {
    text-decoration: none;
    color: rgb(73, 204, 73);
    background-color: rgb(20, 20, 20);
    padding: 5px;
    border-radius: 5px;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }

    .project img:hover{
        cursor: grab;
        box-shadow: 5px 5px 4px #262626;
    }
}