body{
    background-color: rgb(2, 52, 75);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    
}

.myinfo{
    position: fixed;
    top: 40px;
    left: 100px;
    float: left;
    color: white;
}

h1{
    font-size: 70px;
    font-weight: bold;
}

h2{
    position:relative;
    top: -25px;
}

.tag{
    position: relative;
    top: -25px;
    margin: 0;
    color:rgb(162, 160, 160);
}

.imgme{
    position: relative;
    top:5px;
    height:100px;
    width:100px;
    border-radius: 50%;
    box-shadow: -5px 5px 5px black
}


.rightside{
    position: relative;
    float: right;
    min-height: 100vh;
    width: 55%;
    box-shadow: -8px 5px 5px black;
    background-color: rgb(55, 139, 139);
    color: white;
    text-align: center;
    height: auto;
    
}

.none{
    display: none;
}


label{
    color:rgb(162, 160, 160);
    
}

.section{
    list-style-type: none;
    
}

.container{
    position: relative;
left: -73px;
color: rgb(162, 160, 160);
width: 220px;
}

li{
    padding: 10px;
    
}

.radio{
    visibility: hidden;
}


.lineA{
    position: relative;
    top: -5px;
    width:25px;
    height:1px;
    background-color:rgb(162, 160, 160);
    display: inline-block;
    margin-right: 10px;
    transition: width 0.5s;
    
}

.lineB{
    position: relative;
    top: -5px;
    width:25px;
    height:1px;
    background-color:rgb(162, 160, 160);
    display: inline-block;
    margin-right: 10px;
    transition: width 0.5s;
    
}

.lineC{
    position: relative;
    top: -5px;
    width:25px;
    height:1px;
    background-color:rgb(162, 160, 160);
    display: inline-block;
    margin-right: 10px;
    transition: width 0.5s;
    
}

.lineD{
  position: relative;
  top: -5px;
  width:25px;
  height:1px;
  background-color:rgb(162, 160, 160);
  display: inline-block;
  margin-right: 10px;
  transition: width 0.5s;
  
}

#la1:hover{
    cursor:pointer;
    color: white;
    .lineA{width:50px; height: 3px; background-color:white;}; 
    
}

#la2:hover{
    cursor:pointer;
    color: white;
    .lineB{width:50px; height: 3px; background-color:white;};
    
}

#la3:hover{
    cursor:pointer;
    color: white;
    .lineC{width:50px; height: 3px; background-color:white;}; 
    
}
 
    

label:hover{
    cursor:pointer;
    color: white
}


.animation{
    animation-name: onscreen;
    animation-duration: 1.7s;
}

h3{
    position:relative;
    top: 100px;
    text-align:left;
    left:50px;
    font-size:40px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 3s;
}

.projectp{
    position:relative;
    text-align: left;
    top: 100px;
    margin-left: 50px;
    margin-right: 40px;
    font-size: 20px;;
    animation-name: fadein;
    animation-duration: 3s;
    
}

.props{
  width: 50px;
}

.aboutp{
    position:relative;
    text-align:left;
    font-size: 20px;
    margin: 50px;
    margin-right: 200px;
    top: 100px;
    animation-name: fadein;
    animation-duration: 3s;
}

.resumep{
    position:relative;
    top: 100px;
}

.social{
    position: relative;
    top:30px;
    left: -10px;
}

.socials {
    position: relative;
    top: -35px;
    width:40px;
    height:40px;
    padding: 10px;
    opacity: 0.7;
  }

.socials:hover{
    opacity: 1;
}

.resume{
    position:relative;
    width: 35%;
    height: auto;
    top: 100px;
    box-shadow: -8px 5px 5px black;
    animation-name: fadein;
    animation-duration: 4s;
}

.resumep{
    animation-name: fadein;
    animation-duration: 3s;
}

#aboutM{
    display: none;
}

#play{
    width: 300px;
    height: 150px;
    color: rgb(162, 160, 160);
    background-color: rgb(2, 52, 75);
    border-radius: 5%;
    border: 2px solid rgb(162, 160, 160);
    padding: 10px;
    position: relative;
    top: 30px;
    box-shadow: -5px 5px 5px black;
    animation-name: fadein;
    animation-duration: 3s;
}

