*{
    margin:0;
    padding:0;
}
img {
    display:block;
}
a:link{
    color:black;

}
a:visited, a:link{
    text-decoration: none;
    color:black;
}
a:hover{
    color:rgba(255, 255, 255, 0.6);
    text-decoration: none;
    opacity: 90%;

}
.body {
    font-family: Georgia;
    background-color:  rgb(5, 5, 5);;   
    font-size: 20pt;
}
.container-grid-whole-page {
    display: flexbox;
    max-width: 1400px;
    min-width: 300px;
    height: 100vh;
    /*align-content: center;*/
    margin:auto;
    background-color: rgb(247, 247, 247);


}

.KelsoSkiesHeader {
    display:grid;
    height: 100px;
    grid-template-columns: 1fr 2fr;

}
/*
.KelsoSkiesHeader {
    display:grid;
    height: 65px;
    grid-template-columns: 2fr 1fr .5fr;

}*/
.kelsoSkiesCell {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: #376FAC;
    color:white;
    font-size: 2.5em;
    align-content: center;
    text-align: left;
    padding-left:.25em;

}

.picture-container{
    align-content: center;
}
.picture-container img {

    width: 100%;
    height: 100%;
    margin: auto;

}
.waveform {
    align-content: center;
    align-items: center;
    display: block;

}
.socials-top-nav {
    display:grid;
    grid-template-columns: 1fr 1.3fr 1.5fr  1fr 1fr 1fr 1fr;
   
    font-family: georgia;
    font-size: 18pt;
    color: white;
    margin-top:.1em;
}
.top-nav-items {
   
    padding-left: 0em;
    padding-right: 0em;
    background-color: rgb(61, 118, 203);
    align-content: center;
    text-align: center;

    
}
.right-border {
    border-right: solid 1px black;
    border-left: solid 1px black;
}
.left-border {
    border-left: solid 1px black;
}

.soundcloudCell {
    align-content:center;
    background-color: rgba(11, 47, 113, 0.832);
   
}
.soundcloudIcon {
    width: 120px;
    height: 50px;
    display: block;
    margin-left: 1em;
    opacity: 95%;
  
}

.youtubeCell {

    border-right: solid 1px black;
    background-color: rgba(11, 47, 113, 0.832);
    align-content: center;
}
    
.youtubeIcon{
    width: 60px;
    height: 40px;
    display: block;
    margin: auto;
    opacity: 80%;

}
.empty-space {
    background-image: linear-gradient(to right,  rgba(11, 47, 113, 0.832),  rgb(61, 118, 203));
}
.bandcampicon {
    width: 55px;
    height: 45px;
    padding-right: 25px;

}


.gradient-separator-dark {
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to Right, #6985bc, rgb(228, 232, 235));
 
}
.gradient-separator-dark-rev {
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to Right, rgb(228, 232, 235), #9299a7);
 
}

.gradient-line {
    position:relative;
    width: 100%;
    top:5px;
    height: 1px;
    background-color: rgb(38, 44, 74);
    margin-top:0px;
    background-image: linear-gradient(to Left, #3461b5, rgb(132, 160, 190));
    border-radius: 1px;
    opacity: 40%;

}



.desertPictureBox {
    max-width: 1400px;
    margin-top:.1em;
}

.desertPicture {
    display: block;
    height: auto;
    max-width: 100%;
    border-top: solid 1px black;
}
.subHeading {
    font-size: 1em;
    margin-left: .5em;
    border-bottom: 1px solid black;
}

.see-more {
    text-align: left;
    font-size: .7em;
}

.youTubeGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: .5em;
    gap: 1em;
}
.video-container {
    width: 100%;
    margin:auto;
    aspect-ratio: 16/9;
    
}

.video-container iframe {
    width: 100%;
    height: 100%;
    margin: auto;
}

.container-footer {
    display: grid;
    height: 100px;
    width: 100%;
    font-size: .5em;;
    margin-left: 1em;;
}

.normal-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: .7em;
    border: 1px solid black;
    margin-top:1em;
    width:50%

}
.contact-text {
    font-size: .8em;
    margin-left:1em

}
.container-contact-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top:2em;

}
 .extra-space {
    margin-top:1.5em;
 }

a.email-link{
    text-decoration: underline;

}
a.email-link:hover {
    color:black;
}
a.see-all-link:hover {
    color:rgb(35, 60, 201);
}
.LogicProPicture {
    margin-right:1em;
    border: 1px solid black; 
    width:70%;
    height: 80%;
}

.soundcloud-container {
   
    margin-top:.5em;
    margin-left:1em;

}
a.kelso-skies-header-link {
    color:white;
}


/* Desktop */
@media (max-width:1440px) {
  .kelsoSkiesCell {
    font-size:2em;
  }

}
/* Tablet 1 */
@media (max-width: 900px) {
  .kelsoSkiesCell {
    font-size:1.5em;
  }
  .KelsoSkiesHeader { 
    grid-template-columns: .5fr 1fr;
}
}

/* Tablet */
@media (max-width: 800px) {
  .kelsoSkiesCell {
    font-size:1.5em;
  }
  .KelsoSkiesHeader { 
    grid-template-columns: 1fr 2fr;
}
    .top-nav-items {
        font-size: .9em;
    }
}



/* Phones */
@media (max-width:600px) {
    .kelsoSkiesCell {
    font-size: 1.3em;
    text-align: center;
    border-bottom: 1px solid black;
    }

    .socials-top-nav {
    display:grid;
    grid-template-columns: 1fr;
    }
    .KelsoSkiesHeader {
    display:grid;
    height: 65px;
    grid-template-columns: 1fr;
    height: 130px;
    }

    .youtubeIcon {
        width:40px;
        height: 25px;
        float:none;
        margin:auto;
        padding-top:.2em;
        padding-bottom: .25em;
    }
    .youtubeCell {
        border-bottom: 1px solid black;
        border-right:none;
    }
    .soundcloudCell {
        border-bottom: 1px solid black;
        /*border-right: 1px solid black*/
    }
    .soundcloudIcon {
        float:none;
        margin:auto;
        
    }

    .youTubeGrid {
        grid-template-columns: 1fr;
        margin-left:.5em;
        margin-right:.5em
        
    }
    .top-nav-items {
        border-bottom: solid 1px black;
        font-size: 1em;
       /* border-right: solid 1px black;
        border-left: solid 1px black;*/


    }
    .desertPicture {
        display:none;
    }
    .container-contact-page {
        grid-template-columns: 1fr;
    }
    .contact-text {
        font-size:.7em;
        margin-bottom: 1em;;
    }
    .LogicProPicture {
        display: none;
    }


    .see-all {
        text-align: left;
        margin-left:1em;
 
    }


  }