body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

/*to delete later*/
.temporary-element{
    font-size: 120%;
    padding: 4% 4% 4% 0;
    font-family: 'Courier New', Courier, monospace;
}

/*NAV BAR*/
.navbar {
    display: flex;
    justify-content: right;
    align-items: flex-end;
    gap: 10vh;
    padding-right: 5%;
    padding-top: 2.5%;

}

a {
    color: black;
    background-color: transparent;
    border: none;
    height: 10vh;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 550;
    font-size: 100%;

}

a:hover {
    cursor: pointer;
    color: #ee3d57;
}

a:active {
    cursor: pointer;
    color: #ee3d57;
}


@media only screen and (min-width: 1281px){
    a {
        font-size:xx-large;
        }       
}

.lexmark-banner {
    max-width: 100%;
    padding-bottom: 0%;
    margin-bottom: 0;
}


/* End of Lexmark banner*/

/*  beguining of RED BOX*/

.warning-box {
    display: flex;
    justify-content: center;
    margin-top: 6%;
}

.red-container {
    border-radius: 40px;
    background-color: #EE3D57;
    width: 85%;
    text-align: center;
}

.flex-warning {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 3%;
}

.warning,
.warning-icon {
    color: #FFF;
    margin: 0;
    padding: 0;
    font-size: 180%;
}

.warning-icon{
    padding-top: 2%;
}

.no-copy-statement { /*same as b2 this could be a universal parameter*/
    font-size: 150%;
    font-weight: 500;
    line-height: 140%;
    padding: 0 5% 5% 5%;
}


.normal {
    font-size: 120%;
    line-height: 140%;
    font-weight: 300;
}



/*What's PPR explanation*/
.ppr-description {
    display: flex;
    margin: 0;
    justify-content: center;
    text-align: center;
    padding: 5% 12%;   
}

/*contributions done by team members grid*/

.contribution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    padding-left: 20vh;
    padding-bottom: 5vh;
}

.team,
.contributions,
.team-roles {
    display: flex;
    flex-direction: column;
    gap: 0px;    
}

h2 {
    margin: 0;
    padding: 0 0 1% 0;
}

.team p,
.contributions p,
.team-roles p {
    margin: 0;
    padding: 1%;
}

.list {
    font-weight: 300;
    font-size: 120%;
}

.myself {
    font-style: italic;
    font-weight: 450;
    font-size: 120%;
}
 
/*Terminology section*/
h1,
.line3 {
    text-align: center;
}

.line3 {
    margin-top: 3%;
    border-top: 2px solid #ee3d57;
    width: 10%;
    margin: 0 auto;
}

.Terminology {
    display: flex;
    text-align: left;
    font-weight: 300;
    font-size: 120%;
    line-height: 140%;
    justify-content: center;
    padding: 3% 0;
}

@media only screen and (max-width: 576px){
    .contribution-grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 0 5%;
    }

    .team,
    .contributions,
    .team-roles {
        align-items: center;   
    }

    h2 {
        text-align: center;
    }

    .flex-warning {
    padding-top: 1%;
}

}


@media only screen and (max-width: 768px){
    .warning-icon {
        left: 38%;
    }
    
    .no-copy-statement {
        margin-top: 5vh;
        margin-left: 1.5vh;   
    }
 
}

@media only screen and (max-width: 996px){

    .contribution-grid {
        padding-left: 5vh;
    }
}    

@media only screen and (min-width: 1281px){

    .warning-icon {
        width: 7%;
    }

    .warning {
        font-size: xx-large;
       
    }

    .no-copy-statement {
        font-size: xx-large;

    }

    .contribution-grid {
        padding-left: 30vh;
       
    }
    
    h1 {
        font-size: 300%; 
    }
    
} 

/****Understanding users section -gray box*****/

.users-container {
    background-color: #404041;
    color: #DADADA;
    padding: 5vh 10vh 5vh 10vh;
    margin-bottom: 10vh;
    text-align: center;
    font-weight: 300;
    font-size: 120%;
    line-height: 140%;
    width: fit-content;
    box-shadow: 3px 3px 3px gray;
}

.understanding {
    display: flex;
    justify-content: center;
    padding: 2% 15%;
    font-weight: 300;
    /*Predominant font size -thin*/
    font-size: 120%;
    /*Predominant font size -thin*/
    line-height: 140%;
    /*Predominant font size -thin*/
    text-align: center;
}

.white-italic {
    font-weight: 400;
    font-style: italic;
    color: #FFF;
}

/*---persona grid----*/

.persona-grid {
    display: flex;
    column-gap: 5%;
    justify-content: center;
    margin: 0 0 7% 0;
}

