@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@400;700&display=swap');

body {
  font-family:blinker;
  margin:0;
}

.header {
  width:100%;
  height:50em;
  padding-top:0;
}

.nav-name {
  font-size:2em;
  padding-left:.25em;
  margin-top:3px;
}

.navbar {
  display: none;
}

.head-left {
  width:60%;
  float:left;
  background-color: #F6F6F6;
  height:100%;
}

.head-right {
  width:40%;
  float:right;
  background-color:#3D7298;
  height:100%;
}

.left-head-content {
  width:80%;
  margin-left:14em;
  padding-top:2em;
}

.name-top {
  font-size:1.2em;
}

.salut {
  margin-top:13em;
  padding-right:7em;
}

.hello-txt {
  font-size:4em;
  line-height: 1em;
}

.who-i-am {
  margin:0;
  font-size:1.5em;
  line-height: 1.9em;
}

.moi-description {
  text-align:justify;
}

.buttons {
  margin-top:2.5em;
}

.button-resume {
  border-radius:50%;
  height:12em;
  width:12em;
  background-color:#3D7298;
  border-style: none;
  color:white;
  cursor:pointer;
}

.button-text {
  font-size:1.6em;
}

.online-resume {
  margin-left:3em;
  background-color:#C0AF13;
}

.button-resume:hover {
  background-color:#33668B;
}

.online-resume:hover {
  background-color:#A99A12;
}

.foot {
  margin-left:14em;
  margin-right:14em;
  border-width:1px;
  border-color:grey;
  border-style:solid;
  border-bottom:none;
  border-right:none;
  border-left:none;
  padding-top:2em;
  height:11em;
}

.tel-div {
  width:35%;
  float:left;
}

.email-div {
  width:30%;
  float:left;
}

.linkedin-div {
  width:35%;
  float:right;
}

.smaller-div-tel {
  text-align: center;
}

.smaller-div-email {
  text-align:center;
}

.smaller-div-linkedin {
  text-align:center;
}

.telephone {
  font-size:.9em;
}

.email {
  font-size:.9em;
}

.created-by {
  font-size:.9em;
  text-align:center;
  margin-top:5em;
}

.pic-name {
  text-align:center;
  color:white;
  margin-top:11.5em;
}

.name {
  font-size:1.4em;
}

.status {
  line-height: 1.2em;
  font-size:1em;
  padding-bottom:0;
  margin-bottom:1em;
}

.my-img {
  height:160px;
  border-radius: 50%;
  margin-bottom:1em;
}

.menu-laptop {
  padding:2.6em 5em;
  width:100%;
  text-align:center;
}

.menu-item {
  color:white;
  text-decoration:none;
  padding-top:0;
  padding-bottom:0;
  background-color: inherit;
  border:none;
  font-size: 1em;
  cursor: pointer;
}

.menu-item:hover {
  color:#F1F1F1;
}

.navbar-item:hover {
  color:#3D7298 !important;
}

.blue-link {
  color:#3D7298;
}

.blue-link:hover {
  color:#1B5177;
}

.cv {
  margin:2em 14em;
  text-align:justify;
}

.lists {
  list-style-position: outside;
  list-style-type:disc;
  padding-left:20px;
}

.section-title {
  color:#C0AF13;
  font-size:1.5em;
  margin-top:1em;
}

.cv-title {
  font-size:2em;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.cv-item {
  width:100%;
  height: inherit;
  margin-top:1em;
  display: table;
}

.cv-item-img {
  width:4em;
  height:100%;
  display:table-cell;
}

.cv-item-description {
  display: table-cell;
  padding-top:0;
  vertical-align: top;
  padding-left:1em;
}

.item-year {
  color:#4E4E4E;
}

.item-organization {
  font-size:1.15em;
}

.grey-link {
  color:#4E4E4E;
}

.sec-head-img {
  object-fit: cover;
  height:48em;
  width:100%:
}

.sec-head-txt-container {
  position: absolute;
  top:2em;
  left:14em;
  width:100%;
  color:white;
}

.sec-head-title {
  font-size:4em;
  margin-top:3.8em;
}

.sec-head-description {
  font-size: 1.3em;
  color:#C0AF13;
}

.home-btn {
  font-size: 1.2em;
  margin-left:1em;
  color:white;
  text-decoration: none;
}

.home-btn:hover {
  color:#F1F1F1;
}

.sec-txt {
  font-size: 1.2em;
}

.event-year {
  font-size:2em;
}

.blue-txt {
  color:#3D7298;
}

.no-padding {
  padding:0;
}

.no-margin-lr {
  margin-left:0 !important;
  margin-right:0 !important;
}

.description-container {
  margin:2em 11.7em;
}

li {
  text-align:justify;
}

.justify {
  text-align: justify;
}

.blue-sec-container {
  background-color:#3D7298;
  height:48em;
}

.portfolio {
  width:100%;
}

.sec-color-yellow {
  color:#fff200 !important;
}

.r-col-pad{
  padding-right:3em;
}

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

  .navbar {
    display: block;
  }

  .tel-div {
    width:100%;
  }

  .email-div {
    width:100%;
    padding-top:1em;
  }

  .cv {
    margin:2em 2em;
  }

  .linkedin-div {
    width:100%;
    padding-top:1em;
    padding-bottom:1em;
  }

  .tel-div {
    width:100%;
  }

  .email-div {
    width:100%;
  }

  .foot {
    height:18em;
    margin: 2em 2em;
  }

  .menu-laptop {
    display: none;
  }

  .name-top {
    display:none;
  }

  .head-right {
    width:100%;
  }

  .head-left {
    width:100%;
  }

  .left-head-content {
    margin-left:2em;
  }

  .salut {
    margin-top:0;
    padding:0;
  }

  .pic-name {
    margin-top:3em;
  }

  .head-right {
    height:25em;
  }

  .head-left {
    height:33em;
  }

  .cv-title {
    margin-top:1em;
  }

  .header {
    height:61.25em;
  }

  .description-container {
    margin:2em 2em;
  }

  .sec-head-txt-container {
    left:2em;
  }

  .home-btn {
    margin-left:0;
  }

  .r-col-pad{
    padding-right:0;
  }

}

@media screen and (max-width:400px) {
  .button-resume {
    height:10em;
    width:10em;
  }

  .button-text {
    font-size:1.4em;
  }

  .who-i-am {
    font-size:1.4em;
  }

}

@media screen and (max-width:350px) {
  .button-resume {
    height:9em;
    width:9em;
  }

  .button-text {
    font-size:1.3em;
  }

  .who-i-am {
    font-size:1.2em;
  }

}

@media screen and (max-width:1100px) and (min-width:700px){
  .left-head-content {
    margin-left:4em;
  }

  .button-resume {
    height:10em;
    width:10em;
  }

  .button-text {
    font-size:1.4em;
  }

  .cv {
    margin-left:4em;
    margin-right:4em;
  }

  .menu-laptop {
    padding-left:2em;
    padding-right:2em;
  }

  .salut {
    margin-top:9em;
  }

  .foot {
    margin-left:4em;
    margin-right:4em;
  }
}