/* COLORS AND COLOR CLASSES */
:root{
    --deeptwilight: rgb(20, 13, 79);
    --richcerulean: rgb(35, 116, 171);
    --palesky: rgb(192, 216, 224);
}

.bg-dt{
    background-color: var(--deeptwilight);
}

.text-dt{
    color: var(--deeptwilight);
}

.bg-rce{
    background-color: var(--richcerulean);
}

.text-rce{
    color: var(--richcerulean);
}

.bg-ps{
    background-color: var(--palesky);
}

.text-ps{
    color: var(--palesky);
}
/* END COLORS AND COLOR CLASSES */

/* ------------------------------------------------------------------------------- */

/* FONTS */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: "Montserrat", sans-serif;
}

body {
  font-family: "Raleway", sans-serif;
  background-color: var(--deeptwilight);
  color: var(--palesky);
  padding-top: 40px;
}
/* END FONTS */

/* ------------------------------------------------------------------------------- */

/* NAVBAR */
.nav-link{
    font-size: 18px;
    transition: 0.8s;
    color: var(--deeptwilight);
}

.nav-link:hover{
    transform: scale(1.1);
    color: var(--palesky);
}

.navbar-toggler{
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon{
    color: var(--deeptwilight);
}
/* END NAVBAR */

/* ------------------------------------------------------------------------------- */

/* SECTION: CHI SONO */
#wrapperWhoAmI{
    background: var(--palesky);
}


.whoAmI{
    background-color: rgba(20, 13, 79, 0.3);
    border: 5px solid var(--richcerulean);
    border-radius: 20px;

}

.photo-custom{
    height: 400px;
    width: 400px;
    border: 5px solid var(--richcerulean);
    border-radius: 50%;
    background-image: url('/assets/images/personal-photo.jpg');
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: center;
}

.img-custom{
    height: 400px;
    border-radius: 50%;
}

.custom-paragraph{
    text-align: justify;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 15vh;
}
/* END SECTION: CHI SONO */

/* ------------------------------------------------------------------------------- */

/* SECTION: PROGETTI */
#wrapperProjects{
    background: linear-gradient(rgba(20, 13, 79, 0.8)),url('/assets/images/coding-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card{
    background-color: var(--palesky);
    color: var(--deeptwilight);
    border: 5px solid var(--richcerulean);
    width: 300px;
    transition: 0.8s;
}

.card-custom:hover{
    transform: scale(1.1);
}

.card-img{
    height: 300px;
    width: 300px;
}

.btn-custom:hover{
    /* background-color: transparent; */
    background-color: var(--palesky);
    border: 1px solid var(--deeptwilight);
    color: var(--deeptwilight);
}

/* END SECTION: PROGETTI */

/* ------------------------------------------------------------------------------- */

/* SECTION: PHOTOGRAPHY */

#wrapperSwiper{
    background-color: rgba(192, 216, 224, 0.8);
    padding: 30px 0px;
    border-radius: 20px;
}

/* Swiper */
.swiper {
    width: 80%;
    height: 80%;
    border: 5px solid var(--richcerulean);
    border-radius: 10px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* END SECTION: PHOTOGRAPHY */

/* ------------------------------------------------------------------------------- */

/* FOOTER - CONTATTI */

#wrapperContacts{
    padding-top: 25px;
}

#copyright{
    font-size: 12px;
}

/* FOOTER - CONTATTI */

/* ------------------------------------------------------------------------------- */

/* UTILITY */
.vh-75{
    height: 75vh;
}

.sectionWrapper{
    padding: 50px 0px;
}

section {
  scroll-margin-top: 30px;
}


/* ------------------------------------------------------------------------------- */

/* MEDIA QUERIES */
@media screen and (max-width: 900px) {

    .photo-custom{
    height: 300px;
    width: 300px;
    background-size: 300px;
    }

    .swiper {
    width: 90%;
    height: 90%;
    border: 5px solid var(--richcerulean);
    border-radius: 10px;
    }

}