@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;
 
 
}

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

.banner {width:100%}

@media only screen and (max-width: 500px) {
  .banner {
    margin-bottom:50px;
  }
}

@media only screen and (max-width: 500px) {
  .col-container {
    margin-top:-75px;
    margin-bottom: 25px;}
}
  
  @media only screen and (max-width: 500px){
  h2 {margin-bottom: 3px;}
  }
  
  



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

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

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


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;
       }


/*  image */
#profilepic {
  border-radius: 100%;
  padding: 0px;
  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;
   width:100%;
  float:right;
  margin-top: 50px;
}

/* 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;
 
  }

}