.header2 {
    display: none;
}

.socials2 {
    display: none;
}

.box, .box2{
    display: none;
}

.welcome2, .name2, .me2 {
    display: none;
}

body{
    background-color: #f6fff8;
    margin: 0;
    padding: 0;
}

.line1 {
    position: relative;
    z-index: 3;
    margin-top: 20%;
}

@font-face {
    font-family: myFont;
    src: url('Franchise.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Altone;
    src: url(AltoneTrial-Regular.ttf);

}


.header {
    font-family: myFont;
    font-size: 50px;
    margin: 10px 0;
    padding: 10px;
    position: relative; 
    color:#f6fff8;
    z-index: 2; 
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    margin-right: 20px;
    position: relative;
    color:#f6fff8;;
    z-index: 2;
}

nav ul {
    margin: 0;
    padding: 0;
    font-family: Altone;
    display: flex;
    align-items: center; 
}

nav li {
    list-style: none;
    margin-left: 20px; 
    position: relative;
}

nav a{
    color:#f6fff8;
    text-decoration: none;
    font-size: larger;
    transform: all 300ms ease-in-out;
}


.content {
    position: relative;
}

.cd {
    position: absolute;
    height: 270px;
    width: 270px;
    top: 85px;
    left: 210px;
    z-index: 3;
    animation: slideInTop 2s, rotate 2s linear infinite 2s;
    transform-origin: center center;
}

.stereo {
    position: relative;
    left: 75px;
    z-index: 2;
    height: 592px;
    width: 540px;
    animation: slideInLeft 2s;
    float: left;
}

.welcome{
    position: relative;
    color: #2E4756;
    font-family: Altone;
    font-size: 85px;
    margin-top: 230px;
    margin-left: 45%;
    z-index: 8;
}

.name{
    position: relative;
    color: #2E4756;
    font-family:myFont;
    font-size: 100px;
    margin-left: 50%; 
    z-index: 8;

}

.guitar {
    position: relative;
    height: 184px;
    width: 184px;
    left: 45%;
    margin-top: -8%;
}

@keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slideInTop {
    0% {
        transform: translateY(-100%); /* Start above the viewport */
    }
    100% {
        transform: translateY(0); /* End at the specified top position */
    }
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }

    }
  
  .custom-shape-divider-top-1693693950 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; 
    overflow: hidden;
    line-height: 0;
    animation: waveTop 5s infinite linear;
}

.custom-shape-divider-top-1693693950 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 379px;
}

.custom-shape-divider-top-1693693950 .shape-fill {
    fill: #3C7A89;
}

.a {
    position: absolute;
    color: #285943;
    text-wrap: nowrap;
    font-family: myFont;
    font-size: 125px;
    animation: slideInLeft 3s;
    top: 80px;
    z-index: 5;
}

.me {
    position: absolute;
    width: 252px;
    height: 336px;
    border: 10px solid #285943;
    animation: slideInLeft 3s;
    z-index: 5;
}

.intro-container {
    margin: 0 auto;
    position: relative;
    top: -385px;
}

.intro{
    display: flex;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #2E4756;
    position: relative;
    color: #f6fff8;;
    font-family: Altone;
    font-size: larger;
    text-align: center;
    z-index: 4;
    animation: slideRight;
    animation-duration: 4s;
}

.p1 {
    margin-top: 3%;
}

.p2, .p3, .p4 {
    margin-top: 10px;
}

#Demo {
    text-decoration: underline;
    color:#2E4756;
}
@keyframes slideRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  .cd-doodle{
    position: relative;
    height: 108px;
    width: 108px;
    margin-left: 85%;
    margin-bottom: 10px;
    top: 150px;
    z-index: 6;
    
}

.button {
    position: relative; 
    margin-left:85%;
    margin-top: -15%;
    z-index: 6;


}

.button button { 
    background-color: #4a6fa5;
    color: #FBFFF1;
    border: #4a6fa5;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    z-index: 6;
}

.resume {
    display: flex;
    flex-direction: column;
}

#res-image {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    width: 50%;
    border: 10px solid #2E4756;

    z-index: 7;
}

.services {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #2E4756;
    margin-top: 5%
}

.service1{
    display: flex;
    flex-direction: column;
    background-color: #cce3de;
    height: 300px;
    width: 600px;
    border-radius: 25px;
    z-index: 9;
    animation: slideInLeft 3s;
}

.AWICS-header {
    margin-top: 10%;
    text-align: center;
    font-family: myFont;
    animation: slideInLeft 3s;
}

