@font-face {
    font-family: "Varsity";
    src: url(/fonts/varsity-regular.ttf) format("truetype");
}

html {
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Lexend Deca","Helvetica Neue",Helvetica,Arial,sans-serif;
  padding: 100px;
  background-image: url('harvard.webp');
  background-size:cover;
  background-repeat: no-repeat;
}

.col-container {
    width: 100%;
    display: table;
  background-color:white;
  margin-top:-50px;
  padding-top:25px;
}


p {font-family:"Lexend Deca","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding-right:25px;
}

h1 {
  font-size: 50px;
  margin-bottom:0px;
  font-family: 'Old English Five', sans-serif;
  margin-top: -20px;
}

h2 {
  font-size: 70px;
  margin-top:0px;
  color:#d80e0e;
  font-family: 'Varsity', Fallback, sans-serif;
  margin-bottom:0px;
  
}


h5 {font-style:bold;
    font-size:14px;
   }



/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 33%;
  margin-top: 0px;
  background-color:#fff;
  display: table-cell;
}

/* Right column */
.rightcolumn {
  float: right;
  width: 66%;
  top-margin: 0px;
  padding: 0px;
  background-color: #fff;
  display: table-cell;
}
/* button */

button {
  padding:20px;
  font-size: 24px;
  font-family:"Lexend Deca","Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color:#d80e0e;
  text-decoration:underline;
  color: white;
  border-width:0px;
  margin-bottom:25px;
       }

/* footer */

footer {
  width:100%;
  float:right;
  margin-top: 50px;
}

/*  image */
#profilepic {
  border-radius: 100%;
  padding: 0px;
  margin-top: 25px;
  width: 250px;
}

#logo {
  width:50%;
}

#instagram {
  width:25px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}



/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #fff;
  margin-top: 20px;
  float: none;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 767px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
/* start of desktop styles */

@media screen and (max-width: 991px) {
  .leftcolumn {width:30%;}
  .rightcolumn {width:70%;}
  #nathan {width:200px}
  }

}

@media screen and (max-width: 767px) {
    body {padding:25px;}
    .col-container {padding:25px}

}

@media screen and (max-width: 479px) {
    body {padding:0px;}
    .col-container {padding:25px}
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;}
  h2 {
    font-size:40px;
    padding-top:15px;
   
     }
  h1 {
    font-size:40px;
 
  }

}

#harvardlogo {
    margin-bottom:-40px;
    margin-top:25px;
}