/*
   ___ _                _               ___ _                                
  / __\ |__   __ _ _ __| | ___  ___    / __\ |__   __ _ _ __   ___  ___ ___  
 / /  | '_ \ / _` | '__| |/ _ \/ __|  / /  | '_ \ / _` | '_ \ / _ \/ __/ _ \ 
/ /___| | | | (_| | |  | |  __/\__ \ / /___| | | | (_| | | | |  __/ (_| (_) |
\____/|_| |_|\__,_|_|  |_|\___||___/ \____/|_| |_|\__,_|_| |_|\___|\___\___/ 
                                                                                       

Web Development 3 - Assignment 3
Alicia Ramirez
*/

/*
   _____                           _ 
  / ____|                         | |
 | |  __  ___ _ __   ___ _ __ __ _| |
 | | |_ |/ _ \ '_ \ / _ \ '__/ _` | |
 | |__| |  __/ | | |  __/ | | (_| | |
  \_____|\___|_| |_|\___|_|  \__,_|_|
*/

* {
    overflow-x: hidden;
}

body {
    font-family: 'Arimo', sans-serif;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

main {
    margin-top: 65vh;
}

*:not(video) {
    max-width: 100%;
}

h1 {
    font-family: 'Work Sans', sans-serif;
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: .3em;
    margin: 0;
}

/* 
  _    _                _           
 | |  | |              | |          
 | |__| | ___  __ _  __| | ___ _ __ 
 |  __  |/ _ \/ _` |/ _` |/ _ \ '__|
 | |  | |  __/ (_| | (_| |  __/ |   
 |_|  |_|\___|\__,_|\__,_|\___|_|   
 */

video {
    background-color: black;
}


nav {
    display: inline-flex;
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 99;
}

.logo {
    width: 70px;
}

.menu {
    display: inline-flex;
}

.menu a,
.language a {
    color: white;
    border-bottom: 4px solid transparent;
    text-shadow: 1px 1px 4px black;
    font-family: 'Arimo', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 30px 30px;
    margin: 0 20px;

}

.menu a:hover {
    border-bottom: 4px solid white;
    font-weight: bold;
}

/*
  ____            _       
 |  _ \          | |      
 | |_) | ___   __| |_   _ 
 |  _ < / _ \ / _` | | | |
 | |_) | (_) | (_| | |_| |
 |____/ \___/ \__,_|\__, |
                     __/ |
                    |___/ 
*/

.banner {
    top: -150px;
    left: 0;
    position: absolute;
    width: 100%;
}

.banner-text {
    color: white;
    align-items: center;
    animation: 2s fadein;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

.cta-link {
    padding: 10px 20px;
    color: #141414;
    background-color: white;
    border-radius: 20px;
}

.call-to-action {
    font-family: 'Roboto', sans-serif;
    font-size: .90em;
}

.video-overlay {
    position: absolute;
    float: left;
    width: 100%;
    min-height: 1080px;
    background-color: #000;
    opacity: .5;
    z-index: 0;
    pointer-events: none;
}

.language {
    overflow: hidden;
}

.videos {
    width: 80%;
    margin: auto;
}

video::-webkit-media-controls {
  display: none;
}

.videos h2 {
    color: black;
    font-size: 2.25em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.thumbs,
.profiles {
    display: grid;
}

.thumbs {
    gap: 1.5em;
}

.profiles {
    padding-top: 4em;
    width: 80%;
    margin: auto;
}

.profile-name {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 1.2em 0 .4em;
    color: black;
    letter-spacing: .8px;
}

.korean {
    font-weight: 200;
    color: #5c5c5c;
    margin: 0;
}

.profiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 2em 1.5em;
    overflow-y: hidden;
}

.profile {
    margin: 1em 0 2em;
}

.profile,
.profile p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.profile a {
    font-size: 1.2em;
    text-decoration: none;
}

.thumbs img {
    border-radius: 2.5em;
    filter: #808080;
    -webkit-filter: grayscale(1);
}

.profiles img {
    border-radius: 10em;
    filter: gray;
    -webkit-filter: grayscale(1);
}

.thumbs img:hover,
.profiles img:hover {
    -webkit-filter: grayscale(0);
    box-shadow: 1px 1px 4px #a7a7a7;
    -webkit-transition: all .5s ease-in-out;
}

/*
  _____      _      _             
 |  __ \    (_)    (_)            
 | |__) | __ _  ___ _ _ __   __ _ 
 |  ___/ '__| |/ __| | '_ \ / _` |
 | |   | |  | | (__| | | | | (_| |
 |_|   |_|  |_|\___|_|_| |_|\__, |
                             __/ |
                            |___/ 
*/

.pricing {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    flex-direction: row;
    margin: 0 auto;
    width: 90%;
    padding: 30px 0 20px;
}

.pricing img {
    margin: 15% 0 0;
    border-radius: 900px;
    width: 200px;
}

.pricing div {
    color: black;
    text-align: center;
    margin: auto;
}

.pricing h2 {
    font-size: 1.15em;
    font-weight: 200;
}

.cost {
    color: gray;
}

.purchase {
    color: black;
    text-decoration: none;
    letter-spacing: .75px;
    border: 1px solid black;
    margin-top: 8px;
    padding: 10px 20px;
    display: inline-block;
}

.purchase:hover {
    color: white;
    background-color: #0c0c0c;
}

.disclaimer {
    width: 80%;
    margin: 3em auto 0;
}

.disc-list {
    list-style: circle inside;
    padding: 0 1em;
    line-height: 2em;
}

.disclaimer li,
.disclaimer p {
    font-size: .95em;
    color: #3f3f3f;
}

.price {
    overflow: visible;
}

/*
  ______          _            
 |  ____|        | |           
 | |__ ___   ___ | |_ ___ _ __ 
 |  __/ _ \ / _ \| __/ _ \ '__|
 | | | (_) | (_) | ||  __/ |   
 |_|  \___/ \___/ \__\___|_|   
*/

footer {
    background-color: #181818;
    border-top: 1px solid gray;
    color: white;
    font-family: 'Arimo', sans-serif;
    font-size: .85em;
    letter-spacing: .05em;
    max-width: 100%;
    display: grid;
}

footer p {
    overflow: hidden;
    max-width: 100%;
}

.social-media img {
    width: 50px;
}


/*
     _          _                 _   _                 
    / \   _ __ (_)_ __ ___   __ _| |_(_) ___  _ __  ___ 
   / _ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ___ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/   \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
*/

@keyframes fadein {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*
  __  __ _          
 |  \/  (_)___  ___ 
 | |\/| | / __|/ __|
 | |  | | \__ \ (__ 
 |_|  |_|_|___/\___|
*/

/* :focus {
    outline: 3px solid red;
} */

/*
  __  __          _ _          ____                  _           
 |  \/  |        | (_)        / __ \                (_)          
 | \  / | ___  __| |_  __ _  | |  | |_   _  ___ _ __ _  ___  ___ 
 | |\/| |/ _ \/ _` | |/ _` | | |  | | | | |/ _ \ '__| |/ _ \/ __|
 | |  | |  __/ (_| | | (_| | | |__| | |_| |  __/ |  | |  __/\__ \
 |_|  |_|\___|\__,_|_|\__,_|  \___\_\\__,_|\___|_|  |_|\___||___/
*/

/* Extra small devices */
@media (max-width: 767px) {

    .index-content,
    .instructors-content,
    .pricing-content {
        margin-top: 100vh;
    }

    .pricing-content {
        margin-top: 110vh;
    }

    nav {
        margin-top: 3vw;
    }

    .logo {
        width: 3rem;
    }

    .index-content {
        margin-top: 100vh;
    }

    .instructors-content {
        margin-top: 100vh;
    }

    .menu,
    .language {
        display: none;
    }

    .navigation {
        color: white;
        background: rgb(0, 0, 0, 0.9);
        display: block;
        margin-top: 48vh;
        padding-bottom: 10em;
        width: 100%;
        overflow-x: hidden;
        position: fixed;
        transition: 0.5s;
        z-index: 1;
    }

    .navigation a,
    .language a {
        color: white;
        clear: left;
        display: block;
        font-family: 'Arimo', sans-serif;
        font-size: 1.3rem;
        text-decoration: none;
        padding: 4vh 6vw;
        border-bottom: 4px solid transparent;
        text-shadow: 1px 1px 4px black;
    }

    .navigation a:nth-child(1) {
        text-align: right;
    }

    .nav-open {
        color: white;
        cursor: pointer;
        display: block;
        float: right;
        margin-left: 70vw;
        font-size: 1.75rem;
    }

    .nav-close {
        float: left;
        margin: 1em 0 0 1em;
    }

    .navigation {
        display: block;
    }

    .banner-text {
        left: 10%;
        top: 2%;
        width: 85%;
        margin-top: 55vh;
    }

    .banner-text h1 {
        font-size: 4.5vw;
    }

    .banner-text p {
        font-size: 2.5vw;
        line-height: 1.75em;
        width: 100%;
    }

    .call-to-action {
        display: inline-flex;
        align-items: center;
        align-content: center;
        justify-content: left;
        z-index: 2;
        margin-top: 3vw;
    }

    .call-to-action a {
        font-size: 2.5vw;
        text-decoration: none;
    }

    .call-to-action a:hover {
        cursor: pointer;
    }

    .call-to-action a:nth-child(1) {
        color: white;
        padding-right: 60px;
    }

    .thumbs {
        grid-template-columns: 1fr;
        gap: 1.75em;
    }

    .profiles {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pricing {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .videos h2 {
        padding-top: 6vh;
    }

    .disclaimer {
        width: 90%;
    }

    footer {
        display: grid;
        grid-template-rows: 1fr auto auto;
        padding: 2vh 6vw;
        margin-top: 3.5vh;
        box-sizing: border-box;
    }

    footer div {
        padding: 1.5vw 0;
        height: 100%;
        line-height: 1.4em;
    }

    footer p {
        font-size: 1em;
        width: 80%;
    }
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .index-content,
    .instructors-content,
    .pricing-content {
        margin-top: 100vh;
    }

    .logo {
        width: 6vw;
    }

    .menu {
        padding: 2vw 6vw;
    }

    .menu a,
    .language a {
        font-size: 1.4vw;
        padding: 25px 10px;
        margin: 0;
    }

    .navigation,
    .nav-open {
        display: none;
        left: -9999px;
        top: -9999px;
    }

    .nav-open {
        font-size: 1rem;
    }

    .thumbs {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .banner-text {
        left: 10%;
        top: 2%;
        width: 85%;
        margin-top: 55vh;
    }

    .banner-text h1 {
        font-size: 4vw;
    }

    .banner-text p {
        font-size: 2vw;
        line-height: 1.75em;
        width: 86%;
    }

    .call-to-action {
        display: inline-flex;
        align-items: center;
        align-content: center;
        justify-content: left;
        z-index: 2;
    }

    .call-to-action a {
        font-size: 1.75vw;
        text-decoration: none;
    }

    .call-to-action a:hover {
        cursor: pointer;
    }

    .call-to-action a:nth-child(1) {
        color: white;
        padding-right: 60px;
    }

    .profiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing {
        grid-template-columns: repeat(3, 1fr);
    }

    .videos h2 {
        margin: 14vh 0 4vh;
    }

    footer {
        flex-direction: column;
        justify-content: left;
        margin-top: 3em;
        padding: 20px 6vw;
    }

    footer div {
        padding: 1.5vw 0;
    }

    footer p {
        font-size: 1em;
        line-height: 3vh;
        width: 90%;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .index-content,
    .instructors-content,
    .pricing-content {
        margin-top: 100vh;
    }

    .pricing-content {
        margin-top: 105vh;
    }

    .logo {
        width: 5vw;
    }

    .menu {
        padding: 2vh 0 2vh 15vw;
    }

    .menu a,
    .language a {
        font-size: 1.25vw;
        padding: 25px 0;
        margin: 0 20px;
    }

    .banner-text {
        left: 8%;
        top: 2%;
        width: 85%;
        margin-top: 55vh;
    }

    .banner-text h1 {
        font-size: 2.75em;
    }

    .banner-text p {
        font-size: 2vw;
        line-height: 1.75em;
        width: 80%;
    }

    .call-to-action {
        display: inline-flex;
        align-items: center;
        align-content: center;
        justify-content: left;
        z-index: 2;
    }

    .call-to-action a {
        font-size: 2vw;
        text-decoration: none;
    }

    .call-to-action a:hover {
        cursor: pointer;
    }

    .call-to-action a:nth-child(1) {
        color: white;
        padding-right: 60px;
    }

    .navigation,
    .nav-open {
        display: none;
        left: -9999px;
        top: -9999px;
    }

    .thumbs {
        grid-template-columns: repeat(2, 1fr);
    }

    .profiles {
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing {
        grid-template-columns: repeat(6, 1fr);
        gap: 2rem;
    }

    .videos h2 {
        margin: 7vh 0 4vh;
    }

    footer div {
        padding: 1.5vw 0;
    }

    footer p {
        font-size: 1.25em;
        width: 90%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    nav {
        padding: 0 2vw;
    }

    .index-content,
    .instructors-content,
    .pricing-content {
        margin-top: 70vh;
    }

    .banner-text {
        left: 6%;
        width: 90%;
        margin-top: 40vh;
    }

    .logo {
        width: 4em;
    }

    .menu a,
    .language a {
        font-size: .95em;
        padding: 25px 1.2vw;
        margin: 0 20px;
    }

    /* Banner */

    .banner video {
        background-color: black;
        width: 100vw;
        object-fit: cover;
    }

    .banner-text h1 {
        font-size: 3em;
    }

    .banner-text p {
        font-size: 1.15rem;
        line-height: 1.75em;
        width: 52vw;
        padding-bottom: 1em;
    }

    .call-to-action a {
        font-size: 1.25em;
    }

    .call-to-action a:nth-child(1) {
        padding-right: 60px;
    }

    .navigation,
    .nav-open {
        display: none;
        left: -9999px;
        top: -9999px;
    }

    .thumbs {
        grid-template-columns: repeat(3, 1fr);
    }

    .profiles {
        grid-template-columns: repeat(4, 1fr);
    }

    .videos {
        padding-top: 0;
    }

    .videos h2 {
        margin: 4vh 0 4vh;
    }

    footer {
        display: flex;
        flex-direction: row;
        margin: auto;
        max-width: 100%;
        margin-top: 5vh;
    }

    footer div {
        width: 14vw;
        margin: 0 auto;
    }

    footer div:nth-child(1) {
        width: 60vw;
    }

    footer div:nth-child(2) {
        width: 20vw;
    }

    footer div:nth-child(2) {
        width: 20vw;
    }

    footer p {
        font-size: 1.1em;
    }

    .social-media img {
        width: 50px;
        margin: 0 4px;
    }
}