/* Basic styling for the whole page */
body {
    background-color: var(--primaryColorOne);
    color: var(--primaryColorTwo);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    margin: 0;
    text-align: center;
    font-size: larger;
}

/* The color variables are seperate so that they can smoothly transition when
dark mode is toggled */
body {
    --primaryColorOne: #BBCDE5;
    --primaryColorTwo: #222;
    --accentColorOne: #1C5D99;
    --accentColorTwo: #639FAB;
    transition: .2s;
}

/* Style all the buttons on the page */
button {
    color: #222;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    background-color: var(--accentColorTwo);
    border: var(--accentColorOne) 2px solid;
    padding: .5em;
    transition: .2s;
}

button:hover {
    font-style: italic;
    color: var(--accentColorOne);
    box-shadow: 0px 0px 5px var(--primaryColorTwo);
    transition: .2s;
}

/* Style the disclaimer popup */
.disclaimerPopup, .protocolPopup {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.disclaimerContents, .protocolContents {
    background-color: var(--primaryColorOne);
    width: 95%;
    max-width: 30em;
    height: auto;
    padding: 2em;
}

.disclaimerAccepted, .protocolAccepted {
    opacity: 0%;
    transition: .2s;
}

/* Style the box that the content lives in */
.contentBox {
    width: 90%;
    max-width: 30em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 2em);
    padding: 1em;
    margin: 0 auto;
}

/* Style the search mode selector */
.searchTypeRadio {
    height: 8em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 2em;
}

.searchTypeRadio input[type=radio] {
    display: none;
}

.searchTypeRadio label {
    width: calc(100% - 1em);
    padding: .5em;
    border: var(--accentColorOne) 1px solid;
}

.searchTypeRadio label {background-color: none; transition: .2s;}

.searchTypeRadio label:hover {
    box-shadow: 0px 0px 5px var(--primaryColorTwo);
    transition: .2s;
}

.searchTypeRadio input[type=radio]:checked + label {
    background-color: var(--accentColorTwo);
    color: #222;
    transition: .2s;
}

/* Style the manual input box */
.searchTypeRadio label input[type=text] {
    color: var(--primaryColorTwo);
    background-color: var(--primaryColorOne);
    border: var(--accentColorOne) 0px solid;
    margin-left: .25em;
    width: 0px;
    transition: .2s;
}

.searchTypeRadio input[type=radio]:checked + label input[type=text] {
    border: var(--accentColorOne) 2px solid;
    width: 10em;
    transition: .2s;
}

/* Style the video selector */
.videoRadio {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.videoRadio input[type=radio] {
    display: none;
}

.videoRadio label img {
    border: var(--accentColorOne) 5px solid;
    width: 8em;
    height: 4.5em;
    filter: saturate(.2);
    transition: .2s;
}

.videoRadio label img:hover {
    box-shadow: 0px 0px 5px var(--primaryColorTwo);
    transition: .2s;
}

.videoRadio input[type=radio]:checked + label img {
    border: var(--accentColorTwo) 5px solid;
    filter: saturate(1);
    transition: .2s;
}

/* Style the button that sends the rickroll */
.goButton {
    width: 100%
}

/* Style the search box shown when searching for Roku devices */
.searchPopup {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchContent {
    background-color: var(--primaryColorOne);
    width: 95%;
    max-width: 30em;
    height: auto;
    padding: 2em;
}

.searchDone {
    opacity: 0%;
    transition: .2s;
}

/* Style the search results in the search box */
@keyframes searchFadeIn {
    from {opacity: 0%;}
    to {opacity: 100%;}
}

.rokuSearchResults {
    display: flex;
    flex-direction: column;
    animation: searchFadeIn .5s ease 0s 1 forwards;
}

.rokuFound {
    margin-bottom: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
    border: var(--accentColorOne) 2px solid;
}

/* Style the header buttons */
.actionsHeader {
    margin-bottom: 2em;
}

.actionsHeader a {
    text-decoration: none;
    margin-right: 1em;
}