@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');

/* WEBSITE */
body {
    background: #F4C2C2 ;
}

/* DIVS */
#header {
    position: relative;
    max-width: 850px;
    width: 90%;
    margin: auto;
}

#nav {
    position: relative;
    background: #FFF0F0;
    max-width: 850px;
    width: 90%;
    margin: auto;
}

#section {
    line-height: 1.5;
    position: relative;
    background: #FFF0F0;
    max-width: 850px;
    width: 90%;
    margin: auto;
    overflow: hidden;
}


#footer {
    position: relative;
    background: #FFF0F0;
    max-width: 850px;
    width: 90%;
    margin: auto;
}

#titles {
    position: relative;
    max-width: 850px;
    width: 90%;
    margin: auto;
}

/*RESPONSIVE*/
.respond {
    width: 100%;
    max-width: 450px;
}

/* LINKS */

a {
    color: #6dc5cd;
}

a:hover {
    color: #F4C2C2;
}

a:visited {
    color: #705ca4;
    font-family: Arial;
}

/* TEXT */
p {
    font-family: Arial;
}

h1 {
    font-family: Arial;
    font-weight: 800;
}

#titles h1 {
    text-align: center;
}

ul {
    font-family: Arial;
}

h4 {
    font-family: Arial;
    font-weight: 500;
}

/* NAV */

#nav ul {
    text-align: center;
    font-family: Arial;
}
#nav li {
    display: inline;
    padding-right: 10px;
}

/* TABLES */
table {
    font-family: Arial;
}

th {
    text-align: center;
    background: white;
}

th, td {
    text-align: center;
    border: #b19dbf;
    background: white;
    padding: 8px;
}

/* HEADER */
#header img {
    width: 100%;
}

/* SPACE */
.spacing {
    padding: 10px;
    margin: 10px;
}

#home img{
    float: left;
    margin: 3px 20px 3px 0px;
    width: 30%;
} 

/* RESPONSIVE */
.respond {
    width: 100%;
    max-width: 243px;
}

.video {
    max-width: 560px;
    height: 315px;
    width: 100%;
}

/* ALIGN */
.lefty {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* SIDEBAR */
.sidebar {
float: right;
width: 30%;
height: auto;
border: 1px solid white;
margin: 3px 20px 0px 3px;
}

.sidebar-bottom {
display: none;
}


@media screen and (max-width: 243px) {

.sidebar {
display: none;
}

.sidebar-bottom {
display: block;
position: relative;
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border: 1px solid white;
background: white;
}
}