/* Joao Dantas 100292405 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;

}
body{
    position: relative;
    background-color: black;;
    /* background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.3)), url(../images/rpg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;  */
    
}
video {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#navBar li{
    display: inline;
}
#navBar li a{
    text-decoration: none;
    float: right;
    margin-top: 5px;
    margin-right: 30px;
    border: 2px solid white;
    padding: 10px;
    border-radius: 20px;
    color: white;
    font-size: 1.5rem;
}
header{
    margin-left: 20px;
    margin-top: 5px;
}
header h1 {
    color: white;
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 4px;
}
header span {
    color: #f8204b;
    font-weight: 700;
    font-size: 2.5rem;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: 15vh;
    grid-template-areas: 
    "header nav nav"
    "mainIndex mainIndex mainIndex"
    ;
}
.header{
    grid-area: header;
}
.nav{
    grid-area: nav;   
}
.mainIndex{
    grid-area: mainIndex;
    
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 50vh 35vh;
    grid-template-areas: 
    " . "
    " paragCenterIndex "
    ;
}
.paragCenterIndex {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.paragCenterIndex p{
    grid-area: paragCenterIndex;
    font-size: 3rem;
    color: white;
    text-align: center;
    line-height: 50px;
    font-weight: 300; 
}
.paragCenterIndex p a{
    grid-area: paragCenterIndex;
    font-size: 3rem;
    color: #ff3442;
    text-align: center;
    font-weight: 400; 
    text-decoration: none;
}







/* --------------------------About Me------------------------------------------ */
.mainAboutMe{
    grid-area: mainIndex;
    display: grid;
    grid-template-columns: 1fr 400px 400px 1fr;
    grid-template-areas: 
    ". textAboutMe photoAboutMe ."
    ;
    padding-bottom: 20px;
}
.container {
    width: 100%;
    display: flex;  
    justify-content: center;  
    align-items: center;  
}
.backLens{
    border: 3px solid white;
    color: white;
    border-radius: 45px;
    background-color:  rgba(0,0,0,0);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    margin-top: 2em;
    margin-bottom: 2em;
}
.photoAboutMe{
    grid-area: photoAboutMe;
    background-image: url(../images/mansionInside.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#photoActionInteraction{
    background-image: url(../images/themeunification.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}
#photoCoreLoop{
    background-image: url(../images/ssurprise.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#photoActionChallange{
    background-image: url(../images/gameloopGoals.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#photoActionCombat{
    background-image: url(../images/secret-1142327_640.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#photoActionEmergence{
    background-image: url(../images/puzzle-693870_640.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#photoActionFlow{
    background-image: url(../images/fantasy.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}
.textAboutMe {
    grid-area: textAboutMe;
    background-color: rgba(0,0,0, 0.4);
    color: white;
}

.textAboutMe h1 {
    font-size: 2.8em;
    font-weight: bold;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
    /* margin: 1.8em 1.8em; */
    
}

.textAboutMe p {
    font-size: 1.6em;
    font-weight: 300;
    text-indent: 10%;
    text-align: justify;
    line-height: 32px;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* --------------------------Structured Element------------------------------------------ */

.mainStructuralElements{
    grid-area: mainIndex;
    display: grid;
    padding-bottom: 30px;
    height: 100%;
    grid-template-columns: 1fr 2fr 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    ". table ."
    ;
}



.mainStructuralElements table {
    grid-area: table;
    border-collapse: collapse;
    width: 100%;
}

.mainStructuralElements table td ul {
    list-style-type: none;
}

.mainStructuralElements table td {
    border: 1px solid white;
    padding: 15px;
    text-align: center;
    line-height: 1.6em;
    letter-spacing: 2px;
    font-size: 1.4em;
    /* line-height: 1.4em; */
    color: white;
    text-align: center;
  }

  .mainStructuralElements .t01 tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.2);
      
    }
    .mainStructuralElements .t01 tr:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0);
  }
  .mainStructuralElements .t01 th {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: bold;
    font-size: 2em;
    letter-spacing: 3px;
    padding: 20px;
    
  }

  /* --------------------------Group------------------------------------------ */

.mainGroup{
    grid-area: mainIndex;
    display: grid;
    padding-bottom: 30px;
    height: 100vh;
    grid-template-columns: 1fr 2fr 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    ". table ."
    ;
}



.mainGroup table {
    grid-area: table;
    border-collapse: collapse;
    width: 100%;
}

.mainGroup table td ul {
    list-style-type: none;
}

.mainGroup table td {
    border: 1px solid white;
    padding: 15px;
    text-align: center;
    line-height: 1.6em;
    letter-spacing: 2px;
    font-size: 1.4em;
    /* line-height: 1.4em; */
    color: white;
    text-align: center;
  }

  .mainGroup .t01 tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.2);
      
    }
    .mainGroup .t01 tr:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0);
  }
  .mainGroup .t01 th {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: bold;
    font-size: 2em;
    letter-spacing: 3px;
    padding: 20px;
    
  }

