:root {
    --text-default: rgb(255, 255, 255);
    --background-navigation: rgb(58, 69, 102);
    --nav-active: black;
    --nav-hover: rgba(163, 183, 244, 0.411);
	/*--background-footer:*/
    --hero-gradient-1: rgba(5, 1, 192, 0.514);
    --hero-gradient-2:rgba(234, 228, 219, 0.5);
    --background-paragraph: rgba(32, 71, 188, 0.445);
}

#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

/*nav logo*/
.logo {
    display: flex;    
    font-size: 20px;
    overflow: hidden;
    flex-wrap: wrap;
}

/*navigation*/
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    /*font-family:*/
    background-color: var(--background-navigation);
    color: var(--text-default);
    overflow: hidden;
}

.navigation .nav-links {
    display: none;
    list-style: none;
}

.navigation .hamburger {
    font-size: 1.5em;
    color: var(--background-navigation);
}

.nav-links li {
    margin-left: 150px;
    overflow: hidden;
}

.nav-links a {
    color: var(--text-default);
    text-decoration: none;
}

.nav:hover {
    background-color: var(--nav-hover);
    transition: 0.67s;
    border-radius: 20px;
    padding: 5px;
}

.nav:active {
    background-color: var(--nav-active);
}

/*hero section*/
.hero-image {
    display: flex;
    align-items: center;    
    background-position: center;    
    justify-content: center;    
    background-size: cover;    
    background-repeat: no-repeat;    
    text-align: center;
    grid-template-columns: 1fr 1fr;
    height: 50vh;
    padding: 80px;
    background-image: linear-gradient(var(--hero-gradient-1), var(--hero-gradient-2)),
    url(assets/themarias-landscape.jpg);
}

.hero-text {
    color: var(--text-default);
    text-align: center;
    overflow: hidden;
    font-size: xx-small;
}

.h1-hero {
    font-size: 50px;
    font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
}

.h2-hero {
    font-size: 20px;
    font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
}

/*text appearance*/
h1 {
    color: var(--text-default);
    font-size: 5em;
}

h2 {
    color: var(--text-default);
    font-family: sweet-and-salty, sans-serif; font-weight: 400; font-style: normal;
    font-size: 2em;
}

p {
    color: var(--text-default);
    font-family: sofia-pro, sans-serif; font-weight: 400; font-style: normal;
    font-size: 1em;
}

.audio-titles {
    display: flex;
    background-color: var(--background-paragraph);
    border-radius: 50px;
    justify-content: center;
    padding: 10px;
}

ul {
    color: var(--text-default);
    font-family: sofia-pro, sans-serif; font-weight: 400; font-style: normal;
    font-size: 1em;
}

a {
    color: var(--text-default);
    text-decoration: none;
}
/*vinyls*/
.vinyl {
    width: 150px;
    transition: transform 0.67s linear;
}

.vinyl:hover {
    animation: spin 3s linear infinite;
}

/*vinyl animation*/
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#vinyls-audio {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    padding: 10px;
}

.custom-audio {
    display: flex;
    align-items: center;
    gap: 50px;
}

/*review section*/

.group-vinyls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.group-vinyls-second {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.photos-review {
    display: grid;
    grid-template-columns: 1fr;
}

.one {
    width: 320px;
}

.s1-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.two {
    width: 320px;
}
.s2-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.three {
    width: 320px;
}
.s3-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.four {
    width: 320px;
}
.s4-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.five {
    width: 320px;
}
.s5-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.six {
    width: 320px;
}
.s6-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.seven {
    width: 320px;
}
.s7-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.eight {
    width: 320px;
}
.s8-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

/*About section*/

.one-theatre {
    width: 320px;
}

.about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.two-members {
    width: 320px;
}

.members-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

.three-history {
    width: 320px;
}

.history-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    line-height: 2em;
}

/*index*/

#index-title {
    display: flex;
    background-color: var(--hero-gradient-2);
    border-radius: 50px;
    justify-content: center;
}

/*footer*/

.footer {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--background-navigation);
    margin-top: 50px;
}

.footer-socials .fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    color: var(--text-default);
}

.footer-socials .fa:hover {
    color: var(--hero-gradient-1);
    transition: 0.67s;
}

.footer-title {
    font-size:2em;
    color: var(--text-default);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
}

.footer-links {
    display: flex;
    text-decoration: none;
    color: var(--text-default);
    flex-direction: row;
    gap: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    list-style-type: none;    
    flex-wrap: wrap;
    font-family: sofia-pro, sans-serif; font-weight: 400; font-style: normal;
}

.footer-links a:hover {
    background-color: var(--nav-hover);
    transition: 0.67s;
    border-radius: 5px;
    padding: 5px;
}

.footer-links a:visited {
    color: var(--nav-active);
}

.footer-links a:active {
    background-color: var(--nav-active);
}


