body{
    font-family: helvetica;
    color: deepskyblue;   
}

header img{
    display: block;
}

nav{
    background: linear-gradient(0deg, rgb(175, 174, 197) 0%, rgba(252,255,250,1) 50%, rgba(175, 174, 197,1) 100%);
    font-size: xx-large;
} 

nav ul{
    text-align: center;
}

nav li{
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
}

nav a{
    text-decoration: none;
}

nav a:hover{
    text-decoration: underline;
}

nav a.icon {
    display: none;
}

main img{
    display: block;
}

#hgimg{
    display: inline;
}

#hgimg img{
    width: 50%;
    float: left;
}
hr{
    border: solid 1px deepskyblue;
}

ul{
    list-style-type: none;
    padding: 0;
}

a{
    color: deepskyblue;
}

footer {
    padding: 1%; 
}

.backbt img{
    display: block;
  }

.backbt img:hover{
    filter: invert(50%)
  }
/*Home Page*/
.lbox{
    width: 20%;
    height: 500px;
    text-align: center;
    float: left;
    overflow: scroll;
    background-color: rgba(241, 242, 251, 0.5);
    border: solid 5px rgb(255,255,255);
}

/*About me page*/

/*Blinkies and Links page*/
.linky{
    width: 48%;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    padding: 5px 10px 5px 10px;
}
.mainbl{
    margin-left: 50%;
    position: sticky;
}

.blheader{
    color: rgb(128, 255, 0);
    padding-left: 3px;
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255,0,0,0));
    margin: 0;
}
/*Cd and media page*/
.vline{
    border-left: 100px solid white;
    overflow: auto;
}
.cd {
    padding: 15px;
}
.cd img {
    overflow: hidden;
    border: 1px solid white;
    width: 215px;
    height: 215px;
    object-fit: cover;
}
.cass {
    padding: 15px;
}
.cass img {
    overflow: hidden;
    border: 1px solid chartreuse;
    width: 200px;
    height: 300px;
    object-fit: cover;
}
/*responive stuff*/
@media screen and (max-width: 475px){

    header img{
        max-width: 100%;
    }
    nav ul{
        text-align: center;
    }
    nav li{
        display: contents;
        margin: 0;
    }
    #hgimg img{
        max-width: 100%;
        width: 100%;
        padding: 0;
        float: none;
    }
    .lbox{
        width: fit-content;
        height: 200px;
        float: none;
        margin-top: 10px;
    }
    .linky{
      width: auto;
      float: none;
    }
    .mainbl{
      margin-left: 0;
      position: initial;
    }
    .cd, .cass{
      padding: 0;
    }
    .cd img{
      width: 100px;
      height: 100px;
    }
    .cass img {
      width: 100px;
      height: 200px;
    }
    #mainbl{
        margin: 0;
    }

        nav {
            overflow: hidden;
            height: auto;
            width: 100%;
        }
    
        nav #myLinks {
            display: none;
        }
    
        nav a {
            text-decoration: none;
            display: block;
        }
    
        nav a.icon {
            display: block;
            padding: 8px;
            float: right;
        }
}

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

    body{
        margin-left: 35%;
        margin-right: 35%;
    }
}