:root {
    --border-color: black;
    --border-size: 1.5px;
    --border-type: solid;
    --text-color: rgb(0, 0, 0);
    --primary-color: rgb(239, 206, 161) ;
    --secondary-color: rgb(255, 228, 196); 
    --tertiary-color: rgb(223, 183, 131)  ;
    --primary-font: 'Century Gothic';
    --backup-font1: Arial;
    --backup-font2: Sans-serif;
    --default-font-size: 17px;
}


* {
    margin: 0%;
    padding: 0%; 
}


body {
    background-color: var(--primary-color);
    font-size: var(--default-font-size);
    font-family: var(--primary-font), var(--backup-font1), var(--backup-font2);
    color: var(--text-color);
}

/* Change carousel arrows to a darker colour */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}


/* Most formatting of boxes and buttons were completed in html using Bootstrap utility classes and grid layout. Hence, most of the css was 
deleted in the migration to Bootstrap. All that remains are custom color formatting, image/video formatting, and formatting pseudo clases */


.nav-link, .dropdown-item {
     font-size: 19px;
     color: var(--text-color);
}


.logo {
    width: 150px;
    border-radius: 50%;
}


img {
    width: 90%;
    margin: 0%;
}


.dropdown-menu {
    background-color: var(--primary-color);
}


header, footer {
    background-color: var(--secondary-color);
}


.bg-custom {
    background-color: var(--secondary-color);
}


.btn-custom {
    background-color: var(--primary-color);
 }


.btn-custom:hover { 
    background-color: var(--tertiary-color); 
    font-weight: 550 ;
    transform: scale(1.1);
}


h2, p {
    margin: 3%;
}


video {
    width: 60%;
}