html {
    background: linear-gradient(
            to bottom,
            white 0%,       /* Start Top Color */
            white 50%,      /* End Top Color */
            #161616 50%,   /* Start Bottom Color */
            #161616 100%   /* End Bottom Color */
    ) fixed no-repeat;
}
body {
    margin: 0;
    background: white;
    font-family: Arial, sans-serif;
}
#first-slide {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
#lower-half {
    display: flex;
    flex-direction: row;
    height: 100%;
}
#left-side-lower-half {
    margin-left: 5%;
    width: 45%;
}
#left-side-lower-half > h1 {
    margin-top: 120px;
    font-size: 5rem;
    margin-bottom: 0;
}
#left-side-lower-half > button {
    margin-top: 60px;
    border: none;
    padding: 10px 20px 10px 20px;
    font-size: 2rem;
    background: black;
    color: white;
    font-family: Arial, sans-serif;
    font-weight: 900;
}
#left-side-lower-half > button:hover {
    background: #3f3f3f;
    cursor: pointer;
}
#right-side-lower-half {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}
#right-side-lower-half > img {
    width: 90%;
    height: auto;
}
#greater-nav {
    display: flex;
    justify-content: left;
    align-items: baseline;
    z-index: 2;
    background: white;
    width: 90%;
    margin-left: 5%;
}
nav {
    text-align: center;
    width: max-content;
    height: min-content;
    margin: 15px 15px 15px 45px;
}
nav > button {
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    font-family: Arial, sans-serif;
    /*color: hsl(219, 90%, 50%);*/
    margin-right: 1rem;
}
a {
    text-decoration: none;
    color: black;
}
#first-button {

}
#first-button:hover {

}
#middle-button {
    /*padding-left: 1rem;*/
    /*padding-right: 1rem;*/
}
#middle-button:hover {

}
#last-button {

}
#last-button:hover {

}
nav > button:hover {
    /*cursor: pointer;*/
    /*text-decoration: underline;*/
    /*!*color: hsl(229, 80%, 50%);*!*/
    /*color: #3f3f3f;*/
}
nav > button > a:hover {
    cursor: pointer;
    text-decoration: underline;
    /*color: hsl(229, 80%, 50%);*/
    color: #3f3f3f;
}
#name {
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    margin-left: 30px;
}

#underneath-stuff {
    width: 100%;
    height: max-content;
    border: none;
    margin-top: 2rem;
}
#underneath-stuff > div {
    padding-bottom: 2rem;
}
#arguments-div {
}
.border-card {
    display: flex;
    flex-direction: column;
}
.border {
    width: 90%;
    height: 5px;
    background: black;
    z-index: 1;
    margin-left: 5%;
}
.inside-card {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.inside-card-left {
    margin-left: 5%;
    width: 35%;
    font-size: 2rem;
    margin-top: 2rem;
    flex-shrink: 0;
}
.inside-card-right {
    display: flex;
    flex-direction: column;
    width: 55%;
    flex-shrink: 0;
}
.inside-card-right > h2 {
    font-size: 2rem;
    margin-bottom: 0;
}
.inside-card-right > h3 {
    font-style: italic;
    margin-bottom: 0;
}
.inside-card-right > p {
    font-size: 1rem;
    margin-bottom: 0;
}
.definition-box > p {
    font-size: 1rem;
    margin-bottom: 0;
}
.row-creator {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 2rem 0 0 0;
}
.row-creator > p {
    margin-bottom: 0;
    margin-top: 0;
}
.counterarguments-buttons {
    background: none;
    border: 2px solid black;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    font-weight: 700;
    min-width: max-content;
    width: 30%;
    padding: 5px 10px 5px 10px;
    margin-bottom: 0;
    margin-right: 5%;
    flex-shrink: 0;
}
.counterarguments-buttons:hover {
    cursor: pointer;
    color: #3f3f3f;
    border: 2px solid #3f3f3f;
}
.definition-box {
    /*background: #3f3f3f;*/
    /*color: white;*/
    border: 2px solid black;
    padding: 15px;
    margin-top: 1rem;
    width: 85%;
    margin-left: 5%;
}
.definition {
    /*margin-left: 5%;*/
    margin-top: 0;
}
.read-more {
    margin-left: 5%;
    width: max-content;
    max-width: 40vw;
    /*font-size: 0.8rem !important;*/
}
.read-more:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #3f3f3f;
}
#read-more-1 {

}
#read-more-2 {

}
#read-more-3 {

}
.hidden-1 {
    display: none;
}
.hidden-1-pair {

}
#reveal-1 {
    width: max-content;
    margin-left: auto;
}
#reveal-1:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-2 {
    display: none;
}
.hidden-2-pair {

}
#reveal-2 {
    width: max-content;
    margin-left: auto;
}
#reveal-2:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-3 {
    display: none;
}
.hidden-3-pair {

}
#reveal-3 {
    width: max-content;
    margin-left: auto;
}
#reveal-3:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-4 {
    display: none;
}
.hidden-4-pair {

}
#reveal-4 {
    width: max-content;
    margin-left: auto;
}
#reveal-4:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-5 {
    display: none;
}
.hidden-5-pair {

}
#reveal-5 {
    width: max-content;
    margin-left: auto;
}
#reveal-5:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-6 {
    display: none;
}
.hidden-6-pair {

}
#reveal-6 {
    width: max-content;
    margin-left: auto;
}
#reveal-6:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-7 {
    display: none;
}
.hidden-7-pair {

}
#reveal-7 {
    width: max-content;
    margin-left: auto;
}
#reveal-7:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.hidden-8 {
    display: none;
}
.hidden-8-pair {

}
#reveal-8 {
    width: max-content;
    margin-left: auto;
}
#reveal-8:hover {
    color: #3f3f3f;
    text-decoration: underline;
    cursor: pointer;
}
.img {
    width: 70%;
    height: auto;
    margin: 1rem auto 0 auto;
}
.img-caption {
    font-size: 0.9rem !important;
    text-align: center;
}
.block-quote {
    font-size: 0.9rem !important;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
footer {
    background: #161616;
    color: white;
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
}
footer > p {
    margin-left: 5%;
}