style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500&display=swap');

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

:root {
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #000000;
  background-size: contain;
  padding: 100px;
  font-family: 'Inter', sans-serif;
}

button{
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

main {
  border-radius: 20px;
  width: 100%;
  padding: 20px;
  color: rgb(242, 218, 218);
}

.div1 {
  color: #f0db4f;
  text-align: center;
  margin-bottom: 40px;
  align-self: flex-start;
}

span {
  color: #30A25A;
  
}

.sidebar {
 
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: start;
  padding-left: 20px;
  color: white;
}





#content1 {
  flex-direction: column;
  justify-content:space-between;
  align-items: flex-start;
  background-color: #000000;
  color: #8f9094;
  border-radius: 15px;
  margin-bottom: 250px;
}

h1{
  color: white;
  font-size: 6rem;
  margin-bottom: 30px;
}

#heytext{
  color: #30A25A;
  font-size: 2rem;

}

#intro{
  font-size:  2rem; ;
  margin-bottom: 30px;

}

.intro2{
  font-size: 1.3rem;
  
}

.intro2 p{
  margin-bottom: 10px ;
}

.content::before{
  content: "";
display: block;
border-top: 1px solid white;
margin: 10px 0;
}

#content4::before{
  content: "Contact Me";
  font-size: 2rem;
  color: white;
  margin-bottom: 50px;
      width: 100%;
}

#content2::before{
  content:"Education & Skills";
  font-size: 2rem;
  width: 100%;
}

#content3::before{
  content: "My Projects";
  font-size: 2rem;
  width: 100%;
  
}

header {
  grid-column: 2/5;
  grid-row: 1/2;
  font-size: xx-large;
  margin-bottom: 50px;
}

#content4 > div {
  padding: 10px;
  background-color: rgb(4, 27, 6);
  margin: 20px;
  border-radius: 8px;
  width: 20%;
  height: 40%;
}

.content {
  display: flex;
    display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

#content2 {
  flex-direction: column;
}

.prjsdiv3{
  margin-right: 20px;
}
.content21 {
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

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


.content212 > div {
  margin-bottom: 10px;
  background-color: #30A25A;
  color: black;
  border-radius: 5px;
  padding: 10px;
}

@keyframes popAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes popAnimation {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes popUpAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes popUpAnimation {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

.edudivs {
  height: 150px;
  width: 150px;
  background-color: #30A25A;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
  color: black;
  text-align: center;
}

.hid-box {
  top: 100%;
  text-align: center;
  padding: 20px;
  position: relative;
  transition: all .3s ease-out;
  background: #5e5f60;
  height: 100%;
}

#unidiv:hover > .hid-box {
  top: -82%;
}

#degreediv:hover > .hid-box {
  top: -82.5%;
}

#unidiv > svg {
  height: 75px;
  width: 75px;
  margin: 8%;
}

#degreediv > img {
  height: 100px;
  width: 100px;
  margin: auto;
}

.skilldivs {
  text-align: center;
  background-color: rgb(184, 182, 182);
  height: 120px;
  color: #000000;
  width: 100px;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  font-size: small;

}

#btndiv {
  display: flex;
  flex-direction: row;
}

.content22 {
  display: flex;
  display: -webkit-box;
  flex-direction: row;
  margin-top: 50px;
  flex-wrap: wrap;
}

.skilldivs:nth-child(2){
    border: 2px solid #e34c26;
}
.skilldivs:nth-child(2):hover {
  background-color: #e34c26;
}

.skilldivs:nth-child(1){
    border: 3px solid #3d2d00;
}
.skilldivs:nth-child(1):hover {
  background-color: #3d2d00;
}

.skilldivs:nth-child(3){
    border: 2px solid #264de4;
}
.skilldivs:nth-child(3):hover {
  background-color: #264de4;
}

.skilldivs:nth-child(4){
    border: 2px solid #f0db4f;;
}
.skilldivs:nth-child(4):hover {
  background-color: #f0db4f;
  color: black;
}

.skilldivs:nth-child(5){
    border: 2px solid #0078d7;
}
.skilldivs:nth-child(5):hover {
  background-color: #0078d7;
  color: black;
}

.skilldivs:nth-child(6){
    border: 2px solid #7cc5d9;
}
.skilldivs:nth-child(6):hover {
  background-color: #7cc5d9;
  color: black;
}

.skilldivs:nth-child(7){
  border:2px solid  #585858;
}
.skilldivs:nth-child(7):hover{
  background-color:#585858 ;
}

