body{
  background-image: url('https://lh3.googleusercontent.com/ataN_NnbI_iD7zpLQzrNmdIogaAkRKOvWAO3IKBWRWMXpW7zWC47RJ2DEOIybcBe5Knil4oXaCLlfhTKwymKeRTYGB0Fl-sFWhA6-FXfn2ANWe9_NgB8tfcDlXdISAafZoxmxYs6=w2400'); /*Seeting the background image. Ypu can change this by changing the link!*/ 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0rem; /* see referance for how padding and margins apply */
  font-family: Verdana, sans-serif; /*You can change the font here*/
}  

.main {
    background: rgb(27, 48, 47, 0.4); /* you can find the color combination online - google css color picker. The last value is the opacity */
    margin: 1rem; /* see referance for how padding and margins apply */
    padding: 2rem; /* see referance for how padding and margins apply */
    font-size: 1rem; /* rem is unit of measurement relative to font-size of the root element */
  }

.heading { /*top navigation bar*/
    overflow: hidden;
    padding: 0rem;
    margin: 0rem;
    background-image: linear-gradient(-45deg, #252d48 10%, #303e6a 50%, #27323d 100%);  
}
  

/* for classes that we specify include a '.' before class name */
  .box1 {
    border: 2px solid blue; /* px is unit of measurement in pixels */
    border-radius: 10px;
    padding: 0rem 2rem 1rem 2rem;
    margin-bottom: 2.5rem;
    color: white; /*text color*/
    background: rgb(46, 46, 46, 0.6);/* you can find the color combination online - google css color picker. The last value (0.6) is the opacity */
  }

  .box2 { 
    border: 1px solid white;
    border-radius: 15px;
    padding: 1rem;
    margin: 0rem 0rem 1rem 0rem;
    color: white;
  }

.name {
  color: white;
  margin: 1rem 2rem;
  float: left;
}

.pId {
  color: white;
  margin: 1rem 2rem;
  float: right;
}

 h1 { 
   color: white;
   text-align: center;
   padding: 2rem ;
   margin: auto;
   width: 50%;
   font-size: 1.75vw;
}

h2 {
  color: white;
  font-size: 1.5vw;
}

p1 { 
   color: white;
} 

p2 {
  color: white;
  font-size: 10px;
}

.center {
  margin: auto;
  width: 35%;
}

.btn {
  text-align: center;
  font-size: 0.9vw;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
  background-color: rgb(255,255,255); /*you can change color by changing the HEX code*/
}

.btn:hover {
  box-shadow: 6px 8px #636363;
  cursor: pointer;
  font-weight: bold;
}


.imgmar{
  margin: 1.5%;
}