@import url('https://fonts.googleapis.com/css?family=Caveat|Lemonada|Modak|Righteous|Sriracha|Zhi+Mang+Xing&display=swap');

:root{
  --bgcolor: rgba(240,169,143,0.2);
}

* {
  transition-duration: 0.5s;
  line-height: 1.5
}

p, li, address{
  font-family: 'Sriracha', cursive;
  color:white;
}

#resume{
  margin: auto;
  width: 95%;
  background-image: url("assets/images/resume/bg.jpg");
  background-size: cover;
  background-attachment: fixed;
}

main{
  border: 1px solid black;
  display: grid;
  margin: 5px;
  grid-template-columns: 20% 20% 20% auto;
  grid-template-areas: 
    "vcard vcard vcard vcard"
    "vcard vcard vcard vcard"
    "education education education skill"
    "education education education skill"
    "profession profession profession interest"
    "job job job interest";
}

a{
  color: #F9BF45;
  font-family: 'Caveat', cursive;
  font-size: 16pt;
}

a:hover{
  color: #00AA90;
}

a:active{
  color: 
}

a:link {
  text-decoration: none;
}

#name{
  text-align: center;
  grid-area: Title;
}

h1 a{
  font-family: 'Sriracha', cursive;
  font-size: 72pt;
}

section h2{
  margin: 0;
  text-align: center;
  font-family: 'Righteous', cursive;
  font-size: 36pt;
  color: white;
  background: red;
}

.dates{
  font-weight: bold;
  color: #C1328E;
}

.jobtitle{
  font-weight: bold;
  color: #24936E;
}

.vcard{
  display: grid;
  grid-template-columns: 80% 20%;
  justify-content: center;
  align-content: center;
  grid-template-areas: 
    "Title Title"
    "Title Title"
    "address Image"
    "email Image"
    "cell Image";
}

.adr{
  grid-area: address;
  margin: auto;
  font-size: 20pt;
}

.email{
  grid-area: email;
  margin: auto;
  font-size: 28pt;
}

.tel{
  margin: auto;
  font-size: 18pt;
}

.picnormal{
  border-radius: 15px;
  max-width: 100%;
}

#myImage{
  float: right;
  margin: 5px;
  grid-area: Image; 
}

.vcard{
  border: 1px solid black;
  grid-area: vcard;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

.vcard:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24);
}

#profExperience{
  border: 1px solid black;
  grid-area: profession;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

#profExperience:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24)
}

#interests{
  border: 1px solid black;
  grid-area: interest;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

#interests:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24);
}

#experience{
  border: 1px solid black;
  grid-area: job;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

#experience:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24);
}

#education{
  border: 1px solid black;
  grid-area: education;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

#education:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24);
}

#skills{
  grid-area: skill;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  background-color: var(--bgcolor);
}

#skills:hover{
  box-shadow: 0 30px 30px 0 rgba(0,0,0,0.24);
}

#skills ul {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#skills ul li{
  list-style-type: none;
  margin: 10px ;
  padding:3px;
  border: 2px solid;
  border-radius: 5px;
  font-weight: bold;
}

#skills li:nth-child(1){
  border-color: orange;
  background: #F05E1C;
  color: white;
}

#skills li:nth-child(1)::after{
  content: "⭐⭐⭐⭐⭐";
}

#skills li:nth-child(2){
  border-color: #00896C;
  background: #005CAF;
  color: white;
}

#skills li:nth-child(2)::after{
  content: "⭐⭐⭐⭐";
}

#skills li:nth-child(3){
  border-color: #66327C;
  background: #986DB2;
  color: white;
}

#skills li:nth-child(3)::after{
  content: "⭐⭐";
}

#skills li:nth-child(4){
  border-color: #66327C;
  background: #986DB2;
  color: #FBE251;
}

#skills li:nth-child(4)::after{ 
  content: "⭐⭐⭐";
}

.null{
  width: 128px;
  display: block;
  margin: auto;
}

#skills li:nth-child(5){
  border-color: white;
  background: #F9BF45;
  color: black;
}

#skills li:nth-child(5)::after{
  content: "⭐⭐⭐";
}

#skills li:nth-child(6){
  border-color: white;
  background: #F9BF45;
  color: black;
}

#skills li:nth-child(6)::after{
  content: "⭐⭐";
}

#skills li:nth-child(7){
  border-color: white;
  background: #F9BF45;
  color: black;
}

#skills li:nth-child(7)::after{
  content: "⭐⭐";
}

.int{
  margin: 10px auto;
  border: 2px solid;
  border-radius: 10px;
  padding: 2px;
}

.int:nth-child(1){
  background-color: #C73E3A;
}

.int:nth-child(2){
  background-color: #C7802D;
}

.int:nth-child(3){
  background-color: #005CAF;
}

.int:nth-child(4){
  background-color: #00896C;
}