.skilldivs:nth-child(8){
  border: 2px solid #4c1d95;
}
.skilldivs:nth-child(8):hover{
  background-color: #4c1d95;
}

#content3 {
  flex-direction: column;
  height: 100%;
}

.projects {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  margin-bottom: 50px;
}

.projects img{
    border-radius:5px;
}

.contactdivs{
  margin-top: 30px;
}

.contactdivs button{
  background-color: #141414;
  padding: 10px;
  border-radius: 5px;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #FBFCFD;
}

.contactdivs button:hover{
  background-color: #262727;
}

.contactdivs a{
  text-decoration: none;
  
  
}

.contactdivs svg{
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

#project1 {
  margin-bottom: 20px;
}

#content3 img {
  height: 150px;
  min-width: 270px;
  max-width: 270px;
  background-color: white;
  object-fit: contain;

}

#project1 > img {
  margin-right: 50px;
  order: 1;
}

.prjsdiv1{
  order: 2;
}

 #project4 > img {
  margin-right: 50px;
}

#project2 > img{
  order: 2;
  margin-left: 50px ;
}

.projects button {
  display: block;
  background-color: transparent;
  padding: 10px;
  color: white;
  border: 2px solid #30A25A;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-right: 10px;
}

.projects button:hover {
  color: black;
  background-color: #30A25A;
}

.projects h2 {
  color: #30A25A;
  margin-bottom: 20px;
}

.projects p{
  margin-bottom: 20px;
}

#content4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: x-large;
  color: #30A25A;
}

#content4 > button {
  padding: 10px;
  width: 200px;
  margin-top: 20px;

  font-size: large;
  border-radius: 50px;
}

#content4 img {
  height: 30px;
  width: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

#content4 a {
  text-decoration: none;
  color: black;
}

#content3 a {
  text-decoration: none;
  color: white;
}

#content3 a:hover {
  color: black;
}


@media screen and (max-width:799px) {
  .content{
    display: flex !important;
      margin-bottom: 50px;
  }
    
    .content22{
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    h1{
      margin-top: 0;
      font-size: 3rem; 
    }
    
    #heytext{
      
      font-size: 1.5rem;
    
    }
    
    #intro{
      font-size: 1.3rem; ;
    
    }
    
    .intro2{
      font-size: 1rem;
      
    }
    
    body{
        height: auto;
        padding: 20px;
    }
    
    main{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    
    .contentcontainer{
        height: auto;
        padding: 10px;
    }
    
    
    .content::before{
          content: "";
  display: block;
  border-top: 1px solid white;
  margin: 10px 0;
    }
    
    #content3::before{
        content: "My Projects";
        font-size: 2rem;
        width: 100%;
        
    }
    
    #content2{
        height: auto;
    }
    
    #content3{
        margin-top: 50px;
    }
    
    #content2::before{
        content:"Education & Skills";
        font-size: 2rem;
        width: 100%;
    }
    .content21{
        flex-direction: column;
        max-width: 100%;
    }
    
    .content211{
        margin-bottom: 40px;
        justify-content: space-between;  
    }

    .content211>div{
      margin-right: 0;
    }
    
    .content212>div{
        margin-left: auto;
        text-align: center;
        margin-right: auto;
    }
    
    .skilldivs{
        margin: 05px;
        
    }
    
    #content3{
        height: auto;
    }
    
    #content4::before{
        content: "Contact Me";
        font-size: 2rem;
        color: white;
        margin-bottom: 50px;
            width: 100%;
    }
    
    .projects{
        flex-direction: column;
        max-width: 100%;
        height: auto;
        padding: 0;
        justify-content: center;
        align-items: center;
    }
    
    #project1>img{
        order: 1;
        -webkit-order:1;
        margin: auto;
        margin-bottom: 25px;
    }
    
    .prjsdiv1{
        order: 2;
        -webkit-order:2;
    }

    .prjsdiv3{
      order: 2;
      margin-top: 20px;
    }
    
    #project1{
        margin-top: 20px;
        margin-bottom: 25px;
    }
    
    #project2{
        margin-top: 25px;
        margin-bottom: 100px;
    }
    
    #project2>img, #project4 > img{
        margin: 25px auto;
        
    }

    #project2>img{
      order: 1;
    }

    .prjsdiv2{
      order: 1;
    }
    
    .edudivs{
        max-width: 130px;
        width: auto;
        margin:0 ;
    }

    #unidiv:hover > .hid-box {
      top: -80%;
    }
    
    #degreediv:hover > .hid-box {
      top: -82.5%;
    }
}