@font-face {
  font-family: 'marola'; /*a name to be used later*/
  src: url('../fonts/MAROLA__.TTF'); /*URL to font*/
}

@font-face {
  font-family: 'notes'; /*a name to be used later*/
  src: url('../fonts/Cute\ Notes.ttf'); /*URL to font*/
}

@font-face {
  font-family: 'open'; /*a name to be used later*/
  src: url('../fonts/OpenDyslexic-Regular.otf'); /*URL to font*/
}


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");





body{
  background-image: url(../Images/background.jpg) ;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
  height: 100vh;
  width: auto;
  margin: 0 auto 0;
}


 .content{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
} 


.background{
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(28, 114, 150) 30%);
  border-radius: 3%;
  height:800px;
  width: 800px;
  box-shadow: 20px 20px 20px rgb(114, 114, 114, .5);
  border: 1px solid rgb(28, 114, 150);
}

.background h1{
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  border: 1px solid rgb(28, 114, 150);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  position:relative;
  top: 3%;
  left: 20%;
  width: 520px;
  text-align: center;
  font-family: notes;
}


.background aside{
  border: 1px solid rgb(28, 114, 150);
  width: 400px;
  height: 600px;
  padding: 3%;
  position:relative;
  left:44%;
  top: -77%;
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  font-family: open;
}

.background nav{
  position: relative;
  width: 260px;
  height: 400px;
  top: 33px;
  left: 6%;
  border: 1px solid rgb(28, 114, 150);
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  text-decoration: none;
  font-family: notes;
  font-size: 2em;
  
  
}



.sidenav{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  
  
  
}

nav a{
  text-decoration: none;
  color: black;
  opacity: .7;
  transition: 0.3s;
}

.sidenav a:hover{
  background-color: rgb(0, 0, 116);
  color: rgb(193, 233, 236);
  width: 100%;
  text-align: center;
  border-radius: 30px;
  font-size: 1.2em;
  opacity: 1;
}

.background img{
position: relative;
left: 7%;
top: 60px;
}

.background footer{
  position:relative;
  top: -598px;
  left: 44%;
  background-color: azure;
  width: 400px;
  height: 60px;
  padding: 1%;
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  border: 1px solid rgb(28, 114, 150);
  font-family: open;
}


.silly{
 border-radius: 250px;
}

.self{
  border-radius: 250px;
}

aside .self {
  position: absolute;
  left: 18%;
  top: 55%;

}

.asideHeader{
  display: flex;
  align-items: center;
  justify-content: center;
}

aside .asideHeader{
  position: relative;
  width: 90%;
  left: 20px;
  top: -2%;
}

aside{
  overflow:auto;
}


footer{
font-size: small;


}


footer .gmail{
 text-decoration: none;
 opacity: .9;
  transition: 0.3s;
}

footer .gmail:hover{
  background-color: rgb(0, 0, 116);
  color: rgb(193, 233, 236);
  width: 100%;
  text-align: center;
  border-radius: 30px;
  font-size: 1.1em;
  padding-left: 1%;
  padding-right: 1%;
  
  opacity: 1;
}

footer p{
margin: 0%;
}


.bi-instagram{
  position: absolute;
  left: 70%;
  bottom: 10%;
  font-size: 2.5em;
  text-align: center;
  opacity: .9;
  transition: 0.3s;
}


.bi-instagram:hover{
  color:  rgb(0, 0, 116);
  font-size: 3em;
  top:3%;
  opacity: 1;
}

.bi-github{
  position: absolute;
  left: 83%;
  bottom: 10%;
  font-size: 2.5em;
  text-align: center;
  opacity: .7;
  transition: 0.3s;
}

.bi-github:hover{
  color:  rgb(0, 0, 116);
  font-size: 3em;
  top:3%;
  opacity: 1;
}




.accordion{
  background-color: azure;
  width: 400px;
  height: 60px;
  padding: 1%;
  margin: 2%;
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  border: 1px solid rgb(28, 114, 150);
  font-family: open;
}



aside .ResumeHeader{
  position: relative;
  left: 15%;
  top: -2%;
  width: 75%;

}

.Download{ 
  position: relative;
  width: 30%;
  left: 35%;
  background-color: azure;
  padding: 1%;
  margin: 2%;
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);
  box-shadow: 10px 10px 10px rgb(28, 114, 150);
  border-radius: 20px;
  border: 1px solid rgb(28, 114, 150);
  font-family: open;
  text-align: center;
 
}

.Download a{
  color:black ;
  text-decoration: none;
}




@media (max-width: 768px){

body{
  background-image: radial-gradient(rgb(255, 255, 255) 10%, rgb(74, 184, 231) 234%, rgb(76, 173, 247) 30%);;
}

.silly {
  display: none;
}

aside{
  display: none;
}

.sidenav{
  
}

.background h1{
  display: none;
}

.background{
background-image: none;
background-color: none;

}