@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');

body{
        font-family: Raleway;
        overflow: hidden;
        font-size: 22px;
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: -8px;
}

.header {
    background-color: #333; /* Background color for the header */
    color: #fff; /* Text color for the header */
    padding: 20px; /* Padding around the content within the header */
    width: 100%; /* Make the header span the full width of the page */
    position: fixed; /* Fix the header at the top of the viewport */
    top: 0; /* Position the header at the top of the viewport */
    left: 0; /* Position the header flush with the left side of the viewport */
    z-index: 1000; /* Set a high z-index to ensure the header is above other content */
}
.footer {
    background-color: #333; /* Background color for the footer */
    color: #fff; /* Text color for the footer */
    padding-top: 20px;
    padding-bottom: 20px; /* Padding around the content within the footer */
    width: 100%; /* Make the footer span the full width of the page */
    position: fixed; /* Fix the footer at the bottom of the viewport */
    bottom: 0; /* Position the footer at the bottom of the viewport */
    left: 0; /* Position the footer flush with the left side of the viewport */
    z-index: 1000; /* Set a high z-index to ensure the footer is above other content */
    text-align: center;
}
.business-card {
  align-items: left;
  padding: 9px;
  transform: perspective(700px) rotateX(27deg) scale(0.7);
  width:500px;
  max-height:300px;
  box-shadow: 0px 20px 100px #555;
  transition: 0.5s ease all;
  background: linear-gradient(180deg, #f7d986 30%, #ffe59e);
  margin-top: 32vh;
  line-height: 95%;
}

.business-card:hover,  .business-card:focus {
  transform: rotate(0deg) scale(1) translateY(10px);
  transform: perspective(400px) rotateY(10deg) scale(0.7);
  
}


.resume {
  align-items: left;
  padding: 10px;
  transform: perspective(700px) rotateX(10deg) scale(0.7);
  width:900px;
  box-shadow: 0px 20px 100px #555;
  transition: 0.5s ease all;
  background: linear-gradient(180deg, #ffffff 30%, #fafafa);
  margin-top: 5vh;
  max-height:80vh;
  overflow-y: scroll;
}
.resume:hover, .resume:focus {
  transform: rotate(0deg) scale(1) translateY(1px);
  transform: perspective(900px) rotateX(0deg) scale(0.7);
  
}

.resume h2 {
    font-family: cursive ;
    text-align: center;
}

.business-card-content h2 {
    text-align: center;
    margin-bottom: 60px;
}
.business-card-content div p {
    text-align: left;
    margin-bottom: 20px;
}



.h3 {
    font-family: times ;
    text-align: center;

}



table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 0px solid #dddddd;
    text-align: left;
    padding: 8px;
    vertical-align: baseline;
}
th {
    background-color: #f2f2f2;
}




@media (max-width: 768px) {
  .business-card {
    min-width: 400px ;
  }
}


@media (min-width: 768px) {
  .business-card {
    min-width: 400px ;
    min-height: 175px;
    
  }
}