:root{ /* element, global variables */
--green: #8bd450;
--purple: #734f9a;
--white: #FFFFFF;
--black: #000000;
--splashImage: url("visuals/frogTransparent.png");
}
body, html{ /*Rule Selector*/
/*Image settings*/
height: 100%;
margin: 0%;
background-color: var(--bg);
color: var(--fontColor);
font-family: monospace;
}
/*
img{
display:block;
width:100%;
height:100%;
object-fit:fill;
}
*/
ul {
font-family: helvetica;
}
li {
list-style: circle;
}
.light-theme {
--bg: var(--green); /*new variable, set property value to --green*/
--fontColor: var(--purple);
--btnFontColor: var(--white);
--btnBg: var(--black);
}
.dark-theme {
--bg: var(--purple);
--fontColor: var(--green);
--btnFontColor: var(--black);
--btnBg: var(--white);
}
.row{
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.column{
display: inline-block;
padding: 10px;
}
.column img {
width: 100%;
margin-top: 8px;
vertical-align: middle;
}
.list{ /*Class selector (.): for multiple items */
list-style: square
}
.btn{
position: absolute;
top: 250px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}
.slideImg{
animation: slide 2s;
}
.spin{
animation: rotateImg 2s;
}
#msg { /*ID Selector (#): for unique items*/
font-family: monospace;
}
@keyframes rotateImg{
from {
transform: rotate(0deg);
}
to {
transform: rotate(720deg);
}
}
@keyframes slide{
from{
transform:translate(1000px);
}
to{
transform:translate(0px);
}
}