* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    .container {
      position: relative;
      text-align: center;
      color: white;
    }

    #techprojects {
      padding-top: 5%;
      margin-top: -5%;
    }
    #nonprogramtech {
      padding-top: 5%;
      margin-top: -5%;
    }
    #nontechprojects {
      padding-top: 5%;
      margin-top: -5%;
    }
    #aboutme {
      padding-top: 5%;
      margin-top: -5%;
    }
    #contactme {
      padding-top: 5%;
      margin-top: -5%;
    }

    #resourced {
      padding-top: 5%;
      margin-top: -5%;
    }
    #autothrottle {
      padding-top: 5%;
      margin-top: -5%;
    }
    #stocksimulator {
      padding-top: 5%;
      margin-top: -5%;
    }
    #passion {
      padding-top: 5%;
      margin-top: -5%;
    }
    #digitai {
      padding-top: 5%;
      margin-top: -5%;
    }
    #sarsoftrobot {
      padding-top: 5%;
      margin-top: -5%;
    }
    #sarquest {
      padding-top: 5%;
      margin-top: -5%;
    }
    #careage {
      padding-top: 5%;
      margin-top: -5%;
    }
    #inboxarmour {
      padding-top: 5%;
      margin-top: -5%;
    }
    #schoolprojects {
      padding-top: 5%;
      margin-top: -5%;
    }
    #compeng {
      padding-top: 5%;
      margin-top: -5%;
    }

    #resourced2 {
      padding-top: 5%;
      margin-top: -5%;
    }
    #zugzwang {
      padding-top: 5%;
      margin-top: -5%;
    }
    #chess {
      padding-top: 5%;
      margin-top: -5%;
    }
    #scitech {
      padding-top: 5%;
      margin-top: -5%;
    }
    #certificate {
      padding-top: 5%;
      margin-top: -5%;
    }
    #candidates {
      padding-top: 5%;
      margin-top: -5%;
    }
    #ihpyc {
      padding-top: 5%;
      margin-top: -5%;
    }
    #autobox {
      padding-top: 5%;
      margin-top: -5%;
    }
    
    .bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
    }
    
    .top-left {
      position: absolute;
      top: 8px;
      left: 16px;
    }

    .button {
      background-color: #ff825d;
      border: none;
      color: white;
      padding: 20px;
      -webkit-text-stroke: 0.5px white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 1.5vw;
      margin: 4px 2px;
      border-radius: 12px;
    }

    .button1{
      background-color: 	#a1c694;
      color: white;
    }
    .button1:hover{
      background-color: #8bb57c ;
      color: white;
    }
    
    .button2{
      background-color: #82bbde;
      color: white;
    }
    .button2:hover{
      background-color: 	#73a7c8;
      color: white;
    }

    .button3{
      background-color: #cabfee;
      color: white;
    }
    .button3:hover{
      background-color: #b8a9e6 ;
      color: white;
    }

    .button4{
      background-color: #f7c79d;
      color: white;
    }
    .button4:hover{
      background-color: #e8b181 ;
      color: white;
    }
    
    .button5{
      background-color: #FFB6BC;
      color: white;
    }
    .button5:hover{
      background-color: #FAA0A0;
      color: white;
    }
    
    .button6{
      background-color: #D8BFD8;
      color: white;
    }
    .button6:hover{
      background-color: #DDA0DD;
      color: white;
    }

    .button7 {
      background-color: #9AD1D4;  
      color: white;
      transition: background-color 0.3s ease; 
    }
    
    .button7:hover {
      background-color: #7FB9BC;  
      color: white;
    }

    :root {
      /* 
        One-stop magic hue shift
        We're using oklch(), so these might not be the hue values you are familiar with 
      See: https://oklch.com/
      */
      --hue: 310; /* change me (0-360) */
      --hue-adjust: 135; /* and me */
    
      --hue-2: calc(var(--hue) + var(--hue-adjust));
    
      --page-background: oklch(10% 0.0666 var(--hue));
    }
    
    .top-right {
      position: absolute;
      top: 8px;
      right: 16px;
    }
    
    .bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
    }
    
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .a1 {
      color: #2dba4e
    }
    
    .a1:hover
    {
      color: #2E6F40;
      text-decoration: underline;
    
    }

    .a2 {
      color: #ff7a02
    }
    
    .a2:hover
    {
      color: #cc5500;
      text-decoration: underline;
    
    }

    .a3 {
      color:  rgb(0,160,210);
    }
    
    .a3:hover
    {
      color: rgb(0,115,170);
      text-decoration: underline;
    
    }

    .a4 {
      color:  #004182;
    }
    
    .a4:hover
    {
      color: #56687a;
      text-decoration: underline;
    
    }

header
{
  text-align: center;
  font-size: 25px;
}

orange {
  color: #ff7a02;
}

#topbar {
  width: 100%;
  height: 200px;
  background-image: url('https://images.unsplash.com/photo-1593371256584-ac70d0ab43d1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHw%3D&w=1000&q=80')
}

main
{
  text-align: center;
  font-size: 20px;

}

h1
{
  font-size: 40px;
  text-align: center;
  color: white;
  box-shadow: 10px;
  text-shadow: 1px 1px #de5246
}

h2 {
  text-shadow: 2px 2px #21759b;
  font-size: 30px;
  text-align: center;
  color: white
}

h3 {
  color: white;
  font-size: 20px;
  text-align: center
}

h4 {
  text-align: center;
  color: white;
  font-size: 30px;
  text-shadow: 2px 2px #ffff00;
}

h5 {
  color: white;
  font-size: 25px
}

h6 {
  color: white;
  font-size: 20px;
  text-align: center

}

h7 {
  text-shadow: 1px 1px #de5246
}



.flex-container{
    width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex;   
    display: flex; 
}
.flex-container .column{
    padding: 5px;
    font-size: 10pt;
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    color: white
}
.flex-container .column.bg-alt{
  font-size: 17px;
  color: white

}

.column1 {
  font-size: 12px;
  color: white

}

h10.title {
  color: white;
  float: left;
  margin: 15px 0 0;
}


.tab {
  margin-left: 2.5em
}

py {
  color: #1381E1
}

yel {
  color: #ffff00
}

Wb {
  color: #21759b
}

purp {
  color: #9932CC
}

a {
  color: #ff7a02
}

a:hover
{
  color: #d3122c;
  text-decoration: underline;

}
.flex-container{
    width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */

}
.flex-container .column{
    padding: 10px;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    width: 33%;
    flex: 1; /* Standard syntax */
    font-size: 2vw

}

.flex-container .column2{
  width: 33%;
    padding: 10px;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
    color: white;
    font-size: 2vw

}