* {
    box-sizing: border-box;
}

body {
    display: block;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

ul{
    list-style-type: none;
}

#about{
    color: white;
    display: flex;
    flex-direction: column;  
    background-image: linear-gradient(#000000, #232323, #0b0c1f);  
}

#about-text{
    width: 50%;
}


a{
  background-image: linear-gradient(#68a3be, #454446);  
  background-image: -moz-linear-gradient(#68a3be, #454446);
  background-image: -webkit-linear-gradient(#68a3be, #454446);
  border: none;
  color: #ddddff;
  padding: 15px 32px;
  text-align: center;
  text-decoration:hwb(from color h w b);
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.header {
    justify-self: start;
    background-color: #888888;
    padding: 30px;
    text-align: center;
    font-size: 35px;
}

.row {
    display: -webkit-flex;
    display: flex;
}

.column {
    padding: 10px;
    height: 70vh;
    display: flex;
}

.menu{
    display: block;
}

.left {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
}

.middle {
    display: flex;
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
    background-color: #0b0c1f;
}

.background {
    justify-self: center;
    display: grid;
    height: 80%;
    width: 80%;
    justify-content: center;
    background-image: linear-gradient(#000000, #232323, #0b0c1f);
    grid-template-columns: auto auto auto;
    grid-template-rows: 70% 30%;

}

.textbox{
    color: white;
    text-align: left;
    width: 20%;
    padding: 20px;
    overflow: auto; 
}

.night {
    display: grid;
    height: 100%;
    width: inherit;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
}

.star {
    height: 30px;
    width: 30px;
    border-style: none;
    border-radius: 15px;;
    background-color:black;
    filter: blur(3px);
    background-image: radial-gradient(white, rgba(238, 239, 191, 0.807) 2px, transparent 10px);
    animation: star-blinking infinite;
    -moz-animation: star-blinking infinite;
    -webkit-animation: star-blinking infinite;
}

#star1 {
    margin-left: 20%;
    margin-top: 30%;
    justify-self: flex-start;
    translate: -40%;
    animation-duration: 120s;
    animation-delay: -60s;
}

#star2 {
    margin-left: 40%;
    margin-top: 40%;
    justify-self: auto;
    translate: -29%;
    animation-duration: 210s;
    animation-delay: -70s;
}

#star3 {
    margin-left: 44%;
    margin-top: 35%;
    justify-self: center;
    translate: -5%;
    animation-duration: 100s;
    animation-delay: -15s;
}

#star4 {
    margin-left: 54%;
    margin-top: 30%;
    justify-self: flex-end;
    translate: 30%;
    animation-duration: 90s;
    animation-delay: -5s;

}

#star5 {
    margin-left: 70%;
    margin-top: 25%;
    justify-self: flex-end;
    translate: 70%;
    animation-duration: 60s;
}



.linev {
    width: 3px;
    border-style: solid;
    height: 70px;
    border-color: white;
}

.lineh {
    width: 70px;
    border-style: solid;
    border-color: white;
    height: 3px;
}

.linev-short {
    width: 3px;
    border-style: solid;
    height: 50px;
    border-color: white;
}

.linev-shorter {
    width: 3px;
    border-style: solid;
    height: 30px;
    border-color: white;
}

.lineh-short {
    width: 50px;
    border-style: solid;
    height: 3px;
    border-color: white;
}

.lineh-shorter {
    width: 30px;
    border-style: solid;
    height: 3px;
    border-color: white;
}

.legs {
    display: grid;
}

#lower-leg {

    justify-self: flex-end;
}

#figure{
    display:flex;
grid-row:2;
}

#chair{
    display: flex;
    align-self:flex-end;
    justify-self: first baseline;
    transform: scale(0.7, 0.7) translate(60px, 30px);
    -moz-transform: scale(0.7, 0.7) translate(60px, 30px);
    -webkit-transform: scale(0.7, 0.7) translate(60px, 30px);
}

#table{
    padding-left: 25px; 
    align-self: last baseline;
    display: flex;
    transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
}

#tablelegL{
    align-self: flex-start;
    justify-self: left;
}

#tablelegR{
    align-self: flex-end;
    justify-self: end;
}

#stand {
    align-self:center;
    justify-self:center;
}

#stick-figure {
    align-self: flex-end;
    display: grid;
    height: fit-content;
}

.body-head {
    transform-origin: bottom left;
    transform: rotate(25deg);
}

#head {
    border-style: solid;
    border-width: 6px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    justify-self: flex-start;
    border-color: white;
}

.body {
    justify-self: flex-start;
    transform-origin: center;
    display: grid;
}

#arm {
    align-self: right;
    transform: rotate(-25deg);
    translate: 7px -23px;
}

#desk {
    justify-content: center;
    align-self: center;
    display: flex;
}


/* Style the footer */
.footer {
    background-color: #777777;
    padding: 10px;
    text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .row {
        -webkit-flex-direction: column;
        flex-direction: column;
    }


}

@keyframes star-blinking {
    0% {
          translate: -585% 2%;
    }

    25%{
        background-image: radial-gradient(white, rgba(184, 240, 240, 0.807) 3px, transparent 10px);
    }

    50% {
        translate: 585% 4%;
        background-image:  radial-gradient(white, rgb(244, 218, 218) 1px, transparent 10px);;
    }
    
        25%{
        background-image: radial-gradient(white, rgba(240, 209, 246, 0.974) 4px, transparent 10px);
    }
   
    100% {

        translate: -585% 0%;
        display: none;
    }
}