body,html {
  padding: 0;
  margin: 0;
  background-color: #C6F6E5;

  font-size: 16px;
  font-family: sans-serif, 'Arial';
  scroll-behavior: smooth;
}

.wrapper {
  background-color: black;
  display: grid;
}

.cv-wrapper {
  display: grid;
  background-color: black;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.item.art, .cv-item {
  background-color: #C1D7FF;
}

.cv-item {
  padding:20px;
}

.header {
  background-color: #C6F6E5;

  font-size: 16px;
  padding: 20px;
  line-height: 1.25em;
}

/*.header.work, .footer.work {
  background-color: whitesmoke;
}*/

.header h1 {
  font-size: 40px;
}

.header p {
  font-size: 20px;
}

.item {
  background-color: peachpuff;
  justify-content: left;
  align-items: left;

  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;  

  padding: 20px;
  color: black;
  font-family: sans-serif, Helvetica;
}

.item.image {
  display:inline-block;
  float:left;
}

.item img {
  max-width:800px;
}

a {
  color: black;
  text-decoration: none;
  border-bottom: 1px dashed black;
  cursor:pointer;

  -webkit-transition: border-bottom 1s ease;
  -ms-transition: border-bottom 1s ease;
  transition: border-bottom 1s ease;
}

a:hover {
  text-decoration: none;
  border-bottom: 1px dotted black;
}

a:visited {
  text-decoration: none;
  border-bottom: 1px solid black;

  cursor:pointer;
}

.header a {
  border-radius: 30px;
  border:none;
  padding:5px 5px 2px 5px;

  text-decoration: none;
  font-style: normal;

  -webkit-transition: background-color 1s ease;
  -ms-transition: background-color 1s ease;
  transition: background-color 1s ease;  
}

.image a {
  border-bottom: none;
}

h1 {
/*  display:inline-grid;*/
width: 100%;
margin: 0 0 10px 0;

font-weight: 500;  
}

h2 {
  margin: 0 0 10px 0;
  
  font-weight: 350;  
}

p {
  width:100%;
  margin: 0;

  font-size: 1.5em;
  line-height: 1.2em;
  font-weight: 200;

  margin-bottom: 0.75em;  
}

p:last-child {
  margin-bottom: 0;
}

ul {
  margin:0;

  font-size: 1.5em;
  line-height: 1.2em;
  font-weight: 200;  
}

li {
  padding:0 0 0.5em 0;
}

#dot {
  display: none;
  position: fixed;
  z-index: 99;
  right: 30px;
  bottom: 30px;

  background-color: rgba(104, 104, 104,0.25);
  border:none;
  border-radius: 50%;
  color:whitesmoke;
  box-shadow: 0 5px 7px rgba(50,50,50,0.5);  

  padding:17.55px;
  width:75px;
  height:75px;
  font-weight: 200;

  cursor:pointer;

  writing-mode:vertical-rl;
  text-align: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1em;

  transition: all 0.5s ease;  
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;  
}

#dot:hover {
  bottom: 45px;
  background-color: rgba(104, 104, 104,0.5);  
  box-shadow: 0 10px 15px rgba(0,0,0,0.15);

  transition: all 0.5s ease;  
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}

/*///////////////////////////////////////////*/

/*category colors*/
.header a#me {
  background-color: rgba(0,255,154,0.25);
}

.header a:hover#me {
  background-color: rgba(0,255,154,1);
}

/*cat-interactive-sculpture*/
.header a.cat-interactive-sculpture {
  background-color: rgba(136,173,241,0.25);
}

.header a:hover.cat-interactive-sculpture, 
.cat-interactive-sculpture {
  background-color: rgba(136,173,241,1);
}

.header a.cat-ceramics {
  background-color: rgba(221,160,221,0.25);
}

.header a:hover.cat-ceramics, 
.cat-ceramics {
  background-color: rgba(221,160,221,1);
}

.header a.cat-language {
  background-color: rgba(255,195,0,0.25);
}

.header a:hover.cat-language, 
.cat-language {
  background-color: rgba(255,195,0,1);
}

.header a.cat-playful {
  background-color: rgba(255,99,71,0.5);
}

.header a:hover.cat-playful, 
.cat-playful {
  background-color: rgba(255,99,71,1);
}

.header a.cat-graphic-design {
  background-color: rgba(171,235,255,0.65);
}

