@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
    font-family: 'latoR';
    src: url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff');
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
background-color: aliceblue;
font-family: 'latoR', sans-serif;
color: #1C2321;
font-size: 1.1rem;
line-height: 2;
background-image: url("../links/tiny-squares.png");
}
.bio {
box-shadow: 5px 5px 7px #1C2321;
width: 300px;
}

.Info {
border-radius: 50px;
/* background-color: gainsboro; */
}

main>p {
padding-top: 15px;
text-align: left;
/* width: 620px; */
}

h1 {
color: #1C2321;
font-size: 2.5rem;
text-decoration: underline solid #1C2321;
text-align: left;
font-family: 'Montserrat', sans-serif;
font-weight: 370;
margin: 20px;
}
h2 {
font-size: 1.3rem;
color: #070B47;
}
h3 { 
font-size: 1.17rem;
color: #6699CC;
}
p {
color: #1C2321;
font-weight: normal;
}
a {
font-weight: normal;
text-decoration: none;
}
a:link {
color: #1C2321;
}
a:visited {
color: #070B47;
}
a:hover {
text-decoration: underline;
color: slateblue;
}
a:focus {
color: #48D1CC;
}
a:active{
background-color: slategray;
}
ul>li{
color: #6699CC;
}
.Contact {
font-weight: bolder;

}
div>p {
color: #070B47;
}
footer>p {
color: #070B47;
font-size: 0.75rem;
}
.wrapper {
background: #ebe8fc;
margin: auto;
padding: 5%;
width: 90%;
display: flex;
flex-flow: row wrap;
}

header,footer {
    width: 100%;
}

footer {
    padding: 2%;
    text-decoration: underline;
}

main {
    width: 70%;
}

aside {
background: aliceblue;
padding: 2%;
width: 100%;
justify-content: flex-end;
}

aside h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 350;
}

aside h3 {
    font-family: 'Montserrat', sans-serif;
    color: #1C2321;
    font-weight: 300;
}

figure iframe {
width: 100%;
}

figure {
background-color:aliceblue;
margin-top: 5%;
border: 1px solid #1C2321;
width: 100%;
padding: 20px;
}

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

    .wrapper{
        width: 90%;
    }
    main{
        width: 70%;
    }  
    
    img {
        width: 40%;
        align-content: center;
    }
    aside{
        width: 25%;
        
    }  
    
    header,footer {
        width: 100%;
    }
    
    .assignments{
        width: 50%;
        margin: auto;
    }  

    .Info {
width: 70%;
    }


}