@charset "utf-8";

/*

About Me Page Main Content Stylesheet
Author: Debish Sigdel
Filename: about.css.

*/

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

main {
  min-height: 80vh;
  padding-bottom: 10vh;
  background-image: url(../images/about_back.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.grid_container {
    display: grid;
    width: 100%;
    grid-template-columns: 50vw 50vw;
    align-items: center;
    position: relative;
    overflow-y: scroll;
    ul {
        margin-left: 5%;
        padding-left: 5%;
    }
    h1, h2, h3, h4, h5 {
        text-align: center;
        padding: 1%;
        font-family: 'Gill Sans';
        letter-spacing: .17em;
    }
}

.academic, .personal {
    margin: 2%;
    height: 90%;
    position: relative;
    border-radius: 10%;
    a {
        padding: 2%;
        background-color: #b9f670b1;
        display: inline-block;
        background: radial-gradient(
        circle, 
        #baf67096,
        #eeefedac
        );
        text-align: center;
        font-size: large;
    }
    h2{
        background-color: rgba(121, 239, 133, 0.736);
        font-family: 'Gill Sans';
        letter-spacing: .17em;
    }
}

.professional {
    grid-column: 1 / -1; 
    position: relative;
    background: radial-gradient(
      circle, 
      #baf67065,
      #eeefedac
  );
    border-radius: 20%;
    padding: 2%;
    th, td {
        width: 8%;
        padding-left: 2vw;
    }
    thead th {
        padding: 1vw 1vw;
        background-color: #a2f67ea9;
    }
    tbody td:nth-child(even) {
        background-color: #9bd5f19d;
    }
    tbody td:nth-child(odd) {
        background-color: #f7cbb38b;
    }
}

@media (max-width: 1024px) {
    .grid_container {
      display: grid;
      grid-template-columns: 100%;  
    }
  
    .academic, .personal, .professional {
        margin: 5%; 
        height: auto; 
        border-radius: 5%;
        a {
            font-size: 90%;
        }
    }
  
    .skills_table, .skills_table th, .skills_table td {
        width: 15vw;
        padding: 2vw 2vw 2vh 2vh;
        text-align: left;
    }
}