@import "./reset.css";
@import "./global.css";

/* --------------------------------------------------------------- */
/* ----------------------------MAIN------------------------------- */
/* --------------------------------------------------------------- */

main {
    overflow: auto;
}

.center {
    height: 100%;
    place-items: center;  
}

.center div {
    place-items: center;
}

/* --------------------------------------------------------------- */
/* ---------------------------VIDEO SECTION----------------------- */
/* --------------------------------------------------------------- */
 
 .video-container {
    position: relative;
    width: 100%;
    height: calc(85vh - 60px);
    overflow: hidden;
}

#myVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    mix-blend-mode:multiply;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); 
}

.content-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 50px;
    line-height: 1.2;
    align-items: center;
}

.content-video h1 {
    font-size: 42px;
    font-weight: 600;
    color: var(--app-white);
    letter-spacing: 0.4px;
    line-height: 1.2; 
    margin-bottom: 13px;   
}

/* Title Text - 1200px and down */
@media (max-width: 1200px) {
    .content-video h1 { 
        font-size: 42px;
        line-height: 1.2;
    }
}

/* Title Text - 992px and down */
@media (max-width: 992px) {
    .content-video h1 { font-size: 28px;
        line-height: 1.2;
     }
}

/* Title Text 768px and down (tablets) */
@media (max-width: 768px) {
    .content-video h1 { 
        font-size: 20px;
        line-height: 1.2;
     }
}
    
/* Title Text 480px and down  */
@media (max-width: 480px) {
    .content-video h1 { 
        font-size: 16px;
        line-height: 1.2;
     }
}

/* --------------------------------------------------------------- */
/* ---------------------------ABOUT SECTION----------------------- */
/* --------------------------------------------------------------- */

.one-about { 
    background-color: none;
}

.two-about { 
    background-image: url('../img/pexels-rfstudio-3817675.jpg'); 
    background-size: cover; 
    background-position: center;
    height: 300px;
    margin: 0;
}

.row-about {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.column-about {
    flex: 1 0 auto;
    width: 300px;
    box-shadow: 1px 1px 2px rgb (0 0 0 / 0.1);
    border-radius: 5px;
}

@media screen and (max-width: 1000px) {
    .column-about {
        width: 100%;    
    }
}

/* --------------------------------------------------------------- */
/* ---------------------------FEATURED SECTION-------------------- */
/* --------------------------------------------------------------- */

.row-featured-arts {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.column-featured-arts {
    flex: 0 1 auto;
    width: calc(25% - 15px);
    padding-bottom: calc(25% - 15px); 
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;    
}

.one-featured-arts { 
    background-color: var(--app-gray-background-bg);
    background-image: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, 0.5) 95%), url('../img/featured-img1.jpg'); 
    background-size: cover;
}

.two-featured-arts { 
    background-color: var(--app-gray-background-bg);
    background-image: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, 0.5) 95%), url('../img/featured-img2.jpg'); 
    background-size: cover; 
}

.three-featured-arts { 
    background-color: var(--app-gray-background-bg);
    background-image: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, 0.5) 95%), url('../img/featured-img3.jpg'); 
    background-size: cover;
}

.four-featured-arts { 
    background-color: var(--app-gray-background-bg);
    background-image: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, 0.5) 95%), url('../img/featured-img4.jpg'); 
    background-size: cover;
}

.one-featured-arts::after {
    content: url('../img/user.png') " John Smith"; 
    position: absolute;
    bottom: 10px; 
    left: 10px; 
    color: var(--app-white);
    font-weight: 400; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.two-featured-arts::after {
    content:url('../img/user.png') " Ana Silva";
    position: absolute;
    bottom: 10px; 
    left: 10px; 
    color: var(--app-white);
    font-weight: 400; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.three-featured-arts::after {
    content:url('../img/user.png') " Priya Patel";
    position: absolute;
    bottom: 10px; 
    left: 10px; 
    color: var(--app-white);
    font-weight: 400; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.four-featured-arts::after {
    content:url('../img/user.png') " Sarah Brown";
    position: absolute;
    bottom: 10px; 
    left: 10px; 
    color: var(--app-white);
    font-weight: 400; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

@media screen and (max-width: 960px) {
    .column-featured-arts {
        width: calc(50% - 10px);
        padding-bottom: calc(50% - 10px);
    }
}

.transparent-button {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent; 
    border: none; 
    cursor: pointer;
    outline: none; 
}

.transparent-button:hover {
   background-color: var(--app-dark-overlay);
   mix-blend-mode:normal;
   transition: background-color 0.3s ease-in-out;
   color: var(--app-white);
   font-weight: 400; 
}

.transparent-button:hover::before {
  content: url(../img/zoom-64.png);
  font-size: 100px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  margin-right: 8px; 
  transition: opacity 1s ease-in-out; 
}

@media screen and (max-width: 768px) {
    .column-featured-arts {
        width: 100%;
        padding-bottom: 100%; 
    }
}

@media screen and (max-width: 480px) {
    .one-featured-arts, .two-featured-arts, .three-featured-arts, .four-featured-arts {
        width: 100%;
        padding-bottom: 100%; 
    }
}

/* --------------------------------------------------------------- */
/* ----------------------GENERIC TEXT SECTION-------------------- */
/* --------------------------------------------------------------- */

.generic-text-section {
    text-align: center;
}