/* Importing Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Creating changable Root-Elements */
:root {
    --headings-font: "Orbitron", sans-serif;
    --text-font: "Roboto", sans-serif;
    --body-color: whitesmoke;
    --nav-color: #1F2933;
    --hero-text-color: #505b68;
    --main-color: #2C3E50;
    --footer-color: #0D1B2A;
    --main-call-to-action: #0D1B2A;
    --second-call-to-action: #FF5722;
    --white-text-color: white;
    --black-text-color: black;
}

/* General Styling */
body {
    background-color: var(--body-color);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headings-font);
    color: var(--white-text-color);
}

p,
.nav-link {
    font-family: var(--text-font);
    color: var(--white-text-color);
}

.call-to-action {
    color: var(--main-call-to-action);
    background-color: var(--second-call-to-action);

}

.contrast-color-one {
    background-color: var(--main-color);
}

.contrast-color-two {
    background-color: var(--hero-text-color);
}

/* Specific Styling */

/* general navbar */
nav {
    background-color: var(--nav-color);
}

#logo-icon {
    color: var(--white-text-color);
    width: 60px;
    border: var(--white-text-color) solid 1px;
}

.nav-link {
    font-size: 1.3rem;
}

.nav-link:hover {
    font-size: 1.3rem;
    color: rgb(255, 142, 50);
}

#navbar-btn:hover {
    background-color: var(--body-color);
}

/* general Hamburger Navbar*/
.navbar-toggler {
    background-color: var(--white-text-color);
}

/* general Hero-Main-Section */
.hero-section {
    color: var(--white-text-color);
    padding-top: 70px;
}

/* Index Hero-section */
#hero {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}

.hero-intro-div {
    background-color: rgba(0, 0, 0, 0.4);
}

.hero-intro-text {
    font-size: 1.2rem;
}

/* Javascript Hero Section */
#demo-button-subheader {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.75);
}

/* background-video index-page*/
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    min-width: 100%;
    min-height: 30vh;
}

/* picture-Backgrounds html- and css-page */
.img-container#css-example-picture {
    background-image: url("../images/css-example.png");
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 25vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-container#html-example-picture {
    background-image: url("../images/html-example-hero-section.png");
    position: relative;
    width: 100%;
    height: 25vh;
    overflow: hidden;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}


/* Modals html- and javascript-page*/
.modal-title {
    color: var(--black-text-color);
}

/* Javascript-Page-Section */
.js-header {
    background-color: var(--main-color);
}

#js-section-one {
    background-color: var(--nav-color);
}

/* General Main-Section*/
.explanation {
    font-size: 1rem;
    letter-spacing: 2px;
}

.card {
    width: 24rem;
    border: none;
    box-shadow: none;
}

.card-text {
    color: var(--main-color);
}

.main-content-btn:hover {
    color: var(--black-text-color);
    background-color: var(--white-text-color);
}

.javascript-btn {
    background-color: rgb(255, 222, 34);
}

.css-btn {
    background-color: rgb(107, 193, 247);
}

.call-to-action:hover,
.javascript-btn:hover,
.css-btn:hover {
    border: var(--black-text-color) solid 1px;
}

#hero-Btn:hover {
    background-color: var(--white-text-color);
    color: var(--black-text-color);
}

.css-design-one {
    font-family: var(--headings-font);
    color: var(--black-text-color);
}

.css-design-two {
    font-family: var(--text-font);
    color: var(--black-text-color);
}

.accordion-button {
    color: var(--white-text-color);
}

.accordion-picture {
    width: 70vw;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* footer */
footer {
    background-color: var(--footer-color);
    color: var(--white-text-color);
    font-family: var(--text-font);
}

#form-button:hover {
    background-color: var(--white-text-color);
    color: var(--black-text-color);
}

@media only screen and (max-width: 576px) {
    #logo-icon {
        width: 40px;
    }

    .hero-section {
        padding-top: 40px;
    }

    .hero-section#hero {
        padding-top: 50px;
    }

    .accordion-picture {
        height: 30vh;
    }

}

@media only screen and (max-width: 768px) {
    .card {
        width: 32rem;
    }

    .accordion-picture {
        width: 80vw;
    }


}

@media only screen and (min-width: 1200px) {
    .card {
        width: 28rem;
    }
}