*
{
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: rgb(65, 69, 70);
text-shadow: 0 2px 2px black;
}
.white{ color: white}
::placeholder
{
color: lightgray;
}
#container
{
display: table;
width: 100%;
}
.left-half
{
position: absolute;
left: 10%;
top: 100px;
width: 30%;
}
.right-half
{
text-align: center;
position: absolute;
right: 0px;
width: 50%;
}
#form
{
width: 400px;
padding: 40px;
background-color: #9147fe;
text-align: center;
border-radius: 24px;
border-color:white;
border-width: 36px;
}
#form h1
{
color: white;
font-size: 24px;
}
#form h2
{
color: white;
font-size: 16;
}
#form h4
{
color: white;
}
#form input
{
border: none;
background: none;
display: block;
margin: 20px auto;
border: 2px solid lightblue;
padding: 14px 8px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
button
{
text-align: center;
border: none;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid lightblue;
padding: 14px 8px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.5s;
}
#button-start:hover
{
cursor: pointer;
background-color: lightblue;
color: black;
}
#button-start-yt:hover
{
cursor: pointer;
background-color: red;
color: white;
}
p
{
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
}
.choose
{
color: white;
cursor: pointer;
font-weight: 700;
}
#yt-button
{
display: inline-block;
width: 45%;
cursor: pointer;
}
#yt-button:hover
{
text-decoration: underline;
}
#tw-button
{
display: inline-block;
width: 45%;
cursor: pointer;
}
#tw-button:hover
{
text-decoration: underline;
}
#yt-vid-button:hover
{ text-decoration: underline;}
.results
{
color: white;
text-align: center;
text-decoration: none;
}
.results a
{
color: white;
font-size: 24px;
}
.twitch
{
text-align: center;
max-width: 70%;
width: 45%;
height: 185px;
float: left;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background-color: #9147fe;
border-radius: 24px;
margin-left: 10px;
}
.youtube-vid
{
text-align: center;
max-width: 70%;
width: 45%;
height: 185px;
float: left;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background-color: green;
border-radius: 24px;
margin-left: 10px;
}
.youtube
{
width: 45%;
height: 185px;
float: left;
background-color: #c4302b;
border-width: 36px;
text-align: center;
max-width: 70%;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
border-radius: 24px;
margin-left: 10px;
}
.text{
width: 400px;
padding: 40px;
background-color: #9147fe;
text-align: center;
border-radius: 24px;
border-color: white;
border-width: 36px; color: white; margin-top: 10px; }
#yt-button
{
width: 20%;
margin: 20px;
display: inline-block;
cursor: pointer;
}
#yt-button:hover
{
text-decoration: underline;
}
#tw-button
{
width: 20%;
margin: 20px;
display: inline-block;
cursor: pointer;
}
#tw-button:hover
{
text-decoration: underline;
}
#yt-vid-button
{
width: 20%;
margin: 20px;
display: inline-block;
cursor: pointer;
}
#tw-button:hover
{
text-decoration: underline;
}
@media screen and (max-width: 980px) {
.right-half
{
position: relative !important;
width: 100%;
}
.left-half
{
position: relative !important;
top: 0;
left:0;
width: 100%;
}
.youtube
{
width: 100%;
height: 185px;
float: left;
max-width: 100%;
margin: 0;
margin-top: 10px;
}
.twitch
{
text-align: center;
max-width: 100%;
width: 100%;
height: 185px;
margin: 0;
margin-top: 10px;
}
.youtube-vid
{
text-align: center;
max-width: 100%;
width: 100%;
height: 185px;
margin: 0;
margin-top: 10px;
}
#container{ display: block}
#form{ border-radius:0;}
.text{ border-radius:0;}
}
.alert {
padding: 8px 14px 8px 14px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 4px; }