@import url('https://fonts.googleapis.com/css2?family=Jua&family=Sour+Gummy:wght@400;700&family=Chango&family=Varela+Round&display=swap');

/*Color palette:
Blood red:#340101
Velvet Red:#940201
Scarlet Pop:#e41c07
Retro Blue:#1198cd
pale almond:#ece0d8
*/


body{
  margin:0;
  padding:0;
  background-color: #ece0d8;
  font-family: 'Varela Round', sans-serif;
  overflow-x: hidden;
}

#headerdiv{
  background-color: #1198cd;
  padding: 30px;
  margin: 30px auto 30px auto;
  width: 600px;
  max-width: 90%;
  border-radius: 20px;
  text-align: center;
  /*
  ---
  padding: 4% 1% 5% 2%;
  margin-top: 5%;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 20px;*/
  
}

#placeholdertext{
  text-align:center;
  color: white;
  font-family: 'Jua', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 10px 0;
}

ul{
  display:flex;
  justify-content:center;
  padding:0;
  margin:0;
  gap: 20px;
}

ul li{
  list-style-type: none;
  font-weight:bold;
  color: #940201;
  font-weight: bold;
  font-size: 1.4rem;
  margin-right:7px;
}

ul li a{
  color: white;
  text-decoration:none;
  font-family: 'Sour Gummy', sans-serif;

}

ul li a:hover{
  color:#c7220f;
}

ul li a:hover{
  text-decoration: underline;
}


h1, h2, h3, h4 {
  font-family: 'Sour Gummy', sans-serif;
  font-size:1.7rem;
  text-align:center;
}

/*START OF ABOUT ME SECTION!-----------------------------------------------------------*/

#aboutmesection{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
  padding-top:5%;
}

/*
#avatarpic{}
*/

#avatarpic img{
  max-height:400px;
  border-radius:50%;
}

.aboutmebubble{
  background-color:#9EC3DC;
  border-radius:35px;
  max-width:500px;
}


#aboutmeheader{
  background-color:#1198cd;
  border-radius:15px;
  max-width: 85%;
  display: flex;
  align-items:center;
  margin-left:35px;
  padding-left:1%;
  padding-right:1%;
  margin-top:5%;
}

#namecolor{
  /*color:#f19c93;*/
  color:#ffc2d1;
  text-shadow: 2px 2px #c7220f;
}




#aboutmeheader h2{
font-weight: bold;
text-align:center;
color:white;
}

#aboutmedesc p{
  color: black;
  text-align:center;
  padding:5px 20px 0px 20px;
  font-size:23px;
  font-weight:bold;
  line-height:35px;
  
}
/*END OF ABOUT ME SECTION!-----------------------------------------------------------*/

/*START OF LANGUAGES i KNOW SECTION--------------------------------------------------*/

#langsection{
  padding-top:5%;
  padding-bottom:2%;
  max-width:70%;
  margin-left:auto;
  margin-right:auto;
}

#langheader{
  background-color:#1198cd;
  border-radius:25px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:3rem;
  padding:5px;
  color:white;
}


#langbubble{
  display:flex;
  flex-wrap:wrap;
  overflow:hidden;
  justify-content: space-around;
  font-size:20px;
  gap: 60px 80px;
}

.singlelang{
  margin-right:30px;
  font-weight: bold;
}

/*
.langicon{}


.langlname{}
*/

.langtext{
  margin:0px;
  text-align:center;
}
/*END OF LANGUES i KNOW SECTION-------------------------------------------------------------------*/

/*START of Skill's I've learned section----------------------------------------------------------------*/


#skillslearnedheader{
  background-color:#1198cd;
  border-radius:25px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto; 
  padding:5px;
  color:white; 
}


.skilllist{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  max-width:90rem;
  margin: 40px auto 40px auto;
}


.skills{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  overflow:hidden;
}

/*
.skillimg{}
*/

.skillname{
  justify-content:center;
  align-items:center;
}

.skillname p{
  font-weight:bold;
}
/*END OF SKILL'S I'VE LEARNED SECTION!------------------------------------------------------------------*/

