style.css

h1{
    text-align: center;
    font-size: 65px;
    color: rgba(104, 196, 116, 0.646);
    font-family: 'Rock Salt', cursive;
    position: relative;
    top: 17.5px;

}

p{
    font-family: 'PT Serif', serif;
    font-size: medium;
}


body{
    border: 2px dotted rgba(47, 148, 10, 0.854);
    width: 95%;
    margin: 0 auto;
    background-color: rgba(15, 77, 185, 0.878);
    border-radius: 11px;

}

/* if my text or anything is too big this makes it so you can scroll instead of overlapping. */
main{
    overflow: scroll;

}

/* top of pyramid */
nav, #bigMiddle, footer, .change{
    margin: 1%;
    background-color: rgba(207, 209, 212, 0.933);

}

#bigMiddle{
    height: 250px;
}

/* middle of pyramid */
.small-1, .small-2, .small-3{
    width: 35%;
    float: left;
    margin: 1%;
    background-color: rgba(207, 209, 212, 0.933);

}

/* center pyramid I thought I'd have to do small-2 as well but it pushed everything over so small-2 doesn't need a right margin */
.small-1{
    margin-left: 15%;
}

/* bottom of pyramid */
.small-3{
    margin-right: 25%;
    margin-left: 25%;
    width: 50%;
    float: left;


}


li{
    display: inline;
    padding: 3px;

}


a{
    margin-left: 155px;
    color: black;
}

/* last block */
nav, footer, .change{
    padding: 7px;
    background-color: rgba(207, 209, 212, 0.933);

}

/* need this down here so it grabs bigMiddle as well */
article{
    height: 200px;
    background-color: var(--nav-color);
    
}


.change{
    background-color: var(--nav-color);
    --nav-color: rgba(207, 209, 212, 0.933);
}

.row{
    display: flex;
}

.pic{
    padding: 2%;
}

iframe{
    width: 100%;
    height: 125px;
    margin-right: 1.5%;
    overflow: auto;
    position: relative;
    bottom: 15px;
    
}

.sInfo{
    text-align: center;
}

.info{
    margin-top: -15px;
}

.move{
    margin-bottom: 10px;
}

.what{
    width: 100%;
    border: 5px solid black;
    height: 1000px;
    position: relative;
    top: 500px;
}