@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;700&display=swap');
* {
    margin:0 auto;
    box-sizing:border-box;
    font-family: 'Domine', serif;
}
ul {
    padding: 0;
    margin: 0;
}

img{
    max-width:90%;
    max-height:600px;
    margin: 1rem;
    border: 3px solid black;
}
.hamburger-menu{
background-color:#483d61;
color:#f8edeb;
font-size:1.2rem;
padding: 1rem;
}


.list-items{
    display:flex;
    flex-direction:row;
}

.list-items{
list-style-type:none;
}

li a:hover{
    text-decoration:none;
    color:antiquewhite;
    transition: all .4s ease-in-out;
    transform: scale(1.3);
}

.hero-img{
    background-image: url("images/plans-1867745_1280.jpg"), linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    background-blend-mode: multiply;
    background-size: cover;
    min-height: 80vh;
    color: #fff;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero-info{
    font-size:1.7rem;
    text-align:center;
    
}


.quote {
    margin: 0;
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(72,61,97,1) 35%, rgba(0,212,255,1) 100%);
    color:#f8edeb;
    text-align:center;
    padding:40px;
}

.container-normal{
    display:flex;
    justify-content:center;
}
.container-normal div {
    padding: .75rem;
    max-width: 300px;
    text-align: center;
}
.user-research{
    text-align:center;
    padding:1rem;
}
.summary{
    margin-bottom:1rem;
}

.persona{
    text-align:center;
}

hr{

    border:2px solid #483d61;
}

.journey{
    text-align:center;
    padding:1rem;
}

.paper{
    text-align:center;
}

.digital{
    text-align:center;
}

.lofi{
    text-align:center;
}

.mockups{
    text-align:center;
}
.mockups p {
    max-width: 800px;
    padding: 1rem;
}
.hifi{
    text-align:center;
}
.last-two {
    text-align: center;
    padding: .8rem;
}
.fi{
    color:#796f90;
    font-weight:700;
}
section {
    margin: 0;
}
* .cards{
    display:flex;
    padding: 0;
    margin:0; 
} 
.card-one {
    background-image: url(images/laptop-3087585_640.jpg),linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ;
    background-blend-mode: multiply;
    width: 20vw;
    height: 50vh;
    background-size: cover;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f8edeb;
    font-size:1.4rem;
}

.generic-card {
    position: relative;
}
.hiddenText {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: .5s ease;
}

.hiddenText p {
    color: #000;
}

.generic-card:hover .hiddenText {
    opacity: 1;
}

.generic-card > p {
    opacity: 1;
    transition: .5s ease;
}

.generic-card:hover > p {
    opacity: 0;
}
/* .hiddenText {
    display: none;
 }
.card-one:hover + .hiddenText{
    display: flex;
      color: #f8edeb;
      font-size: 1.5rem;
      font-weight: bold;
} */
.card-two {
    
    width: 20vw;
    height: 50vh;
    background-image: url(images/dictionary-1149723_640.jpg),linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ;
    background-blend-mode: multiply;
    background-size: cover;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f8edeb;
    font-size:1.4rem;
}

.card-three{
    width:20vw;
    height:50vh;
    background-image:url(images/startup-3267505_640.jpg),linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ;
    background-blend-mode: multiply;
    background-size:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f8edeb;
    font-size:1.4rem;
}

.card-four{
    width:20vw;
    height:50vh;
    background-image:url(images/plans-1867745_1280.jpg),linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ;
    background-blend-mode: multiply;
    background-position:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f8edeb;
    font-size:1.4rem;
}

.card-five{
    width:20vw;
    height:50vh;
    background-image:url(images/computer-2265803_640.jpg),linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ;
    background-blend-mode: multiply;
    background-position:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f8edeb;
    font-size:1.4rem;
}

a{
    text-decoration:none;
    color:#d4cfce;
}

.purple{
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(72,61,97,1) 35%, rgba(0,212,255,1) 100%);
    color:#f8edeb;
    display:flex;
    justify-content:center;
    align-items:center;
    height:50vh;
text-align: center;
}

.footer-ul{
    background-color:#483d61;
    color:#f8edeb;
    list-style-type:none;
    display:flex;
    padding:40px;
    
 
}
.footerlinks {
    transition: all .4s ease-in-out;
    text-decoration:none;
}
.footerlinks:hover{
        color:antiquewhite;
        transform: scale(1.2); 
}

table, th, td {
    border: 1px solid #f8edeb;
    border-collapse: collapse;
    padding: 1rem;
    color: #f8edeb;
  }

  th {
      border: 2px solid #f8edeb;
      background-color: rgb(2,0,36);
  }

  td, th {
      width: 16.6%;
  }
    
    td {
        background-color: rgb(2,0,36, 0.9);
    }

  table {
    width: 100%;
    max-width: 1000px;
  }

  td ol, th ol {
      padding: 1rem;
  }

  /*@media screen and (max-width:700px){
    .list-items{
        display:flex;
        flex-direction:column;
    }
  }*/

  @media (max-width:770px){
      .cards{
          display:flex;
          flex-direction:column!important;
      }
      .cards div {
          width: 100%;
      }
      .list-items{
        font-size:1rem;
    }
  }
  @media screen and (max-width:1200px){
      
      .container-normal{
          display:flex;
          flex-direction:column;
      }
      
  }

  @media (max-width: 350px){
.navbar {
    padding: .5rem;
}
  }