:root {
 --myred: #e94f37;
 --myyellow: #ffc857;
 --myblue:  #004e98;
 --mygreen: #56876d;
 --myblack: #39393a;
 --mybrown: #504136;
 --mypurple: #dbbbf5;
 --folder: #F0DCAF;
}

@font-face {
  font-family: SourceCodePro;
  src: url(../fonts/SourceCodePro-VariableFont_wght.ttf);
}

body {
    font-family: sans-serif;
    margin: 0px;
    font-size: 14px;
    color: var(--myblack);
}

body * {
  font-family: SourceCodePro;
}

.container {  
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 500px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bio-container pages";

  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.bio-container {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;
  gap: 10px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bio-image"
    "bio-name"
    "bio-mosiac";
  grid-area: bio-container;
  margin-left: 10px;
}

.bio-image { grid-area: bio-image; }

.bio-image > img, .bio-mobile-img > img {
  width: 100%;
  height: 100%;
  border-radius:  15px;
}

.bio-name { 
  grid-area: bio-name;
  background-color: var(--mypurple);
  padding: 20px 10px 20px 10px;
  border-radius:  15px;
}

.bio-mobile-name {
  padding: 20px 10px 20px 10px;
  border-radius:  15px;
}

.bio-mosiac {  
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  grid-template-rows: 0.5fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "mosiac-tile1 mosiac-tile2"
    "mosiac-tile3 mosiac-tile4";
  grid-area: bio-mosiac;
}

.mosiac-tile1 { 
  grid-area: mosiac-tile1;
  background: var(--myred);
  border-radius:  15px;
 }

.mosiac-tile2 {
  grid-area: mosiac-tile2;
  background: var(--myyellow);
  border-radius:  15px;
 }

.mosiac-tile3 {
  grid-area: mosiac-tile3;
  background-color: var(--myblue);
  border-radius:  15px;
 }

.mosiac-tile4 { 
  grid-area: mosiac-tile4; 
  background-color: var(--mygreen);
  border-radius:  15px;
}

.pages {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "page-tabs"
    "page-content-container";
  grid-area: pages;
  margin-left: 10px;
  margin-right: 10px;

  border-bottom: solid var(--folder) 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.page-tabs {
  display: grid; 
  grid-template-columns: auto auto auto auto 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 10px; 
  grid-template-areas: 
    "page-tab-about page-tab-work page-tab-social page-tab-contact page-tab-empty"; 
  grid-area: page-tabs; 
}

.page-tab-about { grid-area: page-tab-about; }
.page-tab-work { grid-area: page-tab-work; }
.page-tab-social { grid-area: page-tab-social; }
.page-tab-contact { grid-area: page-tab-contact; }
.page-tab-empty { grid-area: page-tab-empty; }

.page-tab {
  background-color: var(--folder);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.page-tab input {
  display: none;
}

.page-tab label {
  display: block;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  border-bottom: solid 3px rgba(0, 0, 0, 0.1);
}

.page-tab > input:checked+label {
  border-bottom: none;
}



.page-content-container { 
  grid-area: page-content-container;
  background-color: var(--folder);
  
  padding: 0px 10px 10px 10px;
  overflow: auto;
  border-top: solid var(--folder) 15px;
  border-top-right-radius: 15px;;
}

.page-content {
  display: none;
}

.page-content.active {
  display: block;
}

.bio-mobile-name, .bio-mobile-header {
  display: none;
}

.bio-name {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  padding-left: 20px;

  font-weight: bold;
  font-size: 18px;
  color: #fff;
}

/* width */
.page-content-container::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.page-content-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);

}
 
/* Handle */
.page-content-container::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.page-content-container::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

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

    .bio-mobile-name, .bio-mobile-header {
        display: unset;
    }

    .bio-image, .bio-name, .bio-mosiac {
      display: none;
    }

    .container {  
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto 500px;
      gap: 10px 0px;
      grid-auto-flow: row;
      grid-template-areas:
        "bio-container"
        "pages";
    }

    .bio-container {  display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 10px 0px;
      grid-auto-flow: row;
      grid-template-areas:
        "bio-mobile-header"
        "bio-mobile-name";
      grid-area: bio-container;
      margin: 10px 10px 0px 10px;
    }

    .bio-mobile-name { 
      grid-area: bio-mobile-name; 
      background-color: var(--mypurple);
      display: flex;
      justify-content: space-between;
      padding-right: 30px;
      padding-left: 30px;
      font-weight: bold;
      font-size: 18px;
      color: #fff;
    }

    .bio-mobile-header {  display: grid;
      grid-template-columns: 150px 1fr;
      grid-template-rows: 1fr;
      gap: 0px 10px;
      grid-auto-flow: row;
      grid-template-areas:
        "bio-mobile-img bio-mobile-mosiac";
      grid-area: bio-mobile-header;
    }

    .bio-mobile-mosiac {  display: grid;
      grid-template-columns: 0.5fr 1fr;
      grid-template-rows: 0.5fr 1fr;
      gap: 10px 10px;
      grid-auto-flow: row;
      grid-template-areas:
        "mosiac-tile1 mosiac-tile2"
        "mosiac-tile3 mosiac-tile4";
      grid-area: bio-mobile-mosiac;
    }

    .mosiac-tile1 { grid-area: mosiac-tile1; }

    .mosiac-tile3 { grid-area: mosiac-tile3; }

    .mosiac-tile2 { grid-area: mosiac-tile2; }

    .mosiac-tile4 { grid-area: mosiac-tile4; }

    .bio-mobile-img { grid-area: bio-mobile-img; }

    .pages {  display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas:
        "page-tabs"
        "page-content-container";
      grid-area: pages;
      
    }

    .page-tabs {  display: grid;
      grid-template-columns: auto auto auto auto 1fr;
      grid-template-rows: 1fr;
      gap: 0px 5px;
      grid-auto-flow: row;
      grid-template-areas:
        "page-tab-about page-tab-work page-tab-social page-tab-contact page-tab-empty";
      grid-area: page-tabs;
    }

    .page-tab-about { grid-area: page-tab-about; }

    .page-tab-work { grid-area: page-tab-work; }

    .page-tab-social { grid-area: page-tab-social; }

    .page-tab-contact { grid-area: page-tab-contact; }

    .page-tab-empty { grid-area: page-tab-empty; }

    .page-content-container { grid-area: page-content-container; }


}