/* Palette generated by Palette List - palettelist.com */
/*
Name: Manmehakpreet Singh
StudentID: 139748206
email: manmehakpreet-singh@myseneca.ca
websiteLink: https://manmehakpreet.github.io/
reflectionLink: https://youtu.be/OqLivHjj7fE
*/
html{
    scroll-behavior: smooth;
}

body{
    margin: 0px 5vw;
    width:90%;
    max-width: 1100px;
    background-color: #212121;
    font-family: 'Roboto Mono', monospace;
}

.box{
    height: 20vw;
    width: 90vw;
    display: flex;
}

#b1{
	background: #0d7377; 
     height: 50vw;
    margin: 3% 0px 0px 0px;
}

#image{
    
    display: block;
    margin:auto;
}

#image img{ /*image*/ 
    height: 20vw;
    width: 20vw;
    border-radius: 50%;
    box-shadow:0 0 12px black;
    display: block;
    margin:auto;
}

#image img:hover
{
height: 23vw;
width:23vw;
box-shadow: 3vw 3vw 5vw black;
transition: 0.7s;
}

#image h1 /*Name under the image*/
{

    color:burlywood;
    font-size: 4vw;
    text-shadow: 0 0 22px black;
    margin-left: 3.5vw;
    /* font-family: 'Laila', sans-serif; */
    font-family: 'Alegreya Sans SC', sans-serif;
    -webkit-text-stroke: 1px black;
}

#image h2 /*skills under the image*/
{

    /* color:rgb(247, 172, 129); */
    color: rgb(226, 218, 207);
    font-size: 1.75vw;
    text-shadow: 0 0 15px black;
    margin-left: 0.25vw;
    font-family: 'Laila', sans-serif;
    text-decoration: underline;
}
#image h2:hover
{
    text-decoration: underline;
    /* text-shadow:5px 5px 15vw black; */
    text-shadow: 0 1vw 0.4vw black;
    font-style: italic;
    transform: scale(1.2);
    transition: 0.6s;
}

#resume{ /*Button for resume*/
    background-color : rgb(212, 183, 68);
    font-size: 1.75vw;
    margin-left: 12vw;
    margin-right: 1vw;
    box-shadow:0 0.5vw rgb(68, 62, 62);
    border-radius: 16px;
    opacity: 0.6;
    font-family: 'Roboto Mono', monospace;
}
#resume:hover{
    opacity: 1;
    /* font-size: 2vw; */
}
#contact /*Button for contact me form*/
{
     background-color :rgb(212, 183, 68);  /*rgb(212, 160, 110) */
    font-size: 1.75vw;
    margin-right: 7vw;
    box-shadow:0 0.5vw rgb(68, 62, 62);
    border-radius: 16px;
    opacity: 0.6;
    font-family: 'Roboto Mono', monospace;
}
#contact:hover{
    opacity: 1;
}



/* About me and academic honesty ||Body part 1 ends here */
#b2{
    background-color: #ece8d9;
    height: auto;
}

#about
{
    width: 70vw;
    margin: 2vw 1vw;
    left:0;
    font-size: 1.5vw;
}

#about h1
{
    font-family: 'Laila', sans-serif;
    font-size: 2vw;
    color:brown;
}

#bold{
    font-size: 1.3vw;
    text-transform: uppercase;
    font-weight: bold;
}

#b3{
    height: auto;
}

table
{
overflow-x: auto;
border-collapse: separate;
border-spacing: 0 2vw;
}

#table-title{
    font-family: 'Alegreya Sans SC', sans-serif;
    color: brown;
    margin-left: 50%;
    font-size: 3.5vw;
    text-shadow: 0 1vw 7vw antiquewhite;
    -webkit-text-stroke: 1px antiquewhite;
}
th{
    background-color: steelblue;
    color: whitesmoke;
    font-size: 1.2vw;
    height: 10vw;
    width: 30vw;
}
td{
    vertical-align: top;
    width: 70vw;
    padding:0 0 3vw 3vw;
}
tr{
    background-color: whitesmoke;
    box-shadow: 0 2vw 5vw black;
}
#TableHeading{
    font-size: 1.2vw;
}

