@import url("https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@300&family=Lato:wght@100&family=Open+Sans:ital,wght@1,300&family=Roboto&family=Shadows+Into+Light&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

html {
    height: 100%;

}

body {
    font-family: "Roboto";
    height: 100%;
}

header h1 {
    text-align: center;
    font-size: 65px;
    color: white;
    text-shadow: 0.1em 0.1em #333;
    padding: 10px;
}

video {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    object-fit: cover;
    /* filter:brightness(0.5); */
}

.cnt-btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cls-portfolio,
.cls-amafron,
.cls-mediafran,
.cls-coming {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 97%;
    height: 120px;
    border-radius: 5px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    transition: .3s ease all;
    margin: 10px;
}

.cls-portfolio::after,
.cls-amafron::after,
.cls-mediafran::after
{
    content: "";
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: rgba(79, 79, 79, 0.553);
    bottom: -110%;
    transition: .3s ease-in-out all;
    z-index: 1;

}

.cls-portfolio:hover::after,
.cls-amafron:hover::after,
.cls-mediafran:hover::after,
.cls-coming:hover::after {
    bottom: 0;
}

.cls-portfolio span,
.cls-amafron span,
.cls-mediafran span
{
    font-size: 35px;
    z-index: 2;
    font-weight: bold;
    color: white;
    text-shadow: 0.1em 0.1em #333;
  
}
.cls-coming{
    background-color: grey;
}

.cls-coming i{
    position:absolute;
    z-index: 9;
    font-size: 70px;
    filter: blur(1px);
}
.cls-coming span {
    font-size: 35px;
    z-index: 2;
    font-weight: bold;
    color: white;
    text-shadow: 0.1em 0.1em #333;
    filter: blur(3px);
 
}

@media (max-width:450px) {
    header h1 {
        font-size: 35px;
        padding-top: 10px;
    }

    .cls-amafron span,
    .cls-portfolio span,
    .cls-mediafran span,
    .cls-coming span {
        font-size: 25px;
    }
}
.dgr-portfolio {
    background: linear-gradient(to left, red, blue, purple, brown);
    background-size: 200% 200%;
    animation: degradado 5s ease infinite;

  }
  .dgr-amafron {
    background: linear-gradient(to right, rgba(46,143,129,1) 0%, rgba(179,102,102,1) 51%, rgba(252,176,69,1) 100%);
    background-size: 200% 200%;
    animation: degradado 5s ease infinite;
  }
  .dgr-mediafran {
    background: linear-gradient(to right, rgba(255,46,46,1) 0%, rgba(255,124,0,1) 51%, rgba(255,235,0,1) 100%);
    background-size: 200% 200%;
    animation: degradado 5s ease infinite;
  }
  
  @keyframes degradado {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }