html, body { 
    margin: 0;
    padding:0;
    width: 100%;
    height: 100%;
    border: none;
    scroll-behavior: smooth;
  }

body {
    padding-bottom: 20rem;
}

/*Universal Selector*/
* {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: azure;
  scroll-behavior: smooth;
  margin: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-color: red;
}

/*Home page*/
.landing-page .menu {
    font-size: 2rem;
    cursor: pointer;
    display: none;
}

@media(max-width: 428px) {
    .landing-page nav {
        display: none;
    }

    .landing-page .menu{
        display: block;
}
    .about-mission p{
        font-size: 0.9rem;
    }
    .about-mission .about-title {
        font-size: 1.9rem;
    }
    #landing, #credits, #about {
        overflow-x: hidden;
    }

    .casual-picture img, .hardcore-picture img {
        display:none;
    }

    #hardcore-Routine table tr th, #hardcore-Routine table tr td{
        font-size: 0.6rem;
    }

    .plans .casual-picture a h2, .plans .hardcore-picture a h2 {
        font-size: 1.8rem; 
    }

}

.container {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto;
}
#landing {
    background: rgb(40, 60, 49);
    height: 150vh;
    color: white;
    background-image: url("../img/landing-page/landing-image.jpg");
    background-size: cover;
    background-position: top left;
}

.landing-page {
    backdrop-filter: blur(5px);
    position:fixed;
    top:0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
}
.landing-page .container {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    justify-content: space-between;
}

.landing-page nav a {
    color:white;
    font-size: 1rem;
    padding-left: 1rem;
}

.landing-page .container h1 {
    color:red;
}

#landing .prompt {
  position: relative;
  left: 5%;
  top: 8%;
  padding-top: 3rem;
}

#landing .prompt h1 {
    font-size: 3rem;
}

#landing .prompt a {
    background: red;
    padding: 0.5rem 2rem;
    transition: all ease-in-out 200ms;
    font-weight: bold;
    border-radius: 4px;
    position: relative;
    top: 2.5rem;
}

#landing .prompt a:hover {
    background: rgb(147, 8, 8);
    text-decoration: none;
}

#landing .prompt a:active {
    background:white;
    color:red;
    border-style: solid;
    border-color: red;
}

/*Start of credits section*/

#credits {
    background: rgb(39, 30, 30);
    padding-top: 2rem;
}

.credits-section {
    margin: 0 auto;
    max-width: 45rem;
    text-align: center;
}

#credits .credits-section img {
    height:30vw;
    width: auto;
    padding: 1rem;
}

.credits-section h2{
    font-size: 0.9rem;
    line-height: 1.6;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

.credits-section h1 {
    color:brown;
    padding-bottom: 1rem;
}

/*sidebar*/

#sidebar {
    background: black;
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:1100;
    display:flex;
    position: fixed;
    align-items:center;
    justify-content:center;
    display:none;
    transform: translateX(-120%);
    transition: all ease-in-out 300ms;
}

#sidebar.active {
    display: flex;
    position: fixed;
    transform:translateX(0%);
}

#sidebar nav a {
    display:block;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

#sidebar .close {
    font-size: 2rem;
    position: absolute;
    right: 30px;
    top: 30px;
    color: white;
    cursor: pointer;
    z-index: 2000;
}

/*End of home page*/

/*Start of about us*/
.about-us{
    background-color: rgb(21, 19, 19);
    padding-top: 2.5rem;
    padding-bottom: 6.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.about-image img{
    width:45vw;
    position: relative;
    left: 1rem;
    height:auto;
    border: 2px solid red;
    border-radius: 0.2rem;
}
.about-us img:hover {
    border:2px solid white;
}
.about-mission {
    font-size: 1.1rem;
    padding: 0 3rem;
    font-weight: 800;
}
.about-mission h1 {
    line-height: 1.2;
    color: rgb(243, 0, 0);
    font-size: 2.5rem;
}
.about-mission p {
    margin: 2rem 0 2rem;
    font-weight: 650;
}
/*end of "About Us" ssection*/
/*Start of plan section*/
#choosePlan {
    background-color: rgb(21, 19, 19);
    height: 180vh;
    overflow:hidden;
}
.home-page nav {
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1.5rem;
    text-align: right;
    padding-right: 1.5rem;
}
.home-page h1 {
    text-align: center;
    color: rgb(243, 0, 0);
    font-size: 3rem;
}
.casual-picture a img, .hardcore-picture a img {
    object-fit: cover;
    filter:brightness(40%);
    width:40vw;
    position: relative;
    left: 1rem;
    height:40vw;
    border: 2px solid red;
    border-radius: 0.8rem;
    margin: 3rem;
    margin-top: 2rem;
}
.plans {
    display:flex;
}
.casual-picture a img  {
    object-position: 5% 80%;
}
.hardcore-picture a img  {
    object-position: 50% 10%;
}
.casual-picture a h2 {
    z-index: 1000;
    position:relative;
    left:25%;
    bottom:60%;
    font-size: 4vw;
}
.hardcore-picture a h2 {
    z-index: 1000;
    position:relative;
    left:22%;
    bottom:60%;
    font-size: 4vw;
}
.casual-picture a:hover img, .hardcore-picture a:hover img{
    filter:brightness(20%);
    border:2px solid white;
    transition: all ease-in-out 200ms;
    width:42vw;
    height:42vw;
}
@media(max-width:512px)
{
    .plans {
        display:flex; 
        flex-direction: column;
    }
    .casual-picture a h2 {
        position: absolute;
        bottom:55vw;
        left:22vw;
    }
    .hardcore-picture a h2 {
        position: absolute;
        bottom:-8vw;
        left:21vw
    }

}
/*End of choosing plan section*/
/*Start of casual routine section*/
#casual-Routine {
    background-color: rgb(21, 19, 19);
    height: 850vh;
    overflow:hidden;
}

