/* CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/ */
/* color: https://getbootstrap.com/docs/5.0/customize/color/ */
/* 600: #59359a */
/* 700: #432874 */
/* 800: #301e51 */
/* 900: #160d27 */


/* Global */

body {
    background-color: #f9f9f9!important;
}
   
h2 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 1rem!important;
}

.inner-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-software-developer {
    background-color: #442878;
    color: white;
}

.section-favorite-repos {
    background-color: #301e51;
    color: white;
}

.section-my-github-repos {
    background-color: #F9F9F9;
}

.section-quotes {
    background-color: #442878
}

.section-tag img {
    width: 60vw;
}

@media screen and (max-width: 767px) {
    .section-tag img {
        width: 100vw;
    }
}

.section-starttag {
    margin-bottom: 50px;
    user-select: none;
}

.section-starttag>* {
    padding-left: 5rem;
    padding-right: 5rem;
}

.section-endtag {
    margin-top: 70px;
    margin-bottom: 40px;
    user-select: none;
}

.section-endtag>* {
    padding-left: 5rem;
    padding-right: 5rem;
}


.rainbow-backround {
    background-image: linear-gradient(to right, #FF00000F,#ffa5000F,#ffff000F,#0080000F,#0000ff0F,#4b00820F,#ee82ee0F);
}

.background-fading-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent 2.5%, black 15%);
    mask-image: linear-gradient(to top, transparent 2.5%, black 15%);
}

.skew-top-left-light-purple {
    width: 50%;
    height: 2.3vw;
    position: absolute;
    left: 0px;
    background: linear-gradient(to right bottom, #f9f9f9 49%, #442878 50%);
}

.skew-top-right-light-purple {
    width: 50%;
    height: 2.3vw;
    position: absolute;
    left: 50%;
    background: linear-gradient(to left bottom, #f9f9f9 49%, #442878 50%);
}

.skew-bottom-left-light-purple {
    width: 50%;
    height: 2.3vw;
    position: absolute;
    left: 0px;
    background: linear-gradient(to left top, #f9f9f9 49%, #442878 50%);
}

.skew-bottom-right-light-purple {
    width: 50%;
    height: 2.3vw;
    position: absolute;
    left: 50%;
    background: linear-gradient(to right top, #f9f9f9 49%, #442878 50%);
}




.skew-right-bottom-to-left-dark-purple {
    width: 100%;
    height: 1.3vw;
    position: absolute;
    left: 0px;
    background: linear-gradient(to left bottom, #f9f9f9 49%, #301e51 50%);
}

.skew-left-top-to-right-dark-purple {
    width: 100%;
    height: 1.3vw;
    position: absolute;
    right: 0px;
    background: linear-gradient(to right top, #f9f9f9 49%, #301e51 50%);
}

.skew-right-bottom-to-left-light-purple {
    width: 100%;
    height: 1.3vw;
    position: absolute;
    left: 0px;
    background: linear-gradient(to left bottom, #f9f9f9 49%, #442878 50%);
}

.skew-left-top-to-right-light-purple {
    width: 100%;
    height: 1.3vw;
    position: absolute;
    right: 0px;
    background: linear-gradient(to right top, #f9f9f9 49%, #442878 50%);
}

#typed-text {
    min-height: 11rem; /* enough for 2 lines, so that the are does not get bigger and smaller all the time */
}

#typed-text::before {
    content: "I'm ";  
}

/* GitHub visualization */

.github-repo {
    font-size: 1.7rem;
}

.github-repo a {
    color: white;
    text-decoration: none;
}

.github-description {
    color: white;
    min-height: 51px;
}

.github-repo a:hover {
    text-decoration: underline;
}

span.github-name-repo-separator::before {
    content: "/";
    color: #C0C0C0;
}

/* Xing / LinkedIn */

.xing-linkedin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    user-select: none;
}

.xing-linkedin-grid-item {
    grid-column: span 1;
    filter: grayscale(0.4);
}

.xing-linkedin-grid-item:hover {
    filter: grayscale(0);
}

.linkedin-area {
    background-color: #007bb6;
}

.linkedin-area img {
    width: 80%;
    height: auto;
}

.xing-area {
    background-color: #00605e;
}

.xing-area img {
    width: 80%;
    height: auto;
}

/* My GitHub repos */

.my-repos-detailed-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 10px;
}

.my-repos-detailed-grid .card {
    grid-column: span 6;
    margin: 7px;
}

@media screen and (max-width: 1000px) {
    .my-repos-detailed-grid .card {
        grid-column: span 12;
    }
}

/* Favorites repos */

.favorite-projects-grid {
    background: #301e51;
    /* 800 */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 180px 180px 180px;
    align-items: center;
    /* justify-items: center; */
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

.favorite-projects-grid-item {
    /* background-color: grey; */
    grid-column: span 6;
    /* border: 1px solid black; */
    padding: 12px;
    text-align: center;
    border: 1px solid white;
    border-radius: 6px;
    background-color: #432874;
}

.favorite-projects-grid-item:hover {
    background-color: #59359a;
    /*600*/
}

.favorite-projects-external-link {
    margin-left: 3px;
    margin-right: 3px;
}

@media screen and (max-width: 1000px) {
    .favorite-projects-grid-item {
        grid-column: span 12;
    }

    .favorite-projects-grid {
        gap: 5px;
        grid-template-rows: repeat(14, 136px);
    }

    .github-description {
        display: none;
    }
}

/* Quotes */

blockquote {
    font-family: Georgia, serif;
    font-size: 28px;
    font-style: italic;
    margin: 0.35em 2.5em;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #F7F7F7;
}

blockquote:before {
    display: block;
    content: "\201C";
    font-size: 100px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #999999;
}

blockquote cite {
    color: #BBBBBB;
    font-size: 17px;
    display: block;
    margin-top: 9px;
}

blockquote cite:before {
    content: "\2014 \2009";
}

/* Contact */
.contact-grid {
    background: #301e51;
    /* 800 */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 180px;
    align-items: center;
    /* justify-items: center; */
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

.contact-grid-item {
    /* background-color: grey; */
    grid-column: span 4;
    /* border: 1px solid black; */
    padding: 12px;
    text-align: center;
    border: 1px solid white;
    border-radius: 6px;
    background-color: #432874;
}

.contact-grid-item:hover {
    background-color: #59359a;
    /*600*/
}

@media screen and (max-width: 1000px) {
    .contact-grid-item {
        grid-column: span 12;
    }

    .contact-grid {
        gap: 5px;
        grid-template-rows: 136px 136px 136px;
    }

    .github-description {
        display: none;
    }
}

/* Bootstrap */
.accordion {
	--bs-accordion-active-color: ghostwhite!important;
	--bs-accordion-active-bg: #59359a!important;
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem #c9a5ff!important;
}