.AWICS-des {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-family: Altone;
    animation: slideInLeft 3s;
}

.AWICS {
    justify-content: right;
    align-items: right;
    width: 250px;
    height: 140px;
    margin-left: 75%;
    margin-top: 3%;
    border: 5px solid #d994bd;
    border-radius: 25px;
    z-index: 10;
    animation: slideRight 3s;
}

.service2{
    display: flex;
    flex-direction: column;
    background-color: #cce3de;
    font-family: Altone;
    height: 300px;
    width: 600px;
    border-radius: 25px;
    margin-top: 10%;
    margin-bottom: 15%;
    z-index: 9;
    animation: slideInLeft 3s;
}

.service3 {
    display: flex;
    flex-direction: column;
    background-color: #cce3de;
    font-family: Altone;
    height: 300px;
    width: 600px;
    border-radius: 25px;
    margin-bottom: 15%;
    z-index: 9;
    animation: slideInLeft 3s;
}

.Peer-header, .food-header {
    font-size: xx-large;
    margin-top: 10%;
    text-align: center;
    font-family: myFont;
    animation: slideInLeft 3s;
}

.Peer-des, .food-des {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-family: Altone;
    animation: slideInLeft 3s;
}

.tamu-logo {
    justify-content: right;
    align-items: right;
    width: 250px;
    height: 140px;
    margin-left: 75%;
    margin-top: 5%;
    border: 5px solid #320612;
    border-radius: 25px;
    z-index: 10;
    animation: slideInRight 3s;
}

.food-bank {
    justify-content: right;
    align-items: right;
    width: 250px;
    height: 140px;
    margin-left: 75%;
    margin-top: 5%;
    border: 5px solid #285943;
    border-radius: 25px;
    z-index: 10;
    animation: slideInRight 3s;
}

.Tech {
    font-family: myFont;
    font-size: xxx-large;
    text-align: center;
    display: block;
    position: relative;
    margin-top: 2%;
    color: #4a6fa5;
}

#res-down {  
    text-align: center;
    margin-top: 2%;
    font-family: Altone;
    text-decoration: underline;
    color: #2E4756;
}


.Tskills {
    font-family: Altone;
    text-align: center;
    list-style-type: none; 
    padding: 0;
    color: #4a6fa5;
}

.AWS {
    font-family: Altone;
    text-decoration: underline;
    color: #4a6fa5;
}

.projects {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    animation: slideInTop 2s;
}

.projects a{
    text-decoration: none;
}

.project1{
    display: flex;
    flex-direction: column;
    background-color: #cce3de;
    height: 350px;
    width: 600px;
    border-radius: 25px;
    z-index: 9;
}
.Proj1-header {
    font-family: myFont;
    font-size: 50px;
    color: #2E4756;
    margin-top: 10%;
    text-align: center;

}

.Proj1-des {
    font-family: Altone;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    color: #2E4756;
    text-align: center;

}
.project2, .project3,.project4{
    display: flex;
    flex-direction: column;
    background-color: #cce3de;
    margin-top: 5%;
    height: 350px;
    width: 600px;
    border-radius: 25px;
    z-index: 9;
}

.project4 {
    margin-bottom: 10%;
}

.Proj2-header, .Proj3-header, .Proj4-header {
    font-family: myFont;
    color:#2E4756;
    font-size: 50px;
    margin-top: 10%;
    text-align: center;

}

.Proj2-des, .Proj3-des, .Proj4-des {
    font-family: Altone;
    color: #2E4756;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}


.socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 15%;
    z-index: 11;
}

.socials a {
    display: inline-block; 
    margin: 0 10px;
}

.socials img {
    width: 50px; 
    height: 50px; 
    border: 5px solid #2E4756;
    border-radius: 50%;
}

.Find {
    position: relative;
    text-align: center;
    padding-top: 5%;
    font-family: myFont;
    font-size: 70px;
    color: #4a6fa5;
}

.about1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

  .custom-shape-divider-bottom-1693690961 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 5;
}

.custom-shape-divider-bottom-1693690961 svg {
    position: relative;
    display: block;
    width: calc(163% + 1.3px);
    height: auto;
}

.custom-shape-divider-bottom-1693690961 .shape-fill {
    fill: #6b9080;
}

*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
    .intro-container {
        top: 0%;
        width: 50%;
        left: -15%;
        top: 0%;
    }
   
    .a {
        top: 100%;
        left: 65%;
    }

    .me {
        left: 70%;
        top: 135%;
    }




}