@import url("style.css");
@import url("flex.css");

body {
	background: url(washi.jpg);
}

.home{
	color: #7d97b8;
}

.home a:hover{color: #7d97b8;}

.home h1{
    opacity: 0.2;
  }

.home h3{
    padding-left: 8px;
}

#super-wrap{
	border: #7d97b8 2px solid;
	margin: 20px;
	min-height: calc(100vh - 40px);
  position: relative;
	}

body.home nav {
  position: absolute;
  height: 100%;
  overflow: auto;
}

body.home nav ul{
  top: 130px;
  right: 20px;
}

body.home nav ul#languageBu{
	bottom: 40px;
}

body.home .nav-icon{
	top: 83px;
	right: 35px;
}

body.home .homeWrapper{
  top: 27px;
  right: 32px;
}

body.home nav.active {
  background-color: #d2d1c8;
  transition: background 0.3s;
}

body.home.menu-active #news-summary ul, body.home.menu-active footer #bio p{
  width: calc(100% - 63px);
  padding-right: 15px;
}

.home h2{
  font-family: 'Kode Mono', sans-serif;
  text-transform: uppercase;
  font-weight: 100;
  line-height: 1.1;
  border-bottom: 2px solid #7d97b8;
  padding-left: 10px;
  margin-top: 0;
  font-size: 2.6vh;
  color: #7d97b8;
  height: 8vh;
  display: flex;
  letter-spacing: 3px;
  align-items: center;
}

.home h3{
	background: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237d97b8' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")
}

.home.ja h2{
    font-size: 3vh;
}

#news-summary{
    margin-top: 20px;
}

#news-summary ul{
    margin-top: 20px;
    border-top: 2px solid #7d97b8;
    padding-top: 20px;
    padding-left: 10px;
}

main{
    border-bottom: 2px solid #7d97b8;
}

footer p{
    margin-top: 20px;
    border-top: 2px solid #7d97b8;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

footer #bio p{
  border: none;
  margin-top: 8px;
  padding-top: 0;
  font-size: 1.6rem;
}

footer #bio p:first-child{
  border-top: 2px solid #7d97b8;
  padding-top: 20px;
  margin-top: 20px;
}



.nav-icon span {
  background: #7d97b8;
}
.nav-icon span:before, .nav-icon span:after {
  background: #7d97b8;
}


section.homeSection:last-child{
    border-right:none;
}

/*url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237d97b8' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")*/



@media (orientation: portrait) {

    section.homeSection{
        border-right:none;
        width: 60%
    }

    section.homeSection {
        height: 100vh;
    }

    .home h2{
        font-size: 4.5vh;
    }

    h1{
      font-size: 8.5vh;
    }
}