* {
  box-sizing: border-box;
}

body {
    background-color: #648FF3;
    color: #F3F7FE;
    }

    /* unvisited link */
a:link {
    color: #00F0A7;
  }
  
  /* visited link */
  a:visited {
    color: #C09EF6;
  }
  
  /* mouse over link */
  a:hover {
    color: #95F6D9;
  }
  
  /* selected link */
  a:active {
    color: #F2FEFB;
  }

  /* Header section */
  .header {
    background-color: #9FB9F6;
    text-align: center;
    padding: 20px;
  }

  .himage {
    width: 100%;
    height: auto;
  }

  /* Flow Container Settings */
  .row {
    display: flex;
    gap: 10px;
    flex-flow: row wrap;
  }

  /* Tell everyone to be 100% width */
  .row > * {
    padding: 10px;
    flex: 1 100%;
  }

  /* Top Navigation */
  .topnav {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    background-color: #2E6AF3;
  }

  /* Style top navigation */
  .topnav a {
    display: block;
    color: #F3F7FE;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Change hover color of Nav */
  .topnav a:hover {
    background-color: #9FB9F6;
    color: #F8F3FE;
  }

  /* Buttons for Nav */
  .button {
    position: relative;
    background-color: #2E6AF3;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 10px;
    width: 200px;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
  }
  
  .button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
  }
  
  .button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
  }

  /* Main Content */
  .mainimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
  }

  .main {
    height: 70vh;
    color: black;
    background-color: #f4faf8;
    padding: 20px;
    text-align: center;
  }

  /* Iframe styling */
  .iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 80%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }

  .iframe-content {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  /* Side column */
  .side {
    background-color: #2E6AF3;
    padding: 20px;
    text-align: center;
  }

  /* The portrait of me in the sidebar */
  .portrait {
    width: 200px;
  }

  /* Social Media Div for different colored links */
  .social-buttons a:link, a:hover, a:active, a:visited {
    color: white;
  }
  
  /* Social Media Icons */
  .fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }

  .fa:hover { 
    opacity: 0.9; 
  } 

  .fa-linkedin {
    background: #007bb5;
    color: white;
  }

  .fa-youtube {
    background: #bb0000;
    color: white;
  }

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

/* A card effect */
.polaroid {
  width: 200px;
  color: black;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin: auto;
}

.container {
  text-align: center;
  padding: 10px 20px;
}

/* Container Link Colors */
.container a:link {
  color: #C09EF6;
}

.container a:visited {
  color: #715998;
}

.container a:hover {
  color: #4159f8;
}

.container a:active {
  color: #F2FEFB;
}

/* Responsive Layout for different size screens */
/* Medium screens */
@media all and (min-width: 600px) {
/* Tell main and side content to share a row */
  .main, .side {
    flex: 1 auto;
  }

  .main {
    height: 80vh;
  }

  .topnav {
    flex-flow: row wrap;
  }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take more room than the other sidebar  */
  .topnav {
    order: 1;
    flex-flow: row wrap
  }

  .main { 
    flex: 20 0px; 
    order: 2;
    height: 100%;
  }
  
  .side {
    order: 3;
  }
}