#field
{
    font-size: 1.3vw;
    color: rgb(0, 29, 77);
}
td #field{
    font-size: 2vw;
    font-weight: bold;
    color: rgb(71, 94, 131);
    vertical-align: top;
    text-align: left;
}
#school
{
color: grey;
text-transform: uppercase;
}
#supervisor{
    font-weight: bold;
    color:forestgreen;
}

#b4{
    height: auto;
    margin-bottom: 10vw;
}
#card-title{
    font-family: 'Alegreya Sans SC', sans-serif;
    color: brown;
    margin-left: 55%;
    font-size: 3.5vw;
    text-shadow: 0 1vw 7vw antiquewhite;
    -webkit-text-stroke: 1px antiquewhite;
}

#skill {
    height:40vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: scroll;
    background-color: #212121;
  }



.card {
   height: 90%;
   margin-top: 2.5%;
   margin-left: 10px;
   border-radius: 5px;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
     background-color: rgb(124, 64, 37);
}

.card-img {
  width: 28vw;
  height: 80%;
  border-radius: 5px;
  background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.card:hover{
    
    transform: scale(1.1);
    transition: 0.6s;
}
.card-body {
    font-family: monospace;
    color: white;
    text-shadow: 0 0 10vw black;
    margin: 10vw 0 0 0;
}
.card-body h3 {
    font-size: 2rem;
    margin: 1px;
    transform: translate(0px, -150px);
}
  
.card-body h4 {
    font-size: 1.5rem;
    margin: 10px;
    transform: translate(0px, -150px);
    color: rgb(145, 144, 144);
}


form{
    width: 85vw;
}
legend
{
font-family: 'Alegreya Sans SC', sans-serif;
color: burlywood;
text-shadow: 0 1vw 4vw black;
font-size: 3vw;
-webkit-text-stroke: 1px black;
}
fieldset{
    /* font-family: 'Brush Script MT', cursive; */
    font-family: 'Laila', sans-serif;
    color: burlywood;
    font-size: 2vw;
    width: 86.5vw;
    background-color: #0d7377;
}
textarea{
    resize: none;
    vertical-align: top;
    text-align: left;
    overflow-x: auto;
    width: 30vw;
}

label {
    display: inline-block;
    width: 18vw;
    margin-left: 8vw;
  }

input{
    font-size: 1.3vw;
}

#attachments
{
    font-family: 'Roboto Mono', monospace;
color: white;
font-size: 1.3vw;
margin-left: 27vw;
}

#rate{
    display: none;
}

#radiobuttons
{
font-size: 1.3vw;
font-family: 'Roboto Mono', monospace;
color: white;
}

#submit{
    margin:auto;
    background-color: #b59400; /* Green */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow:0 0.5vw rgb(68, 62, 62);
    border-radius: 1vw;
    opacity: 0.7;
    font-family: 'Roboto Mono', monospace;
}
#submit:hover{
    opacity:1;
}

.submitbuttons
{
margin-left:33vw;
}

.fa:hover {
    opacity: 0.7;
}
.fa {
    padding: 1vw;
    font-size: 0.7vw;
    width: 2vw;
    text-align: center;
    text-decoration: none;
    /* margin: 5px 2px; */
    margin:1vw auto 1vw 1.1vw;
    border-radius: 10%;
}
.fa-twitter {
    background: #55ACEE;
    color: white;
}
.fa-linkedin {
    background: #0077b5;
    color: white;
}
.fa-instagram {
    background: #f12357;
    color: white;
}
.fa-envelope-open-text
{
    margin-left: -2.5vw;
    background: #125688;
    color: white;
}
.fa-phone-alt{
    background: #d46c16;
    color: white;
}

#icons{
    margin-left: 45%;
    position: sticky;
    bottom: 0px;
}