@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body{
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  background-image: url("https://files.enderman.ch/wallpapers/Bright%20Moon.jpg");
  background-size: cover; /* why did I put fill */
  background-repeat: no-repeat;
  color: cornflowerblue;
  text-align: center;
  background-color: black;
}

#logo {height: 10vw}

a {
  font-size: 2vw;
  color: royalblue;
}

#container {
  min-width: auto;
}

n { color: white; font-size: 2em;}

#container {
  background-color: black;
  display:inline-block;
  border:20px solid black;
  border-radius: 20px;
}

#meh {
  background-color: black;
  display:inline-block;
  font-size: 2vh;
  height: 8vh;
  line-height: 4vh;
}

footer { 
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

.noex { font-size: 100% }

m {
  font-size: 1em;
}

.collapsible {
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: darkred;
}

.content {
  padding: 0 18px;
  max-width: 20%;
  display: none;
  overflow: hidden;
  background-color: black;
}

#target-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#target-content:target {
  pointer-events: all;
  opacity: 1;
}
#target-content #target-inner {
  position: absolute;
  display: block;
  padding: 48px;
  line-height: 1.8;
  width: 20%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  color: #34495E;
}

#target-inner {
  height: 100%;
  background-color: black;
  border:20px solid black;
  border-radius: 20px;
}

#target-content a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #34495E;
  opacity: 0.5;
  transition: opacity 200ms;
}

#target-content a.close:hover {
  opacity: 0.4;
}

#tock {
  position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;
}

#text {
  font-size: 1vw;
}

@media screen and (max-width: 600px) {
  img {
    height: 20vw;
  }
  #text {
    font-size: 4vw;
  }
  a {
    font-size: 4vw;
  }
}