#play2{
  width: 120px;
  height: 25px;
  color: white;
  background-color: rgb(55, 139, 139);
  border-radius: 5%;
  border: 2px solid white;
  padding: 10px;
  position: relative;
  top: 30px;
  box-shadow: -5px 5px 5px black;
  animation-name: fadein;
  animation-duration: 3s;
  display:block;
  font-weight: bold;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#play:hover{
    color: white;
    border: 3px solid white;

}


.slider {
    width: auto;
    height: 260px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 120px;
    animation-name: fadein;
    animation-duration: 4s;
  }
  
  .slider img {
    width: auto;
    height: 250px;
    position: absolute;
    box-shadow: -5px 5px 5px black;
    
  }
  
  .slider img:first-child {
    z-index: 1;
  }
  
  .slider img:nth-child(2) {
    z-index: 0;
  }
  
  .navigation-button {
    margin-top: 5px;
    text-align: center;
    position: relative;
    animation-name: fadein;
    animation-duration: 4s;
  }
  
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  
  .active,
  .dot:hover {
    background-color: #717171;
  }


  .slider2 {
    width: auto;
    height: 260px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    animation-name: fadein;
    animation-duration: 4s;
  }
  
  .slider2 img {
    width: auto;
    height: 250px;
    position: absolute;
    box-shadow: -5px 5px 5px black;
    
  }

  .dot2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  
  .active,
  .dot2:hover {
    background-color: #717171;
  }

  .slider2 img:first-child {
    z-index: 1;
  }
  
  .slider2 img:nth-child(2) {
    z-index: 0;
  }


  .slider3 {
    width: auto;
    height: 260px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 120px;
    animation-name: fadein;
    animation-duration: 4s;
  }
  
  .slider3 img {
    width: auto;
    height: 250px;
    position: absolute;
    box-shadow: -5px 5px 5px black;
    
  }
  
  .slider3 img:first-child {
    z-index: 1;
  }
  
  .slider3 img:nth-child(2) {
    z-index: 0;
  }

  .dot3 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  
  .active,
  .dot3:hover {
    background-color: #717171;
  }


  .slider4 {
    width: auto;
    height: 260px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    animation-name: fadein;
    animation-duration: 4s;
  }
  
  .slider4 img {
    width: auto;
    height: 250px;
    position: absolute;
    box-shadow: -5px 5px 5px black;
    
  }

  .dot4 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  
  .active,
  .dot4:hover {
    background-color: #717171;
  }

  .slider4 img:first-child {
    z-index: 1;
  }
  
  .slider4 img:nth-child(2) {
    z-index: 0;
  }



@keyframes onscreen {
    0% {left: 0px;}
    30% {left:1800px;}
    100% {left: 0px;}
  }

  @keyframes fadein {
    0% {opacity: 0;}
    100%{opacity: 1;}
  }
  


  @media only screen and (min-width: 1800px) {
    
    
    h1{font-size: 95px;}
  }



  @media only screen and (max-width: 1370px) {
    
    
    .rightside{width: 45%;}
  }
  
  
  @media only screen and (max-width: 1220px) {
    
    
    .rightside{width: 40%;}
  }

  
  @media only screen and (max-width: 1050px) {
    

    
    .rightside{display:none;}
    .imgme{display: inline;
    height: 250px;
  width: 250px;}
    body{min-height: 10vh;}
    .myinfo{position: relative;
    width:auto; height:auto; left:0px;
  margin: 40px;}
    
    .container{ display: none;}
    #aboutM{
        display:inline;
        float: left;
        color: white;
        text-align: left;
        font-size: 14px;
        margin: 40px;
    }
    h1{ font-size: 100px;}
    h2{font-size: 30px;}
    h4{font-size: 30px; position: relative; top: 30px; }
    .slider{margin-top: 20px;}
    .slider2 img{
      width: 100%;
      height: auto;
      margin: 10px;
      top: 50px;
    }
    .dot2{
    position: relative;
    top: 400px;  
    height: 30px;
    width: 30px;}

    .slider3{margin-top: 20px;}
    .slider4 img{
      width: 100%;
      height: auto;
      margin: 10px;
      top: 50px;
    }
    .dot4{
    position: relative;
    top: 500px;  
    height: 30px;
    width: 30px;}



    .socials{
      width:60px;
    height:60px;
    }
  }