/* Intro Section */

p, a {
    margin: 0px;
    text-decoration: none;
}

.cdp-intro {
    width: 100%;
    height: auto;

    padding: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cdp-intro-inner {
    width: 50%;
    display: inline-block;

    margin-top: 3rem;
}

.github-repo {
    display: flex;
    align-items: center;
}

.github-repo > img {
    width: 6%;
	aspect-ratio: 1/1;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

    margin-left: 3rem;
    margin-right: 1rem;
}

.cdp-intro-title {
    font-size: 3rem;
    font-family: 'Open Sans', sans-serif;
    padding: 1.2rem 0.5rem;

    margin: 0rem 2rem;
}

.cdp-intro-description {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.4rem;
    font-weight: 100;
    padding: 0.5rem;

    margin: 0rem 2rem;
}

.cdp-intro-image-container {
    width: 600px;
    height: 500px;
    margin: auto;
}

.cs-intro-image-container {
    width: 1080px;
    height: 600px;
    margin: auto;
}

.cdp-intro-image {
    width: 400px;
    height: 500px;
    margin: auto;
    margin-top: 15%;
    display: block;

    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: 1000;

    animation: infinite scaleImage 30s;
}

@keyframes scaleImage {
    0% {scale: 100%;}
    50% {scale: 130%;}
    100% {scale: 100%;}
}

/* Additional Section */

.cdp-additional {
    width: 100%;
    height: auto;

    padding: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cdp-additional-demo {
    width: 50%;
    display: inline-block;
}

.cdp-additional-demo-video {
    width: 100%;
}

.cdp-additional-demo-video > video {
    width: 100%;
    padding: 1rem 2.4rem;
}


.cdp-additional-demo-desciption {
    font-size: 1rem;
    padding: 2rem;
}

.cdp-additional-code {
    width: 50%;

    background-color: black;
}

.spacer {
    width: 100%;
    height: 100px;
}

/* Code boxes */

.cdp-additional-code-image {
    font-size: 1.1rem;
    height: 760px;
    display: block;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0.5em;
}

.pp-additional-code-image {
    font-size: 1.1rem;
    height: 400px;
    display: block;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0.5em;
}

.pp-additional-code-image-2 {
    font-size: 1.1rem;
    height: 760px;
    display: block;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0.5em;
}

.pp-additional-code-image-3 {
    font-size: 1.1rem;
    height: 760px;
    display: block;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0.5em;
}

.cs-additional-code-image {
    font-size: 1.1rem;
    height: 760px;
    display: block;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0.5em;
}