/*tablet view*/
@media (min-width: 800px) {
    /*navigation*/
    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        /*font-family:*/
        background-color: var(--background-navigation);
        color: var(--text-default);
        overflow: hidden;
    }

    .nav-links {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .nav-links li {
        margin-left: 200px;
        overflow: hidden;
    }

    .navigation .nav-links {
        display: flex;
    }

    .navigation .hamburger {
        display: none;
        list-style: none;
    }

    .nav-links a {
        color: var(--text-default);
        text-decoration: none;
    }

    .hero-image {
        display: flex;
        align-items: center;    
        background-position: center;    
        justify-content: center;    
        background-size: cover;    
        background-repeat: no-repeat;    
        text-align: center;
        grid-template-columns: 1fr 1fr;
        height: 70vh;
        padding: 80px;
        background-image: linear-gradient(var(--hero-gradient-1), var(--hero-gradient-2)),
        url(assets/themarias-landscape.jpg);
    }

    .hero-text {
        color: var(--text-default);
        text-align: center;
        overflow: hidden;
    }

    .h1-hero {
        font-size: 10em;
        font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
    }

    .h2-hero {
        font-size: 5em;
        font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
    }

    /*text appearance*/
    h1 {
        color: var(--text-default);
        font-size: 5em;
    }

    h2 {
        color: var(--text-default);
        font-family: sweet-and-salty, sans-serif; font-weight: 400; font-style: normal;
        font-size: 3em;
    }

    p {
        color: var(--text-default);
        font-family: sofia-pro, sans-serif; font-weight: 400; font-style: normal;
        font-size: 1.3em;
    }

    li {
        font-size: 1.3em;
    }

    .audio-titles {
        display: flex;
        background-color: var(--background-paragraph);
        border-radius: 50px;
        justify-content: center;
        padding: 10px;
        font-size: 2em;
    }

    #vinyls-audio {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        gap: 50px;
        align-items: start;
    }

    /*about section*/
    .about-members {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .bord {
        display: none;
    }

    .one-theatre {
        width: 480px;
    }

    .two-members {
        width: 480px;
    }

    .three-history {
        width: 480px;
    }

    /*review section*/

    .group-vinyls-second {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    .custom-audio {
        gap: 15px;
    }

    .one {
        width:480px;
    }

    .two {
        width:480px;
    }

    .three {
        width:480px;
    }

    .four {
        width:480px;
    }

    .five {
        width:480px;
    }

    .six {
        width:480px;
    }

    .seven {
        width:480px;
    }

    .eight {
        width:480px;
    }
}

/*desktop view*/
@media (min-width: 1200px) {
    /*navigation*/
    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        /*font-family:*/
        background-color: var(--background-navigation);
        color: var(--text-default);
        overflow: hidden;
    }

    .nav-links {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .nav-links li {
        margin-left: 200px;
        overflow: hidden;
    }

    .navigation .nav-links {
        display: flex;
    }

    .navigation .hamburger {
        display: none;
        list-style: none;
    }

    .nav-links a {
        color: var(--text-default);
        text-decoration: none;
    }

    .hero-image {
        display: flex;
        align-items: center;    
        background-position: center;    
        justify-content: center;    
        background-size: cover;    
        background-repeat: no-repeat;    
        text-align: center;
        grid-template-columns: 1fr 1fr;
        height: 100vh;
        padding: 80px;
        background-image: linear-gradient(var(--hero-gradient-1), var(--hero-gradient-2)),
        url(assets/themarias-landscape.jpg);
    }

    .hero-text {
        color: var(--text-default);
        text-align: center;
        overflow: hidden;
    }

    .h1-hero {
        font-size: 15em;
        font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
    }

    .h2-hero {
        font-size: 5em;
        font-family: carilliantine, sans-serif; font-weight: 400; font-style: normal;
    }

    /*text appearance*/
    h1 {
        color: var(--text-default);
        font-size: 5em;
    }

    h2 {
        color: var(--text-default);
        font-family: sweet-and-salty, sans-serif; font-weight: 400; font-style: normal;
        font-size: 3em;
    }

    p {
        color: var(--text-default);
        font-family: sofia-pro, sans-serif; font-weight: 400; font-style: normal;
        font-size: 1.5em;
    }

    li {
        font-size: 1.5em;
    }

    .audio-titles {
        display: flex;
        background-color: var(--background-paragraph);
        border-radius: 50px;
        justify-content: center;
        padding: 10px;
        font-size: 2em;
    }

    #vinyls-audio {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        gap: 50px;
        align-items: start;
    }

    /*about section*/
    .about-members {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .bord {
        display: none;
    }

    .one-theatre {
        width: 600px;
    }

    .two-members {
        width: 600px;
    }

    .three-history {
        width: 600px;
    }

    /*review section*/

    .group-vinyls-second {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 80px;
    }

    .custom-audio {
        gap: 50px;
    }

    .one {
        width:600px;
    }

    .two {
        width:600px;
    }

    .three {
        width:600px;
    }

    .four {
        width:600px;
    }

    .five {
        width:600px;
    }

    .six {
        width:600px;
    }

    .seven {
        width:600px;
    }

    .eight {
        width:600px;
    }
}