/*START OF CURRENTLY LEARNING SECTION!------------------------------------------------------------------*/


#currentlearnheader{
  background-color:#1198cd;
  border-radius:25px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto; 
  padding:5px;
  color:white; 
}

#learningbubble{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
  max-width:70%;
  margin:40px auto 50px auto;
  gap:30px;
}


/*
.currentlylearningitem{}

.learningicon{}
*/

.learningtext{
  font-weight:bold;
  text-align:center;
}
/*END OF CURRENTLY LEARNING SECTION-------------------------------------------------------------*/



/*SECTION BELOW IS FOR PROJECTS & VIDEO PLAYER POPUP!*/

#projectheader{
  background-color:#1198cd;
  border-radius:25px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto; 
  padding:1px;
  color:white;
  margin-bottom:50px;

}



#allprojects{
  display: flex;
  overflow:hidden;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap:60px 5px;
}


.projectsize{
  max-width: 50%;
}


.singleprojectbubble{
background-color:#9EC3DC;
padding: 20px;
margin:auto;
border-radius: 15px 50px;
width:450px;
max-width: 450px;
}


.projectheaders{
  background: #1198cd;
  border: 3px solid #1198cd; 
  border-radius:15px;
}

.projectheaders h3{
  text-align:center;
  color:white;
  letter-spacing:2.4px;
}




.projectskills ul{
  padding-top: 5%;
  list-style-type:none;
  overflow: hidden;
  display:flex;
  flex-wrap: wrap;
  
}

.projectskills ul li{
  font-size: 1rem;
  text-align: center;
  text-decoration:none;
  color:white;
  background-color: #1198cd;
  border: 1px solid #1198cd;
  border-radius: 8px;
  padding: 1%;
  font-size:18px;
  
}

.projectdesc{
  text-align: center;
}


.projectdesctext{
  line-height:30px;
  font-weight: bold;
  letter-spacing: 1px;
  padding-bottom: 15px;
  font-size:23px;
  
}


.projectbuttons{
  display:flex;
  justify-content: space-around;
}


.projectbuttons{
  padding-bottom: 10px;
}


.buttonone input{
  font-family: 'Varela Round', sans-serif;
  font-weight:bold;
  font-size:18px;
  background-color:#c7220f;
  border:1px solid #c7220f;
  border-radius: 12px;
  box-shadow: 0px 4px 3px #340101;
  padding:15px;
  letter-spacing: 1.2px;
  color:white;
  cursor: pointer;
  /*justify content here?*/
}



/*START OF VIDEO PLAYER SECTION!!!*/

#popup, #popuptwo, #popupthree {
  font-family: 'Varela Round', sans-serif;
  font-weight:bold;
  font-size:18px;
  background-color:#c7220f;
  border:1px solid #c7220f;
  border-radius: 12px;
  box-shadow: 0px 4px 3px #340101;
  padding:15px;
  letter-spacing: 1.2px;
  color:white;
  cursor: pointer;
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
/*.popup-content styles the video player!*/
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #000;
  cursor: pointer;
}
.closetwo {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #000;
  cursor: pointer;
}

.closethree {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #000;
  cursor: pointer;
}

.videosize{
  width: 960px;
  height: 615px;
}

/*END OF VIDEO PLAYER!-------------------------------------------------------------------------*/

#connectionsection{margin-top:8%;}


#connectheader{ 
  background-color:#1198cd;
  border-radius:25px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:3rem;
  padding:5px;
  color:white;
}

#connectarea{
  text-decoration:none;
  text-decoration-line:none;
  max-width:10%;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  margin-top:3%;
  margin-bottom:3%;
}



#connectarea a{
  text-decoration:none;
}



#connectimage{
margin-left:10px;
}




#letsconnecttext{
  text-decoration-line:none;
  text-align:center;
  font-weight:bold;
  font-size: 20px;
}













/*PHONE MEDIA SCREEN FOR PROJECTS*/
/*@media screen and (max-width:430px){
 
}
/*END OF MEDIA QUERY FOR PHONE SCREEN!*/





@media screen and (max-width:700px){
#allprojects{
  justify-content:initial;
  

}


}