.persona-box {
    border: 3px solid #DADADA;
}

.persona-pic {
    width: 100%;
}

#persona.persona-name {
    padding: 0 2% 2% 2%;
}


.persona {
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 2.5vh;
    font-weight: 300;
    font-size: 100%;
    line-height: 120%;
}

#persona {
    font-weight: 300;
    /*smaller font size -thin*/
    font-size: 100%;
    /*smaller font size -thin*/
    line-height: 120%;
    /*smaller font size -thin*/
    padding-bottom: 3vh;
    padding-right: 3%;
}

.persona-name {
    font-weight: 600;
    font-size: 100%;
    line-height: 120%;
    text-align: center;
}

/*Little side note under persona grid*/

.flex-gray-note {
    margin-top: 3%;
    display: flex;
}

.grey-tiny-box-left {
    background: #404041;
    width: 5vh;
    height: 18vh;
}

.side-note1 {
    padding-left: 10vh;
    padding-bottom: 10vh;
}

.side-note1 p {
    font-weight: 700;
    font-size: 120%;
}

#note {
    font-weight: 300;
    /*Predominant font size -thin*/
    font-size: 120%;
    /*Predominant font size -thin*/
    line-height: 140%;
    /*Predominant font size -thin*/
}

/* BUBBLES section Design space */

.bubbles {
    display: flex;
    gap: 4%;
    justify-content: center;
    padding: 6% 0;
}

.b1 {
    display: flex;
    clip-path: circle(50% at 50% 50%);
    background-color: #E25E5E;
    box-shadow: 0 0 10px #404041;
    height: 80vh;
    width: 80vh;  
    margin-top: 5%;
}

.b2 {
    display: flex;
    clip-path: circle(50% at 50% 50%);
    background-color: #E9A6A6;
    box-shadow: 0 0 10px #404041;
    height: 55vh;
    width: 55vh;
  /*el unico breakpoint que molesta las bolas es el de 996 y el de 576
  el de 776 se ve bien bolas solo column para 996? corregir. MiRAR
  BIEN QUE ESTA PASANDO CON ESE BREAKPOINT */ 
}

.b3 {
    display: flex;
    clip-path: circle(50% at 50% 50%);
    background-color: #E9A6A6;
    box-shadow: 1px 1px 10px #404041;
    height: 45vh;
    width: 45vh;
    align-self: flex-end;
   
}

.b1 p {
    color: white;
    font-size: 150%;
    font-weight: 500;
    line-height: 140%;
    text-align: center;
    padding: 20% 10% 0 10%;
}

.b2 p {
    color: black;
    font-size: 140%;
    font-weight: 500;
    line-height: 140%;
    text-align: center;
    padding: 15% 10% 0 10%;
}

.b3 p {
    color: black;
    font-size: 140%;
    font-weight: 500;
    line-height: 140%;
    text-align: center;
    padding: 18% 10% 0 10%;
}


@media only screen and (max-width: 768px){
    
    .persona-grid {
        margin: 0 0 3% 0;
    }

    .b1 p, .b2 p, .b3 p {
        font-size: 120%;
    }
        
}

@media only screen and (max-width:576px) {
    
    .persona-grid {
        flex-direction: column;
        column-gap: 0;
        row-gap: 5%;
        margin: 0;
    }

    .bubbles {
        flex-direction: column;
    }

    .b1 {
    height: 40vh;
    width: 40vh; 
    } 
    
    .b2 {
    height: 30vh;
    width: 30vh;
    margin-left: 30%;
    }
    
    .b3 {
    height: 30vh;
    width: 30vh;   
    }

    .b1 p {
        padding: 10% 10% 0 10%;
        }
    
    .b2 p {
        padding: 9% 10% 0 10%;
    }

    .b3 p {
        padding: 14% 10% 0 10%;
    }
    
}

/*targeting only the 996 breakpoint*/
@media only screen and (min-width:769px) and (max-width: 996px){

    .bubbles {
        flex-direction: column;
    }

    .b1 {
    height: 40vh;
    width: 40vh; 
    } 
    
    .b2 {
    height: 30vh;
    width: 30vh;
    margin-left: 35%;
    }
    
    .b3 {
    height: 28vh;
    width: 28vh;   
    }
    

    .b1 p {
        padding: 23% 10% 0 10%;
    }

    .b2 p {
        padding: 18% 10% 0 10%;
    }

    .b3 p {
        padding: 21% 10% 0 10%;
        }
} 

@media only screen and (min-width: 1281px){

   
    #persona, .persona {
        font-size: 120%;   
    }

    .persona-name {
        font-size: 140%;
    }

    .b1 p, .b2 p, .b3 p {
        font-size: 200%;
        font-weight: 500;
    }

    .side-note1 p {
        font-size: 160%;
    }
    
    #note {
        font-size: 120%;
        line-height: 160%;     
    }  
}

