*{
    margin: 0;
    padding: 0;
}

body{
    height: 100%;
    min-height: 100vh;
    background: radial-gradient(paleturquoise, lightsteelblue);
}

header{
    top: 0;
    position: sticky;
    background-color: #afc6de;
}

nav{
    height: 10vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav a{
    overflow: hidden;
    background-color: #afc6de;
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 1em;
    color: black;
}

nav a:hover{
    background-color: #8bd4e0;
}

nav a:first-child{
    margin-right: auto;
}

nav a:last-child{
    background-color: rgb(0, 112, 192);
}

#HeroSection{
    /* background-image: url(assets/logos/github.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #7ad3e1;  */
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Segoe UI", monospace;
}

.ContactGrid{
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 1em;
}

.HeroButton{
    border: .1em solid black;
    border-radius: 100%;
    padding: 1em;
    color: #000;
}

.PageTitle{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vh;
}

.CollectionTitle{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 15vh;
}

h1{
    text-align: center;
    text-decoration: underline;
}

.EducationSection{
    display: grid;
    grid-template-columns: 80% 20%;
    padding-left: 2em;
}

.EducationSection div{
    display: flex;
    padding: 1em;
    flex-direction: column;
}

.EducationSection img{
    display: flex;
    align-self: center;
    justify-self: center;
}

#TechGrid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#TechGrid{
    margin-top: 1em;
    padding-bottom: 5em;
}

#FrameGrid, #DevGrid, #LangGrid{
    display: grid;
}

.TechSection{
    text-align: center;
    text-decoration: none;
}

.TechSection h2{
    text-align: center;
    text-decoration: underline;
}

.TechSection ul li{
    list-style: none;
}

.JobSection{
    display: grid;
    grid-template-columns: 80% 20%;
}

.JobSection div{
    display: flex;
    padding: 1em;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.JobSection div ul{
    margin-top: .5rem;
}

.ProjectSection{
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.ProjectSection div{
    padding: 2em;
}

.ProjectSection img{
    display: flex;
    justify-self: center;
    align-self: center;
}

.PersonalProjectSection{
    display: grid;
    grid-template-columns: 50% 50%;
}

.PersonalProjectSection div{
    padding: 2em;
}

.PersonalProjectSection img{
    display: flex;
    justify-self: center;
    align-self: center;
}

#CoinGrid, #CapGrid, #CoinSearchDisplay, #CapSearchDisplay{
    display: flex;
    flex-wrap: wrap;
}

.CoinCard, .CapCard {
    padding: 1em;
}

.CoinSearch{
    border: .1em #000;
    padding: 1em;
    margin: 1em;
    min-width: 30vw;
}

#TotalContainer{
    margin:1em; 
    padding:1em; 
    border:.1em solid #000;
}

.CoinInfoTitle, .CapInfoTitle{
    text-decoration: underline;
    margin: 1em;
}

.CoinInfoSection a, .CapInfoSection a{
    color: #000;
    text-decoration: none;
    display: inline-block;
    margin-left: 1em;
}

.InfoTitle button{
    background-color: transparent;
    border: .1em line #000;
    border-radius: 7%;
    padding: 1em;
    margin: 1em;
    cursor: pointer;
}

.InfoTitle a{
    display: block;
    color: #000;
    text-decoration: none;
}

.InfoTitle .InfoSection{
    display: none;
}

.InfoTitle:hover .InfoSection{
    display: block;
}

.InfoSection a{
    margin: 1em;
}

#InfoContainer{
    display: flex;
}




/*img{*/
/*    transition: scale 0.25s ease;*/
/*    cursor: zoom-in;*/
/*}*/

/*img .zoomed{*/
/*    cursor: zoom-out;*/
/*}*/