@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');


*{
    margin:0px;
    padding:0px;
    overflow-x:hidden;
}

.menu{
    position:fixed;
    top:2vh;
    right:2vw;
    z-index:10;
}
.menu:hover{
    /* background:#FFFC; */
    user-select:none;
    border-radius: 10px;
}
.dark:hover{
    /* background:#444C; */
    user-select:none;
    border-radius: 10px;
}
.menu > h1{
    font-size: 2rem;
    text-transform: uppercase;
    font-family: 'Open Sans';
    letter-spacing: 3px;
    width:25vw;
    text-align: center;
    cursor:pointer;
    color:#504e4e;
    transition:ease-in 1000ms;
}
.menu > div{
    width:25vw;
    display:grid;
    grid-template-columns: 2fr 1fr 2fr;
    place-items:center;
}
.menu > div > p{
    font-family: 'Open Sans';
    transition:ease-in 1000ms;
    letter-spacing:3px;
    cursor:pointer;
    color:#949393;
}

.socials{
    position:absolute;
    top:20vh;
    left:0vw;
    width:5vw;
    height:60vh;
    display:grid;
    place-items: center;
    grid-template-rows: repeat(1fr, 6);
}
.socials > a > img{
    width:3vw;
    height:3vw;
    
}

.landing{
    width:100vw;
    height:120vw;
}
.landing > img{
    position:absolute;
    top:0px;
    left:0px;
    width:100vw;
    height:120vw;
    object-fit: cover;
    z-index:-1;
}
.landing > div{
    display:grid;
    position: absolute;
    top:70vw;
    left:2vw;
    grid-template-rows: 5fr 2fr 1fr;
}
.landing > div > h1{
    font-family: 'Bodoni Moda';
    font-size: 4rem;
}
.landing > div > h2{
    font-family: 'Montserrat';
    text-transform: uppercase;
    letter-spacing: 7px;
    font-size: 2rem;
    position:relative;
    top:40%;
    
}
.landing > div > h3{
    font-family: 'Montserrat';
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    left:3px;
    font-size:1rem;
}

.music{
    background-color: #504e4e;
    position:relative;
    width:100vw;
    height:100vh;
}
.music > div{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20vh 40vh 40vh;
}
.music > div > div{
    display:grid;
    height:40vh;
    align-self: center;
    grid-template-columns: 1fr;
    grid-template-rows: 25vh 15vh;
    place-items: center;
}
/* .music > div > div:nth-child(1) > img,.music > div > div:nth-child(4) > img{
    justify-self: flex-end;
}
.music > div > div:nth-child(3) > img,.music > div > div:nth-child(6) > img{
    justify-self: flex-start;
} */
.music > div > div > p{
    font-family: 'Open Sans';
    text-align: center;
    width:100%;
    color:white;
    font-size: 1.5rem;
}

.btn{
    width:7vh;
    height:7vh;
    cursor:pointer;
    
}
.aa{
    width:25vh;
    height:25vh;

}
.music > p{
    position:absolute;
    width:100%;
    top:75vh;
    text-align: center;
    font-family: 'Open Sans';
    color:white;
}

.about{
    width:100vw;
    height:100vh;
    background:#504e4e;
    display:grid;
    grid-template-columns: 35% 65%;
    grid-template-rows:100vh;
}
.about>img{
    width:35vw;
    height:100vh;
    object-fit: cover;
}
.about>div{
    width:65vw;
    height:100vh;
    position:relative;
}
.about > div > div{
    position:absolute;
    top:20vh;
    width:50vw;
    height:12vh;
    background:#c99a70;
    display:grid;
    align-items:center;
}
.about > div > div > h1{
    font-family: 'Bodoni Moda';
    text-transform: uppercase;
    color:white;
    font-size:3rem;
    margin-left:100px;
    font-weight:200;
}
.about > div > p{
    position:absolute;
    top:35vh;
    font-size:1rem;
    letter-spacing: 2px;
    width:calc(50vw - 100px);
    margin-left:100px;
    text-align: justify;
    font-family: 'Montserrat';
    color:white;
}