/*Involvement*/

.Involvement {
    display: flex;
    padding: 3% 9%;
    margin: 0;
    font-size: 120%;
    font-weight: 300;
    line-height: 150%;
}

/*User testing findings*/

.some {
    font-size: 120%;
    font-weight: 300;
    margin-left: 20vh;
}

.findings-flex {
    display: flex;
    gap: 5%;
    justify-content: center;
    margin: 0 10% 8% 10%;
    
}

.findings {
    border-radius: 30px;
    border: 2px solid #EE3D57;
    margin-top: 10vh;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
    width: 30%;
    position: relative;
}

.findings p {
    padding: 5vh;
    font-size: 100%;
    font-weight: 400;
    line-height: 170%;
} 

.circle {
    clip-path: circle(50% at 50% 50%);
    width: 10vh;
    height: 10vh;
    background-color: #EE3D57;
    position: absolute;
    right: -5vh;
    top: -5vh;
}

.circle h2 {
    padding-top: 2.5vh;
    text-align: center;
    color: white;
}

/*Addressing the usability issues*/

.big-flex{
    display: flex;
    gap: 2%;
    align-items: flex-start;
    padding-top: 2%;
}

.gray-tiny-box2 {
    height: 15vh;
    width: 8vh;
    background-color: #404041;
    display: inline-block;
}

.p-flex {
    display: flex;
    padding: 0 20vh 5vh 1vh;
    font-size: 120%;
    font-weight: 300;
    line-height: 140%;
}

.note2 {
    font-weight: 700;
    line-height: 0;
    padding-right: 2vh;
    font-weight: 600;
}

.space {
    padding-left: 3vh;
}

/*ARROW*/

.flex-arrow {
    display: flex;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
    font-size: 120%;
    gap: 5vh;
    padding-bottom: 3vh;
}


@media only screen and (max-width: 576px) {
    .flex-arrow img {
        width: 50%;
    }

}    
@media only screen and (max-width: 768px){

    .findings-flex {
        flex-direction: column;
    }

    .findings-flex {
        gap: 5vh;
    }

    .findings {
        width: 90%;
    }

    .findings p {
        padding: 2% 6%;
    }
}

@media only screen and (max-width: 996px) {
    
    .findings-flex {
        flex-direction: column;
        margin: 0 10% 11% 10%;
        padding-bottom: 3%;
        gap: 4%;
    }

    .findings {
        width: 90%;
    }

    .findings-flex {
        margin: 3% 5%;
    }

    .findings p {
        padding: 5%;
    }

    .p-flex {
        padding: 0 10vh 5vh 1vh;
    }

    .some {
        margin-left: 5vh;
    }
}
  
    @media only screen and (min-width:769px) and (max-width: 996px) {

    .circle {
        width: 8vh;
        height: 8vh;
        right: -3vh;
        top: -3vh;
    }

    .circle h2 {
        font-size: 160%;
    }

    .gray-tiny-box2 {
        height: 10vh;
        width: 8vh;
    }
    
}

@media only screen and (min-width: 1281px){

    .findings {
        height: 60vh;
    }

    .findings p {
        font-size: 120%;    
    }

    .circle h2 {
        font-size: xx-large;
    }

    .flex-arrow img{
        width: 25%;
    }

    .flex-arrow {
        font-size: 180%;
    }

    .gray-tiny-box2 {
        width: 5vh;
        height: 10vh;
        margin-bottom: 4%;
    }
} 

/*  issues and solutions*/

.testing1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.task1 {
    padding-left: 12vh;
    padding-right: 11vh;
    font-size: 120%;
    font-weight: 300;
    line-height: 140%;
}

.img-testing1 {
    width: 95%;
    padding-bottom: 10vh;
}

.sol1{
    padding-top: 5vh;
}

.task2 {
    display: flex;
    justify-content: center;
    padding: 5% 10%;
    font-size: 120%;
    font-weight: 300;
    line-height: 140%; 
}

/* solution ITEM LIBRARY gray box + image*/
.flex-sol{
    display: flex;
    align-items: flex-start;
    height: auto;
}

.flex-sol ul{
    background-color: #404041;
    color: #FFF;
    font-size: 120%;
    font-weight: 400;
    line-height: 140%;
    padding-bottom: 7%;
    margin: 0;
}

.spacio li:nth-child(1){
    padding-top: 17%;
}

.flex-sol li{
    padding-left: 5vh;
    padding-right: 13vh;
}

.center{
    text-align: center;
    font-size: 120%;
    font-weight: 300;
    line-height: 140%;
    margin: 0;
}



