body {
  background-color:#386068;
  font-family: 'Courier New', monospace;
  background: url(/pics/bg_neocities.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  margin: 0;
  overflow-y: scroll;
  font-size:4vw;
}


section {
  padding:1vw;
  justify-items: center;
}

aside {
  padding:1vw;
  justify-items: center;
}

text {
  color:#ffffff;
}

#links {
 width: 50%;
 text-align:center;
 margin-left: 25%;
 margin-bottom: 25px;
 margin-top:15px;
 border-radius: 25px;
}

#links a {
    background-color:#026bc2;
    display: block;
    color: #fff;
    text-decoration: none;
    margin: 10px 0 0;
    text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px #6abe30;
  padding:10px;
}

#links .selected {
    color: #5fcde4;
    font-weight: bold;
}

#links a:hover {
    color: black;
    background-color: #6abe30;
  box-shadow: 5px 5px #5fcde4;
}

#card {
  background-color:#5a6de0;
  border-radius: 5px;
 margin: 2.5%;
 margin-top: 2%;
}

#bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:3vw;
  text-align:center;
}

#status-bubble {
  padding:2vw;
  background-color:powderblue;
  margin:2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:3vw;
  border-radius: 5px;
}

#card-sidebar {
  background-color:#ffffff;
  border-radius: 5px;
  width: 95%;
 margin: 2.5%;
 margin-top: 2%;
 padding: 2vw;
 text-align:center;
}



#sidebar {
  background-color:#ffffff;
  border-radius: 5px;
  width: min-content;
 margin: 2.5%;
 margin-top: 2%;
 padding: 2vw;
 text-align:center;
}


#links_header {
 text-align:center;
 margin-bottom: 25px;
 margin-top:15px;
 border-radius: 25px;
 display: block;
}

#links_header a {
  font-size:3vw;
    background-color:#026bc2;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    line-height: 3vw;
    text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px #6abe30;
      padding:2vw;
      margin: .5vw;
}
#links_header .selected {
    color: #5fcde4;
    font-weight: bold;
}

#links_header a:hover {
    color: black;
    background-color: #6abe30;
  box-shadow: 5px 5px #5fcde4;
}

#links_header button {
  font-family: 'Courier New', monospace;
  font-size:3vw;
    background-color:#026bc2;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    line-height: 3vw;
    text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px #6abe30;
      padding:2vw;
      margin: .5vw;
}

#links_header button:hover {
    color: black;
    background-color: #6abe30;
  box-shadow: 5px 5px #5fcde4;
}

#title {
    background-color:#5fcde4;
/*height: 50px;*/
    text-align: center;
    padding:5px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-shadow: 2px 2px #ff1279;
  color:white;
}

#text {
  padding:2.5vw;
}


.title {
  color:white;
}

.list-item {
    color: #5fcde4;
  
}

.list-item:hover {
    color: #6abe30;
  
}


/* set correct box model */
* {
    box-sizing:border-box;
    margin: 0;
}

/* flexbox container */
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;r
}

/* columns (mobile) */
.holy-grail-flexbox {
    width:100%;
}

.pic-change {
  height: 40vw;
  width: 40vw;
  background-image: url(/pics/button1.png);
  background-size: cover;
  transition: background-image 0.3s ease-in-out;
  margin:1vw;
}

.pic-change:hover {
  background-image: url(/pics/button2.png);
}
    
.footer {
  margin:10px;
  width: 100%;
  text-align: center;
  font-size:3vw;
}

#img_preview {
  width: 75%;
  text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px #5fcde4;
}
#img_preview:hover {
  box-shadow: 5px 5px #6abe30;
}



/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:50%;
    }
    .holy-grail-flexbox > .left-sidebar-links {
        width:100%;
    }

    .pic-change {
      height: 30vw;
      width: 30vw;
    }
    
    .footer {
      font-size:2.5vw;
    }
    
    body {
      font-size:3vw;
    }
    
    h1 {
      font-size: 4vw;
    }
    
    #links_header {
     display: inline-block;
    }
    
    #links_header a {
      font-size:2vw;
      padding:2vw;
      line-height: 3vw;
    display: inline-block;
    }
    
    #links_header button {
      font-size:2vw;
      padding:2vw;
      line-height: 3vw;
    display: inline-block;
    }

  #status-bubble {
    font-size:2vw;
  }
    
    
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .header {
        order:-2; /* header first */
    }
    .holy-grail-flexbox > .left-sidebar-links {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main-content {
        width:50%;
    }
    .holy-grail-flexbox > .left-sidebar-links,
    .holy-grail-flexbox > .right-sidebar {
        width:20%;
    }

    .pic-change {
      height: 17.5vw;
      width: 17.5vw;
    }
    
    .footer {
      font-size:2vw;
    }
    
    body {
      font-size:1.5vw;
    }
    
    h1 {
      font-size: 2vw;
    }
    
    #links_header a {
      font-size:1.25vw;
      padding:1vw;
      line-height: 3vw;
    display: block;
    }
    
    #links_header button {
      font-size:1.5vw;
      padding:1vw;
      line-height: 3vw;
    display: block;
    }
    
    
    #bubble {
      display: grid;
      align-items: center;
      justify-content: center;
      margin:5px;
      font-size:2vw;
    }

#status-bubble {
  font-size:1vw;
}
}