body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    width: 100%;
background-image: url(baggrund.jpg);
   background-size:cover;
  flex-direction:column;
 background-repeat: no-repeat; 
background-attachment: fixed;}

.container {  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "songs text goals"
    "art yt wall"
    ". mail .";}

.container > songs {grid-area: songs;}

.container > text {
  grid-area: text;
  display:flex;
  align-items:center;
  justify-content:center;}

.container > goals {
  grid-area: goals;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
margin-top:20px;}

.container > art {grid-area: art;}

.container > yt {grid-area: yt;
  margin:50px;}

.container > wall {grid-area: wall;
    display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;}

.container > mail {grid-area: mail;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;}


#text{outline:1px black dotted;
   width:90%;
  align-items:center;
    padding:0px 5px 0px 5px;}

#yt{text-align:center;}

#goals{ 
  outline:1px black dotted;
  width:70%;
  padding:0px 5px 0px 5px;
    line-height:23px;   color: wheat; margin-top:20px;}

a, h1 { font-family: 'BPScript';
color:black;}

p{font-family:'Sligoil-Micro';
  font-size:15px;  color: wheat;}

details{font-family:helvetica; margin:10px;}

summary:hover{color:white;}

h1{text-align:center;
  font-size:17px;   color: wheat;}

#xt{font-family: 'Xanh-Mono';
  font-size:15px; color:white;}

summary{font-family: 'JetBrains';
  font-size:14px;   color: wheat;}

h2{font-size:18px;
font-family:'Xanh-Mono';  color: wheat;}

#xtt{font-family: 'JetBrains';
  font-size:12px;}

label{font-family:'Sligoil-Micro';
  font-size:15px;color:white;}

input{font-family:'Barecast';}

input:hover{font-family:'Barecast';
  color:firebrick;}

#pages{
  list-style:none;
  background-color:black;
  font-size:11px;
  line-height:20px;
  padding:1px;
  outline:black 2px double;
}

a{color:white;}

a:hover{font-size:12px;color:navajowhite;
}

@media screen and (max-width: 900px) {
 
  label{font-size:20px;}
  
  input{font-size:20px;}
  
  .container > songs{width: max-content;}
  
  .container > goals{width: max-content;}
  
  .container > mail{margin-top:100px;}
  
  
  details{
    word-wrap: break-word;
  width: 250px;
  }
  
  summary:active{color:sienna;}
}


@media only screen and (min-width: 3000px) {

  p{font-size:40px;  }
  
  #goals {outline: 2px black dotted;
    line-height: 50px;}
  
  summary{ font-size:40px; }
  
  h1{font-size:50px;}
  
  h2{font-size:45px;}
  
  #xt{font-size:45px; }
  
  #xtt{font-size:25px;}
  
  a{font-size: 25px;}
  
  a:hover{font-size:30px;
  color:navajowhite;}
  
  label{font-size:30px;}
  
  input{font-size:35px;}
  
  #pages{line-height:40px;   margin: 30px; }
  
  .container > text{ margin: 60px;}
  
  #text {outline: 2px black dotted;}
  
  iframe{width: 1700px; height: 1000px;
  }
}

@font-face {                  
font-family: 'JacquardaBastarda-9';
src: url(https://humantooth.neocities.org/fonts/JacquardaBastarda9.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Xanh-Mono';
src: url(https://humantooth.neocities.org/fonts/XanhMono-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'BPScript';
src: url(https://humantooth.neocities.org/fonts/BPScript.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'BPnoScript';
src: url(https://humantooth.neocities.org/fonts/BPnoScript.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Sligoil-Micro';
src: url(https://humantooth.neocities.org/fonts/Sligoil-Micro.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'JetBrains';
src: url(https://humantooth.neocities.org/fonts/JetBrains-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Barecast';
src: url(https://humantooth.neocities.org/fonts/Barecast-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}