@media only screen and (max-width: 576px){
    .sol1, .flex-sol img, 
    .item-positioning img,
    .printUI-issue img
    {
        width: 80%;
    }
}

@media only screen and (max-width: 768px){

    .flex-sol ul{
    height: 100%;
    padding-bottom: 7%;
    } 
}   


@media only screen and (max-width: 996px){
    .flex-sol{
        flex-direction: column-reverse;
        align-items: center;
    }

    .spacio li:nth-child(1){
        padding-top: 7%;
    }
}    

@media only screen and (min-width: 1281px){
    .testing1 h2 {
        font-size: 180%;
    }

    .flex-sol ul{
    padding: 1% 3% 10% 7%;  
    }

    .spacio li:nth-child(1){
        padding-top: 20%;
    }

    .flex-sol img{
        width: 110%;
    }

    .li-solution {
        font-size: 120%;
        line-height: 1.4;
    }

}    

/*Item library with images - FUN FACT*/

.items-with-prictures {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5vh;
    padding-bottom: 15vh;
    font-size: 120%;
    font-weight: 400;
    font-style: italic;
    color: #6D6D6D;
}

.items-with-prictures p {
    margin: 0;
    padding: 0;
}

.item-positioning {
    position: relative;
}

.item-library-with-pics{
    display: inline-block;
    padding-top: 5vh;
}

.circle2 {
    clip-path: circle(50% at 50% 50%);
    width: 25vh;
    height: 25vh;
    background-color: #F6C085;
    position: absolute;
    right: -12.5vh;
    top: -7vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle2 h2 {
    color: #913E22;
    z-index: 2;
    font-family: 'Courier New', Courier, monospace;
    display: inline;
    font-style: normal;
    text-align: center;
    font-size: 120%;

}


/* Wait... What? printUI*/

.printUI-issue{
    display: flex;
    font-size: 120%;
    font-weight: 300;
    line-height: 150%;
    gap: 5vh;
    padding-right: 15vh;
}

.printUI-issue ul{
    padding-left: 0 15vh;
    margin: 0;
    
}
    
/* Solution for issue 3 printUI*/

.sol3{
    padding-top: 15vh;
    text-align: center;
    margin-bottom: 3vh;
}

.flex--sol2 {
    display: flex;
    height: auto;
    align-items: stretch;
}

.flex--sol2 img {
    margin: 0;
    padding: 0;
}

.flex--sol2 ul{
    background-color: #404041;
    color: #FFF;
    font-size: 120%;
    font-weight: 400;
    line-height: 140%;
    padding: 6vh 9vh 3vh 13vh;
    margin: 0;    
}

.note4 {
    text-align: center;
    padding-bottom: 5vh;
}

.note4 h4, .note4 p{
    display: inline-block;
    text-align: center;
    margin: 0;   
}


@media only screen and (max-width: 996px){
    
    .circle2 {
        width: 15vh;
        height: 15vh;
        right: -3vh;
        top: -1vh;
    }
    
    .printUI-issue{
       flex-direction: column;
       padding-right: 0;
       align-items: center;
    }

    .flex--sol2 {
        flex-direction: column;
    }

    .flex--sol2 ul{
        padding: 4vh 9vh 0vh 12vh;          
    }

    .sol3 {
        margin: 0;
        padding-bottom: 5%;
    }
}    

@media only screen and (min-width: 1281px){

    .printUI-issue img {
        width: 110%;
    }

    .sol3{
        font-size: xx-large;
    }

    .flex--sol2 img{
        width: 110%;
    }

    .flex--sol2 ul{
        padding: 8vh 15vh 0 13vh;      
    }

}

/*--------------------Credits---------------------------*/
.credits{
    display: flex;
    align-items: flex-start;
    padding: 3% 0 3% 2%;
  }
  
  .photo-credits{
      font-size: x-small;
      font-weight: 600;
  }
  
  .photographers{
      margin: 0;
      font-size: x-small;
      font-style: normal;
      font-weight: 150;
      padding: 0 0 3% 1%; 
  }

/*FOOTER NAV BAR*/

.foot_navbar {
    display: flex;
    justify-content: space-evenly;
    padding-left: 40vh;
    padding-right: 40vh;

}

/*FOOTER*/

.footer {
    height: 28vh;
    background-color: #EE3D57;
    color: #FFF;
    text-align: center;
}

.footer p {
    font-size: 120%;
    font-weight: 300;
    line-height: 150%;
}

@media only screen and (max-width: 996px){
    .footer {
        height: 20vh;
    }

    .foot_navbar {
        padding: 0 5vh;
    }

}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Styles for close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}