/* Change w3 css default values as needed */
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
    color: rgb(241, 236, 236) !important;
    background-color: rgb(34, 32, 32) !important
}


body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
}

/* title on cover page */

h1 {
    font-size: 2.5vw;
    font-weight: 700;
    background: -webkit-linear-gradient(#EBE9EA, #1C1817);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
}

h2 {
    font-weight: 700;
    color: #769c8c;
}

h3 {
    color: #769c8c;
    line-height: 1em;
}

a.text:link {
    text-decoration: none;
}

a.text:hover {
    text-decoration: none;
    font-weight: bold;
}

body,
html {
    height: 100%;
    color: rgb(204, 204, 204);
    line-height: 1.8;
    background-color: rgb(49, 48, 48);
    font-size: 1em;
}

/* Create a Parallax Effect */
.bgimg-1,
.bgimg-1-portfolio,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5 {
    background-attachment: fixed !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
}

.bgimg-1-mob, .bgimg-2-mob, .bgimg-3-mob, .bgimg-4-mob, .bgimg-5-mob {
    background-attachment: scroll !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('./image/TAOT_Cover.jpg');
    height: 100%;
}

.bgimg-1-portfolio {
    background-image: url('./image/TAOT_Cover_pur_1.jpg');
    min-height: 500px;
}

.bgimg-1-mob {
    background-image: url('./image/TAOT_Cover_Mobile.jpg');
    height: 100vh;
}

/* Second image (Portfolio) */
.bgimg-2,  .bgimg-2-mob {
    background-image: url("./image/Klarinette_web.jpg");
    min-height: 400px;
}

/* Third image (Shop/Press) */
.bgimg-3, .bgimg-3-mob {
    background-image: url("./image/Gitarre_web.jpg");
    min-height: 400px;
}

/* Forth image (Contact) */
.bgimg-4 {
    background-image: url("./image/Contact.jpg");
    min-height: 400px;
}

.bgimg-4-mob {
    background-image: url("./image/Contact_Mobile.jpg");
    min-height: 600px;
}

/* Forth image (Impressum) */
.bgimg-5, .bgimg-5-mob {
    background-image: url("./image/Impressum.jpg");
    min-height: 200px;
}

.about_background {
    background-image: linear-gradient(to right, #313030, #313030);
}

.w3-wide {
    letter-spacing: 10px;
}

.w3-hover-opacity {
    cursor: pointer;
}

/* resets the button styling */
button {
    all: unset;
    cursor: pointer;
}

@media only screen and (max-width: 800px) {
    .w3-bar {
        font-size: 0.7em;
        font-weight: bold;
    }
}

/* responsive video frames */
video {
    max-width: 100%;
    height: auto;
}

.m3-date {
    width: 70px;
    height: 90px;
    background-color: #776647;
    line-height: 1.5em;
    font-weight: 900;
    padding-top: 8px;
}

/* Dates list */
span.d {
    font-size: larger;
}

span.y {
    font-size: smaller;
}