.latest{
    width:100vw;
    height:100vh;
    background-color: #504e4e;
    display:grid;
    grid-template-columns: 1fr;
    place-items: center;
    grid-template-rows: 25vh 75vh;
    overflow-y: hidden;
}
.latest > h1{
    font-family: 'Bodoni Moda';
    text-transform: uppercase;
    letter-spacing: 1px;
    color:white;
    font-size: 2.5rem;
    position:relative;
    width:100vw;
    height:10vh;
    text-align: center;
    align-self: flex-end;
}
.latest > h1::before{
    content:"";
    position:absolute;
    background-color: #c99a70;
    width:35vw;
    height:5vh;
    top:2.5vh;
    left:0vw;
}
.latest > div{
    display:grid;
    grid-template-columns: 40vw 60vw;
    grid-template-rows: 70vh;
    overflow-y:hidden;
}
.latest > div > a > img{
    width:25vw;
    justify-self: center;
    margin-bottom: 10vh;
    margin-left:10vw;
    height:25vw;
}
.latest > div > div{
    display:grid;
    overflow-y:hidden;
    grid-template-columns: 30vw;
    grid-template-rows: 15vh 25vh 8vh 5vh;
}
.latest > div > div > p{
    font-family: 'Montserrat';
    text-align: justify;
    letter-spacing: 2px;
    color:white;
}
.latest > div > div > h1{
    font-family: 'Bodoni Moda';
    color:white;
    text-transform: uppercase;
    font-size: 3rem;
}
.latest > div > div > h2{
    font-family: 'Montserrat';
    text-transform: uppercase;
    align-self: flex-end;
    font-size: 1.5rem;
    padding-bottom: 5px;
    letter-spacing: 5px;
    color:white;
}
.latest > div > div > h3{
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 1rem;
    color:white;
}

.other{
    width:100vw;
    height:150vh;
    background-color: #504e4e;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 140vh;
    overflow-y: hidden;
}
.other > h1{
    font-family: 'Bodoni Moda';
    text-transform: uppercase;
    letter-spacing: 1px;
    color:white;
    font-size: 2.5rem;
    position:relative;
    width:100vw;
    height:10vh;
    text-align: center;
    align-self: flex-end;
}
.other > h1::before{
    content:"";
    position:absolute;
    background-color: #c99a70;
    width:38vw;
    height:5vh;
    top:2.5vh;
    left:0vw;
}
.other > div{
    display:grid;
    margin:0px 100px;
    place-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.other > div > img{
    width:25vw;
    height:25vh;
    object-fit: cover;
}
.other > div > iframe{
    width:35vw;
    object-fit: cover;
}

.press{
    width:100vw;
    height:100vh;
    background-color: #504e4e;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 90vh;
    overflow-y: hidden;
}
.press > h1{
    font-family: 'Bodoni Moda';
    text-transform: uppercase;
    letter-spacing: 1px;
    color:white;
    font-size: 2.5rem;
    position:relative;
    width:100vw;
    height:10vh;
    text-align: center;
    align-self: flex-end;
}
.press > h1::before{
    content:"";
    position:absolute;
    background-color: #c99a70;
    width:38vw;
    height:5vh;
    top:2.5vh;
    left:0vw;
}
.press > div{
    display:grid;
    margin:0px 100px;
    place-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:90vh;

}
.press > div > div > a{
    display:grid;
    place-items: center;
    height:90vh;
    grid-template-rows: 50vh 20vh 20vh;
    /* width:calc(50vw - 100px); */
}
.press > div > div > a > img{
    width:20vw;
    height:50vh;
    object-fit: cover;
}
.press > div > div > a > h1{
    font-family: 'Montserrat';
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 2rem;
    position:relative;
    align-self:flex-start;
    top:40%;
    color:white;
}
.press > div > div > a > h2{
    font-family: 'Montserrat';
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    left:3px;
    width:25vw;
    align-self:flex-start;
    text-align:center;
    font-size:1rem;
    color:white;
}

.contact{
    width:100vw;
    height:100vh;
    background-color: #504e4e;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh;
    grid-gap: 20px;
    overflow-y: hidden;
    place-items: center;
}
.contact > p{
    color:white;
    font-size:3rem;
    font-family: 'Montserrat';
    align-self:flex-end;
}
.contact > div{
    width:55vw;
    align-self:flex-start;
    place-items:center;
    display:grid;
    grid-template-columns: repeat(5, 1fr);
}
.contact > div > a > img{
    width:5vw;
    height:5vw;
    filter:contrast(10%);
    object-fit: cover;
    transition:ease 200ms;
    cursor:pointer;
}
.contact > div > img:hover{
    filter:contrast(100%);
}
.socials > a > img{
    cursor:pointer;
    transition: ease 200ms;
}
.socials > a > img:hover{
    filter:contrast(10%);
}

a,a:visited,a:hover{
    text-decoration:none;
    color:initial;
}