:root {
    --bcw:white;
    --fcm:#ffa500;
}
*, ::before, ::after {
    /* border: 1px solid red; */
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family:  Arial, sans-serif;
    font-size: 16px;
    background-color: white;
}
.header {
    position: sticky;
    top: 0;
    background-color: var(--bcw);
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 10px;
    margin-right: 50px;
}
#navbar a {
    text-decoration: none;
    padding: 5px;
    background-color: var(--fcm);
    color: var(--bcw);
    border-radius: 10%;
}
#navbar ul {
    list-style: none;
    display: flex;
    column-gap: 25px;
}
#navbar ul ul {
    display: none;
}
#navbar ul li:hover > ul {
    display:block;
    position: absolute;
}
#navbar ul li:hover > ul li {
    font-size: 0.9rem;
    line-height: 1.25rem;
    margin-top: 3px;
    padding: 3px 0;
}
#navbar ul li:hover > ul li:hover {
    border-bottom: solid 3px var(--bcw);
}
#welcome-section {
    display: flex;
    flex-direction: column;
    height: 50vh;
    background-color: var(--fcm);
    text-align: center;
    justify-content: center;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
}


h1 {
    font-size: 4rem;
    color: var(--bcw);
}

p {
    font-size: 2rem;
    color: var(--bcw);
}
span {
    font-size: 0.8rem;
}
h2{
    text-align: center;
}

img {
    width: 100%;
    object-fit: cover;
    max-width: 400px;
    padding: 10px;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;

}

footer {
    text-align: right;
    font-size: 0.8rem;

}
#allprojects {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.prj-groups {
    display: flex;
    min-width: 400px;
    max-width: 400px;
    aspect-ratio: 1;
    flex-direction: column;
    /* border: 2px solid blue; */
    justify-content:center ;
    gap: 20px;
}
.prj-groups * {
    display: flex;
    flex-direction: column;
}

#projects {
    display: flex;
    align-items: center;
    justify-content: center;

}
.project-title a {
    font-size: 1.5rem;
    color: var(--fcm);
    text-decoration: none;
}

.project-title a:hover {
    color: var(--bcw);
    background-color: var(--fcm);
}

#contacts {
    height: 50vh;
    margin: 10px;
}

#contacts a {
    text-decoration: none;
    color: var(--fcm);
}

@media only screen and (min-width:900px) {

}

@media only screen and (max-width:600px) {
    
h1 {
    font-size: 1.2rem;
    color: var(--bcw);
}

p {
    font-size: 1rem;
    color: var(--bcw);
}
h2{
    font-size: 1rem;
}
img {
    max-width: 300px;
    object-fit: cover;
    padding: 10px;
    align-self: center;
    border-radius: 25%;
}

}