/*navigation*/
.navigation nav {
    column-gap: 20px;
    display: grid;
    grid-auto-flow: column; 
    justify-content: end;
    backdrop-filter: blur(5px);
    position:fixed;
    top:0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    padding-top:2vw;
    font-weight: 600;
    font-size: 1rem;
}

/*End of navigation*/

.casual-structure {
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto;
    max-width: 45rem;
    text-align: center;
    padding: 2rem;
    line-height: 2rem;
}

.menuIcon {
    font-size: 2rem;
    cursor: pointer;
    display: none;
}

.Intro h1 {
    color:crimson;
    margin-bottom: 2rem;
    margin-top: 5rem;
}
.Intro p a {
    color:#FF4500;
    font-size: smaller;
}
.Intro p a:hover {
    color:#ff7700;
    text-decoration-color: black;
}
.weeks {
    border-radius: 25px;
    background-color: rgb(45, 43, 43);
}
.week-2 {
    background-color: rgb(38, 33, 33);
}
.week-3 {
    background-color: rgb(24, 20, 20);
}
.week-4 {
    background-color: rgb(3, 2, 2);
}
.week-1, .week-2, .week-3, .week-4 {
    margin-top: 2rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
}
.week-1 h1 {
    color:red;
}
.week-1 p, .week-2 p, .week-3 p, .week-4 p{
    font-size: 1rem;
    color:rgb(176, 172, 172)
}
.week-1 p a, .week-2 p a, .week-3 p a, .week-4 p a {
    color: rgba(255, 0, 0, 0.647);
    text-decoration-color: white;
}
.tips {
    font-size: 1.1rem;
    line-height: 2.1rem;
    border: 2px solid rgb(161, 9, 9);
    border-radius: 0.8rem;
    background-color: rgb(59, 55, 55);
    max-width: 32rem;
    height: 100%;
    margin: 0 auto;
}
.tips h2 {
    color: rgb(238, 5, 5);
    padding-bottom: 1rem;
}
.week-2 h1 {
    color:rgb(201, 12, 12);
}
.week-3 h1 {
    color:rgb(168, 11, 11);
}
.week-4 h1 {
    color:rgb(136, 8, 8);
}

@media(max-width:756px)
{
    .navigation nav a{
        display:none;
    }
    .menuIcon {
        display: block;
        position:relative;
        right: 1rem;
    }
    .prompt h1{
        font-size: 1.6rem;
    }
    .prompt a {
        font-size: 1rem;
    }
    #landing .prompt h1 {
        font-size: 2rem;
    }
}

/*Sidebar for casual workout session*/

#sidebarCasual {
    background: black;
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:1100;
    display:flex;
    position: fixed;
    align-items:center;
    justify-content: center;
    display: none;
    transform: translateX(-120%);
    transition: all ease-in-out 300ms
}

#sidebarCasual.active {
    display: flex;
    position: fixed;
    transform:translateX(0%);
}

#sidebarCasual nav a {
    display:block;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

#sidebarCasual .closeCasual {
    font-size: 2rem;
    position: absolute;
    right: 30px;
    top: 30px;
    color: white;
    cursor: pointer;
    z-index: 2000;
}

/*End of causal routine*/

/*Start of hardcore routine*/

#hardcore-routine {
    background-color: rgb(48, 5, 5);
    height: 1200vh;
    overflow:hidden;
}

.hardcore-misc {
    padding: 5rem;
    line-height: 2rem;
    border-radius: 1.5rem;
    background-color: rgb(31, 7, 7);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 auto;
    max-width: 45rem;
    text-align: center;
}

.hardcore-misc div h1 {
    padding-bottom: 3rem;
    color:brown;
    font-size: 2.2rem;
}

.hardcore-misc div hr {
    margin: 2rem;
}

.hardcore-routine {
    padding: 5rem;
    line-height: 2rem;
    font-weight: 700;
    margin: 0 auto;
    max-width: 45rem;
    text-align: center;
    border-radius: 1.5rem;
}

.hardcore-routine h1 {
    padding-top:4rem;
    padding-bottom: 2rem;
    color:rgb(205, 2, 2);
    font-size: 2.2rem;
}

.hardcore-routine th, .hardcore-routine td {
    padding: 13px;
    font-size: 1rem;
    font-weight: 650;
}

.hardcore-routine th {
    font-size: 1.4rem;
    background-color: rgb(183, 22, 22);
}

.hardcore-routine tr:nth-child(even){
    background-color: rgb(92, 0, 0);
}

.hardcore-routine tr:nth-child(odd){
    background-color: rgb(129, 17, 17);
}

table tr td ul li a {
    text-decoration: underline;
    text-decoration-color: red;
}

table tr td ul li a:hover {
    text-decoration: underline;
    text-decoration-color: rgb(230, 210, 210);
    color: red;
}

.hardcore-routine h2 {
    padding: 2rem;
    font-size: 1.8rem;
    color:rgb(245, 233, 233);
}

.third-pair {
    margin-left: 3rem;
}

/*navigation*/

#sidebarHardcore {
    background: black;
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:1100;
    display:flex;
    position: fixed;
    align-items:center;
    justify-content: center;
    display: none;
    transform: translateX(-120%);
    transition: all ease-in-out 300ms
}

#sidebarHardcore.active {
    display: flex;
    position: fixed;
    transform:translateX(0%);
}

#sidebarHardcore nav a {
    display:block;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

#sidebarHardcore .closeHardcore {
    font-size: 2rem;
    position: absolute;
    right: 30px;
    top: 30px;
    color: white;
    cursor: pointer;
    z-index: 2000;
}

/*End of navigation*/