.header a:hover.cat-graphic-design,
.cat-graphic-design {
  background-color: rgba(171,235,255,1);
}

/*.header a.cat-2d {
  background-color: rgba(255,160,122,0.5);
}

.header a:hover.cat-2d,
.cat-2d {
  background-color: rgba(255,160,122,1);
}*/

.footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;

  overflow: hidden;

  padding:10px;
  border-top:2px solid black;
}

.topbar-wrapper {
  display: grid;
  background-color: black;
  grid-template-columns: 7fr 1fr; /*1fr;*/
  grid-column-gap: 2px;
  grid-row-gap: 2px;

  border-bottom: 2px solid black; 

  font-weight: 200;  
}

.dashboard {
  background-color: rgba(204, 204, 255);
  padding:0;  
}

#keyButton, #darkButton {
  font-size: 14px;
  border: none;
  width:100%;

  background-color: rgba(255, 200, 200, 0.5);
  padding:10px;

  cursor:pointer;
  white-space: nowrap;
}

#keyButton:hover, #darkButton:hover {
  background-color: rgba(204, 204, 204,0.25);  

  transition: all 0.5s ease;  
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;  
}

.scrolly {
  overflow: hidden;

  background-color: lavender;
  padding:10px;
  border:none;
  margin:0;

  font-weight: 100;
}

#scrolly-text {
  height:1em;
  white-space: nowrap;
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 45s linear infinite;
  -webkit-animation: my-animation 45s linear infinite;
  animation: my-animation 45s linear infinite;
}

/*///////////////////////////////////////////*/
@media only screen and (max-width: 3000px) {
  .wrapper {
    grid-template-columns: 2fr 3fr;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .header {
    grid-column-start: 1;
    grid-column-end: 3;  
    
    font-size: 2.5em;      
  }

  h1 {
    font-size: 2.5em;
    line-height: 1em;    
  }

  h2 {
    margin-top:1em;

    font-size: 1.5em;
    line-height: 1em;
    font-weight: 400;
  }

  h2:first-child {
    margin-top:0;
  }

  .wrapper.about h1 {
    font-size:2em;
    line-height: 1em;
  }

  .cv-item p {
    font-size:1.25em;
  }

  img.half {
    width:48%;
  }  
}

@media only screen and (max-width: 1080px) {
  .wrapper {
    grid-template-columns: 2fr 2fr;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .header {
    grid-column-start: 1;
    grid-column-end: 3;  
    
    font-size: 1.75em;      
  }

  .item img {
    max-width:100%;
  }  

  h1 {
    font-size: 1.75em;
    line-height: 1.1em;    
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.1em;
  }    

  p, ul {
    font-size: 1.25em;    
  }

  img.half {
    width:auto;
  }  
}

@media only screen and (max-width: 500px) {
  #dot {
    right: 30px;
    top: 30px;
    padding:3px;
    width:45px;
    height:45px;
    overflow: hidden;
    color:rgba(255,255,255,0.5); 
  }

  .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 0;
    background-color: none;
  }

  .header {
    grid-column-start: 1;
    grid-column-end: 1;

    font-size: 1.3em;
    line-height: 1.4em;
  }

  .footer {
    font-size: 1em;    
    line-height: 1.1em;
  }

  .item {
    grid-column-start: 1;
    grid-column-end: 1;    
  }

  .item.info {
    border-top:2px solid black;
    padding-bottom:0;
  }

  .item img {
    width:100%;
  }

  img.half {
    width:100%;
  }  

  .about h1 {
    margin-bottom: 0;
  }

  .about .detail {
    padding-top:10px;
  }

  .cv-wrapper {
    border-top: 2px solid black;
    margin-top: 15px;
  }

  .header.work {
    font-weight: 600;
  }

  h1 {
    font-size: 2em;
    line-height:1.1em;
  }

  h2 {
    font-size: 1.1em;
    line-height: 1.1em;
    font-weight: 600;
  }  

  p, ul, .topbar-wrapper {
    font-size: 1.1em;
    font-weight: 400;
  }  

  #scrolly-text {
    font-size: 14px;
    font-weight: 400;

    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;    
  }
}



/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.darkmode {
  background-color: #171B22;
  color:white;
}

.a-darkmode {
  border-bottom-color:white;
}

.a-hover-darkmode {
  border-bottom-color:white;
}

/*Responsive video embed*/
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}