/* -------------------------------Projects----------------------------------------- */
.mainProjects{
    grid-area: mainIndex;
    display: grid;
    margin-bottom: 30px;
    grid-column-gap: 1.5em;
    grid-row-gap:1.5em;
    grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    ". photoProject1 photoProject2 photoProject3 ."
    ". . photoProject4 . ."
    ". photoProject5 . photoProject6 ."
    ;
}
.photoProject1{
    grid-area:photoProject1;
    background-image: url(../images/themeunification.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
}
.photoProject2{
    grid-area:photoProject2; 
    background-image: url(../images/ssurprise.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;

    ;
}
.photoProject3{
    grid-area:photoProject3; 
    background-image: url(../images/gameloopGoals.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
}
.photoProject4{
    grid-area:photoProject4; 
    background-image: url(../images/puzzle-693870_640.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
}
.photoProject5{
    grid-area:photoProject5; 
    background-image: url(../images/fantasy.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
}
.photoProject6{
    grid-area:photoProject6; 
    background-image: url(../images/secret-1142327_640.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
}
.photoProject1:hover p{
    visibility: hidden;
}
.photoProject2:hover p{
    visibility: hidden;
}
.photoProject3:hover p{
    visibility: hidden;
}
.photoProject4:hover p{
    visibility: hidden;  
}
.photoProject5:hover p{
    visibility: hidden;  
}
.photoProject6:hover p{
    visibility: hidden;  
}
.projectDescrip {
    width: 100%;
    height: 15vh;
    margin-top: 15vh;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding-left: 1vw;
    padding-top: 1vw;
    background-color: rgba(0,0,0, 0.9);
}


@media only screen and (max-width:1024px){
    body{
        background-color: black;
        /* background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.7)), url(../images/rpg.jpg); 
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover; */
    }
    #navBar li{
        display: inline;
    }
    #navBar li a{
        text-decoration: none;
        float: right;
        margin-top: 5px;
        margin-right: 30px;
        border: 2px solid white;
        padding: 10px;
        border-radius: 20px;
        color: white;
        font-size: 1.5rem;
    }
    header{
        margin-left: 20px;
        margin-top: 5px;
    }
    header h1 {
        color: white;
        font-weight: 300;
        font-size: 2.5rem;
        letter-spacing: 4px;
        margin-left: 20vw;
    }
    header span {
        color: #f8204b;
        font-weight: 700;
        font-size: 2.5rem;
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr ;
        grid-template-rows: 10vh 15vh;
        grid-template-areas: 
        ". header ."
        ". nav ."
        "mainIndex mainIndex mainIndex"
        ;
    }
    .header{
        grid-area: header;
    }
    .nav{
        grid-area: nav;
        
    }
    .mainIndex{
        grid-area: mainIndex;
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: 80vh;
        grid-template-areas: 
        " paragCenterIndex "
        ;
    }
    .paragCenterIndex p{
        grid-area: paragCenterIndex;
        font-size: 3rem;
        color: white;
        text-align: center;
        line-height: 50px;
        font-weight: 300; 
    }
    .paragCenterIndex p a{
        grid-area: paragCenterIndex;
        font-size: 3rem;
        color: #f8204b;
        text-align: center;
        font-weight: 400; 
        text-decoration: none;
    }
} 
@media only screen and (max-width:768px){
    
    #navBar li a{
        margin-right: 1vw;
        font-size: 1.5rem;
    }
    .grid {
        grid-template-areas: 
        ". header ."
        ". nav ."
        "mainIndex mainIndex mainIndex"
        ;
    }
        /* -------------------------------Projects----------------------------------------- */
.mainProjects{
    grid-area: mainIndex;
    display: grid;
    margin-bottom: 30px;
    grid-column-gap: 1.5em;
    grid-row-gap:1.5em;
    grid-template-columns: 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    " photoProject1 "
    " photoProject3 "
    " photoProject4 "
    " photoProject5 "
    " photoProject6 "
    " photoProject2 "
    ;
}
    /* --------------------------About Me------------------------------------------ */
    .mainAboutMe{
        grid-template-rows: 40vh 30vh;
        grid-template-areas: 
        ". photoAboutMe photoAboutMe ."
        ". textAboutMe textAboutMe ."
        ;
    }
    .photoAboutMe{
        background-position: 50% 30%;
    }

    .textAboutMe p {
        font-size: 1.8rem;
        padding-top: 5vh;
    }

    /* -----------------------------Contact------------------------------- */
    
    .formContact fieldset legend{
        margin-bottom: 3vh;
    }
    .formContact button{
        margin-top: 5vh;
        margin-left: 30%;
    }
    .mainStructuralElements{
        grid-area: mainIndex;
        display: grid;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-right: 10px;
        padding-left: 10px;
        height: 100%;
        grid-template-columns: 1fr;
        /* grid-template-rows: 30vh 30vh; */
        grid-template-areas: 
        " table "
        ;
    }
}
@media only screen and (max-width:760px){
    * {
        font-size: 10px;
    }
    #navBar li{
        display: block;
        clear: both;  
    }
    #navBar li a{
        border-radius: 5px;
        width: 98%;
        margin-right: 1%;
    }
    header{
        margin-left: 0;
    }
    header h1 {
        margin-left: 0;
        text-align: center;
    }
    
    .grid {
        grid-template-columns: 1fr ;
        grid-template-rows: 10vh;
        grid-template-areas: 
        "header"
        "nav"
        "mainIndex"
        ;
    }
    .header{
        grid-area: header;
    }
    .nav{
        grid-area: nav;   
    }
    .mainIndex{
        grid-template-rows: 50vh;
    }
    .paragCenterIndex p{
        line-height: 10vh;
        margin-top: 10vh;
    }
    .paragCenterIndex p a{
        line-height: 10vh;
    }
    
    /* --------------------------About Me------------------------------------------ */
    .mainAboutMe{
        grid-area: mainIndex;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 600px 300px;
        grid-template-areas: 
        "textAboutMe"
        "photoAboutMe"
        ;
    }
    .photoAboutMe{
        grid-area: photoAboutMe;
        background-size: contain;
        display: block;
    }
    .textAboutMe {
        grid-area: textAboutMe;
        display: block;
        background-color: rgba(0,0,0, 0.6);
        color: white;
    }
    .textAboutMe p {
        font-size: 1.7rem;
        padding-top: 50px;
        text-align: justify;
    }

    /* -------------------------------Projects----------------------------------------- */
.mainProjects{
    grid-area: mainIndex;
    display: grid;
    margin-bottom: 30px;
    margin-top: 50px;
    padding: 20px;
    grid-column-gap: 1.5em;
    grid-row-gap:1.5em;
    grid-template-columns: 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    " photoProject1 "
    " photoProject3 "
    " photoProject4 "
    " photoProject5 "
    " photoProject6 "
    " photoProject2 "
    ;
}
.mainGroup{
    grid-area: mainIndex;
    display: grid;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 10px;
    padding-left: 10px;
    height: 100vh;
    grid-template-columns: 1fr;
    /* grid-template-rows: 30vh 30vh; */
    grid-template-areas: 
    " table "
    ;
}

    
    .projectDescrip {
        height: 25vh;
        margin-top: 25vh;
        font-size: 1.8rem;
        background-color: rgba(0,0,0, 0.6);
    }
    
    .mainStructuralElements{
        grid-area: mainIndex;
        display: grid;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-right: 10px;
        padding-left: 10px;
        height: 100%;
        grid-template-columns: 1fr;
        /* grid-template-rows: 30vh 30vh; */
        grid-template-areas: 
        " table "
        ;
    }
    /* -----------------------------Contact------------------------------- */
    
    .mainContacts{
        grid-area: mainIndex;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 90px 90px;
        grid-template-areas: 
        "emailField"
        "phoneField"
        "formContact"
        ;
    }

    .formContact fieldset{
        background-color: rgba(0,0,0, 0.4);
    }
    .formContact fieldset legend{
        font-size: 3rem;
        text-align: center;
        color: #f8204b;
    }
    .formContact fieldset label{
        font-size: 1.4rem;
    }
    .formContact fieldset input{
        width: 100%;
        margin-bottom: 3vh;
        padding: 0.2vh;
    }

    .formContact button{
        font-size: 2rem;
        margin-left: 40%;
        margin-right: 60%;
    }
}