/* Colors */
:root {
  --main-color: white;
  --second-color: black;
  --background-color: rgb(0 0 0 / 13%);
}


/* Main */
body {
    font-family: 'Ubuntu', sans-serif; margin: unset;
}
.main-color {color: var(--main-color);}
.second-color {color: var(--second-color);}
a {
    text-decoration: none;
    color: var(--second-color);
}
button {
    border: none;
    background-color: white;
}


/* Header & Footer */
.header {
    background-image: url(../img/main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2% 7%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;

    & .header-settings {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        & .top-buttons {
            height: 25px;
            background: var(--background-color);
            width: 15%;
        }

        & #langs {
            display: flex;
            justify-content: space-evenly;
            &  button {
                background: none;
            }
            & button:hover {
                background: gray;
            }
        }
        & .select {
            border: none;
            text-align: center;
            color: white;
            & option {
                background-color: var(--background-color);
                color: var(--second-color);
                font-family: 'Ubuntu', sans-serif;
            }
        }
    }
    & #header-title {
        & h1 {
            font-size: 60px;
            margin-top: 10%;
            margin-bottom: 2%;
        }
        & h2 {
            font-size: 45px;
        }
    }
    & #header-links {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & #header-social-media {
            width: 50%;
            margin: 3% 1%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        & #resume {
            padding: 2%;
            width: 25%;
            background-color: var(--background-color);
            text-align: center;
        }
        & #resume:hover {
            background-color: gray;
            color: var(--main-color);
        }

        & .social-media-link {
            margin-right: 20%;
        }
    }
}
.footer {
    margin: 2% 8%;
    padding: 3% 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid;

    & #social-media {
        width: 20%;
        display: flex;
        justify-content: space-evenly;
    }

    & .address {
        display: flex;
        flex-direction: column;

        & a {
            margin-bottom: 2%;
        }
    }
}
& .img-link {
    width: 30px;
    height: 30px;
}


/* Main */
.section {
    margin: 0 5%;
    padding: 2%;
}
.title {
    display: flex;
    align-items: center;

    & h1 {margin: 0;}
    & img {width: 10%;}
}
.content {padding: 0 3%;}

/* Sections */
#about-me {}
#work-experience {
    & .work-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2%;

        & p {
            margin: unset;
        }
    }

}
#skills-content {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    padding: 0 3%;
}
.skill {
    margin: 2%;
    padding: 5% 10%;
    border: 2px solid;

    & ul {
        list-style-type: none;
        padding: 2%;
    }
}
.skill-title {
    display: flex;
    flex-direction: column;
    align-items: center;

    & img {width: 50%;}
    & h4 {margin: 1%;}
}

/* PET Projects */
#pet-projects {
    & .carousel-inner {
        margin:  2% 5%;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        position: relative;
        height: 200px;

        & .carousel_item {
            overflow: hidden;
            position: relative;
            transform: translateX(-100%);

            width: 100%;
            min-height: 200px;
            transition: width 1s ease-in-out;

            flex-shrink: 0;
            text-align: left;
        }
    }
}